当前位置：首页 > news >正文

前端及其技术栈，零基础入门到精通，收藏这篇就够了

news 2026/6/28 14:44:01

文章目录

0）前端
- 1、什么是前端？
- 2、为什么需要前端？
- - 前端的发展简史：
- 3、前端开发的类型
- - Web前端开发：
  - 客户端（APP）开发：
- 4、前端与后端的交互
- - Ajax：
  - Socket：
*前端技术栈
1）核心语言
- 1.1 HTML
- - 什么是HTML？
  - HTML如何描述网页？
  - HTML文档与网页的关系？
- 1.2 CSS
- - 什么是CSS？
  - 为什么使用CSS？
- 1.3 JavaScript（JS）
- - 什么是JavaScript？
  - JavaScript的作用？
2）基础技术
- 2.1 AJAX
- - 什么是AJAX？
  - AJAX的工作原理？
- 2.2 JSON
- - 什么是JSON？
  - 为什么使用JSON？
  - JSON的特点：
- 2.3 Node.js
- - 什么是Node.js？
  - 为什么使用Node.js?
  - Node.js 的特点
  - 适用场景
  - *Nodejs和AJAX的区别：
- 2.4 PHP
- - 什么是PHP？
  - 什么是PHP文件？
  - PHP 能做什么？
  - 为什么使用 PHP？
3）其他
- 3.1 Vue
- - 什么是Vue？
  - 核心特点：
- 3.2 Servlet
- - 什么是Servlet？
  - 为什么使用Servlet？
  - Servlet做什么？
- 3.3 HTTP
- 3.4 浏览器
- - 浏览器是什么？
  - 浏览器的主要构成（High Level Structure）：
  - 浏览器内核

0）前端

1、什么是前端？

前端（Front-end）指的是用户可见的界面。

网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。
前端的工作内容：
1. 将美工设计的效果图设计成浏览器可以运行的网页
2. 并配合后端做网页的数据显示和交互等可视方面的工作内容。

前端开发：创建WEB页面或APP等前端界面呈现给用户的过程。

通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

2、为什么需要前端？

即前端的意义是什么。

1990 年，Tim 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。
1994 万维网联盟（World Wide Web Consortium）成立，简称 W3C，标志着万维网的正式诞生。
1995 网景推出 JavaScript，可以用来更改前端 DOM 的样式。
前端的发展简史：
Web 1.0 时代：早期的网页以 HTML 为主，是纯静态的网页，网页是“只读”的，信息流只能通过服务器到客户端单向流通。
动态服务器页面技术的出现：页面不再是静止的，页面可以获取服务器数据信息并不断更新。
PHP、JSP、ASP.NET
但前端页面要想获取后台信息，需要刷新整个页面
AJAX 技术的出现：不需要刷新页面就可以使得前端与服务器进行网络通信。
前端Framework的出现：为解决浏览器兼容性问题。
Dojo、jQuery、YUI、ExtJS、MooTools
前端开发人员用这些 Framework 频繁发送 AJAX 请求到后台，在得到数据后，再用这些 Framework 更新 DOM 树。
Node.js的出现：基于事件循环的异步 I/O 框架，拓展了 JavaScript 在服务器端的无限可能。
移动Web和Hybrid App的出现。

前端发展的主要话题：一开始是「特效」，后来是「用户体验」，然后是「前后端分离」，再后来是「页面性能」，然后到最近的「模块化、工程化」，到现在的「以数据为中心」。

因此个人认为，前端的意义主要还是在于：

提高产品开发效率
优化产品质量
提升用户使用体验

3、前端开发的类型

Web前端开发：
- PC端开发：主要分为面向大众的各类网站（如新闻媒体、社交、电商、论坛等）和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。
- 移动端开发：
  - Web App (HTML5）开发：利用Web技术进行的App开发，可以在手机端浏览器里面打开的网站就称之为webapp。
    - Web技术本身需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
  - 混合（Hybrid App）开发：开发一款App产品的时候，利用原生与H5的开发技术的混合应用。
    - 通常由“HTML5云网站+APP应用客户端”两部份构成。
    - 原生代码部分利用WebView插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。
    - 比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
  - 微信公众号开发
  - 小程序开发
  - 小游戏开发
客户端（APP）开发：
原生开发（Native App开发），是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。
- 比如Android是利用Java、Eclipse、Android studio
- IOS是利用Objective-C 和Xcode进行开发

关于Web App、原生App、混合App的概念可参考：https://www.cnblogs.com/runhua/p/9618552.html
关于三者的区别可参考：https://zhuanlan.zhihu.com/p/162865070
以及https://zhuanlan.zhihu.com/p/71192935
关于移动端和PC端的区别，可参考：https://www.zhihu.com/question/35633784?sort=created
以及https://www.cnblogs.com/zhuzhenwei918/p/6790859.html

4、前端与后端的交互

主要有两种方式：Ajax 和 Socket 连接。

Ajax：
常见的前后端交互方式。
- 以 “请求→响应” 的方式来完成前后端的信息传递。
- 传统的表单交互需求几乎都可以由 Ajax 改造为 “原地提交并获取反馈” 的交互方式，不需要跳转页面，从而有效提升用户体验。
Socket：
对于实时性比较高的场景，Socket 连接是一个更好的选择。
- 工作方式：前后端建立一个持续的连接，信息可以随时由前端发向后端，或由后端推送到前端。
- 如果要建立一个实时对话的应用，通常就会用到 Socket 连接。

*前端技术栈

1）核心语言

web 开发者必学的三种语言：
HTML定义网页的内容
CSS规定网页的布局
JavaScript对网页行为进行编程

2）基础技术

2.1 AJAX

什么是AJAX？
AJAX（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
- 使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX的工作原理？
通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM从而更新页面。
- XMLHttpRequest 是 AJAX 的基础。

2.2 JSON

什么是JSON？
JSON（JavaScript Object Notation，JavaScript 对象表示法）是轻量级的文本数据交换格式。
- JSON 文件的文件类型是 “.json”
- JSON 文本的 MIME 类型是 “application/json”
为什么使用JSON？
对于 AJAX 应用程序来说，JSON 比 XML更快更易使用：
- 使用 XML：读取XML文档 --> 使用 XML DOM 来循环遍历文档 --> 读取值并存储在变量中
- 使用JSON：读取 JSON 字符串 --> 用 eval() 处理 JSON 字符串
JSON的特点：

2.3 Node.js

什么是Node.js？
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，一个让JavaScript运行在服务端的开发平台。
为什么使用Node.js?
- 早期 JavaScript 只是一个跑在浏览器环境里的一门脚本语言，主要用于前端页面交互。
- 通过Node.js，Javascript 不只运行于浏览器，还可以运行于服务端，打通了前端与后端。
Node.js 的特点
适用场景

*Nodejs和AJAX的区别：
Ajax（异步Javascript和XML）是一种客户端技术，通常用于更新页面内容而不刷新它。
而Node.js是服务器端Javascript运行环境，用于开发服务器软件。

2.4 PHP

什么是PHP？
PHP（PHP Hypertext Preprocessor）是一种创建动态交互性站点的强有力的服务器端开源脚本语言。
什么是PHP文件？
PHP 能做什么？
为什么使用 PHP？

3）其他

3.1 Vue

什么是Vue？
Vue是一套用于构建用户界面的渐进式JavaScript框架。
- Vue只关注视图层，采用自底向上增量开发的设计。
核心特点：

3.2 Servlet

什么是Servlet？
Java Servlet 是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。
- 是运行在 Web 服务器或应用服务器上的程序。
- Servlet 在 Web 应用程序中的位置：
为什么使用Servlet？
Java Servlet 通常情况下与使用 CGI（Common Gateway Interface，公共网关接口）实现的程序可以达到异曲同工的效果，但相比CGI，优势如下：
Servlet做什么？

3.3 HTTP

详细介绍可参考《【计算机网络】测试人关于HTTP的学习和梳理》。

3.4 浏览器

浏览器是什么？
浏览器是用来检索、展示以及传递Web信息资源的应用程序。
- 五种主流浏览器：IE、Firefox、Safari、Chrome及Opera。
浏览器的主要构成（High Level Structure）：

浏览器内核

浏览器内核可以分成两部分：渲染引擎（layout engineer / Rendering Engin）和 JS 引擎。
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。
  - 浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
- JS引擎：解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
常见的浏览器内核可以分为四种：Trident、Gecko、Blink、Webkit。

内核	浏览器
Trident	IE
Gecko	Mozilla FireFox(火狐浏览器)
webkit	Safari
Chromium/Bink（Blink 其实是 WebKit 的分支）	chrome
Presto	Opera"前任" 内核（最新的 opera 浏览器现已改用Google Chrome的Blink内核）

移动端的浏览器内核主要说的是系统内置浏览器的内核。
- iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit
- Android 4.4 之前的 Android 系统浏览器内核是 WebKit
- Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink
- Windows Phone 8 系统浏览器内核是 Trident。

浏览器内部工作原理可参考：https://kb.cnblogs.com/page/129756/
由于不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。前端常见浏览器兼容性问题解决方案可参考：https://blog.csdn.net/weixin_43638968/article/details/109177674

【部分内容参考自】