关于Web前端

Web 前端负责实现网页、App 客户端界面，依托 HTML、CSS、JavaScript 以及各类衍生框架、工具链，完成互联网产品的界面渲染与用户交互逻辑。

Web 的发展大致经历 Web1.0、Web2.0，如今正朝着 Web3.0 的方向演进。移动互联网时代，前端能力进一步外延，除浏览器网页外，还可用于开发小程序、移动端跨端应用、车载、智能手表等智能设备界面。

前端三大核心技术

HTML、CSS、JavaScript 被称为前端三要素，三者分工明确、相互依赖，共同完成网页的完整实现。

HTML 结构层：语义化搭建页面骨架；CSS 表现层：负责页面样式与布局；JavaScript 行为层：实现页面交互逻辑。

HTML（超文本标记语言）

HTML（Hyper Text Markup Language）是标记语言，不是编程语言，没有变量、循环、判断这类程序逻辑能力。通过标签来定义页面里的各类内容：标题、段落、图片、视频、表格、表单、超链接，把分散的文本、多媒体资源组织成一个完整的网页文档。

HTML4：早期版本，标签少，语义弱，大量依赖 <div>、<span> 做布局，很多标签只是单纯为了视觉效果。
HTML5：目前行业通用版本，是一次重大升级。核心理念：一次编写，多浏览器、多终端运行，降低跨端开发成本。
- 新增语义标签：<header>、<nav>、<main>、<section>、<article>、<footer>，不用全靠 div，让标签本身就能表达内容含义，利于 SEO、读屏无障碍设备识别。
- 原生多媒体：<video>、<audio>，不再依赖 Flash 插件播放音视频。
- 表单增强：新增 email、tel、date 等输入类型，原生校验，减少 JS 校验代码。
- JS API 扩展：Canvas 绘图、SVG、本地存储 localStorage、sessionStorage、离线缓存、地理位置、拖拽等大量 Web API。

CSS（层叠样式表）

CSS（Cascading Style Sheets）层叠样式表，专门用来描述 HTML 文档的表现与外观。可以控制颜色、字体、间距、布局、动画、过渡效果，还支持区分屏幕、打印、读屏器等不同输出媒介渲染不同效果。

层叠是 CSS 的核心概念：多个来源的样式规则会按照优先级、来源、特殊性进行叠加、覆盖，最终得到元素的实际样式。

发展阶段：

CSS1：基础文字、颜色、边距，能力很有限。
CSS2、CSS2.1：完善定位、媒体查询、打印样式，奠定网页布局基础。
CSS3（模块化）：CSS 不再是一个单一大版本，拆分为多个独立模块迭代。新增 flex、grid 弹性网格布局、transform 变换、transition 过渡、animation 动画、变量 --var、@layer 层叠层、容器查询等现代能力。

JavaScript

JavaScript（简称 JS）是解释型脚本语言，是前端的“大脑”，负责页面所有动态、交互、数据处理。

JavaScript 三大部分：ECMAScript + DOM + BOM。

ECMAScript

由 ECMA 国际组织标准化，定义语言本身语法、数据类型、运算符、内置对象（Array、Object、Promise 等）。

ES5：旧版浏览器广泛支持，奠定基础语法；
ES2015（俗称 ES6）里程碑版本：let、const、箭头函数、解构赋值、模板字符串、Promise、类 Class、模块 import、export；
ES2016~ESNext：逐年更新，新增 async、await、可选链、空值合并等语法糖。

DOM（文档对象模型）

浏览器提供的 API，把 HTML 文档解析成树形对象。

JS 通过 DOM 可以：读取、修改标签内容、属性、样式、增删节点、绑定点击、输入等事件。

BOM（浏览器对象模型）

操作浏览器窗口本身的 API，不属于 HTML 文档。例如页面刷新、前进后退、获取窗口宽高、location 地址栏、navigator 浏览器信息、定时器、弹窗 alert。

Web 发展阶段

Web1.0 —— 只读互联网（大约 1990－2004）

核心特征：单向输出，用户以“读”为主。

网站由开发者、企业编写内容，普通用户只能浏览网页，很难发布、修改内容。

页面形态：大量静态 HTML 页面；早期图片很少，以文字信息为主；后期出现简单动态页面，服务端拼接 HTML 返回给浏览器。
交互短板：没有局部刷新。用户提交表单，浏览器整页刷新，等待服务器返回全新页面，体验卡顿。
代表产品：早期门户网站、企业官网。
用户行为：浏览新闻、查资料。
核心技术：HTML、HTTP、URI；早期 JS 能力弱，交互有限。

局限性：只解决信息展示检索，缺少人与人双向沟通，用户无法参与内容创作。

Web2.0 —— 读写交互互联网（约 2004－至今）

Web2.0 不是某一技术标准，是一套互联网产品理念：网页从“只读”变成可读可写，普通用户也可以生产内容（UGC）。

标志性变化：

内容双向流动：不再只有网站管理员发内容，普通用户可以发帖、评论、上传图片、写博客。论坛、博客、社交平台兴起。
AJAX 异步请求，是 Web2.0 的关键技术。浏览器可以在后台和服务器交换数据，不用刷新整个页面就更新局部内容。比如滚动加载、评论提交、表单校验，极大提升用户体验。
JS 能力爆发：jQuery 简化 DOM 操作；浏览器性能提升，网页可以实现复杂桌面级交互。
富媒体普及：图片、音频、视频大量融入网页。

Web2.0 时代问题：用户产生的大量数据，所有权掌握在平台公司手里。

Web3.0 —— 尚在演进的下一代互联网

Web3.0 没有统一定稿标准，属于正在发展的概念，和 Web1.0（读）、Web2.0（读+写）做对比，理想是读－写－拥有。

核心理念：

数据归用户所有：用户自己掌握个人数据，不被单一平台垄断；可以跨不同应用携带自己的数据。
语义网络：机器可以理解网页内容含义，提供更智能的信息匹配。
结合区块链、去中心化身份，强调数字资产、隐私保护。

注意：Web3.0 目前更多是理念，并没有像 HTML、CSS 那样的完整通用标准，不同开发者对它理解也不完全一样。

Web 历史关键事迹

Tim Berners-Lee（蒂姆·伯纳斯-李，万维网之父），1989 年在欧洲核子研究组织 CERN 提出万维网构想，初衷是方便全球科研人员共享信息。

1990-12：Tim Berners-Lee 开发出世界第一个网页浏览器与网页服务器。
1991-08-06：世界第一个网站正式上线，介绍万维网相关概念。
1993-04-30：CERN 将万维网技术公开到公共领域，推动 Web 全球普及。
1994-10：W3C（万维网联盟） 成立，负责制定 Web 行业标准。
1994：Håkon Wium Lie 提出 CSS 的设计构想。
1994：网景公司发布 Navigator（网景导航者）浏览器。
1995：Brendan Eich 仅用十天开发 JS 原型，最初命名 Mocha，后续改名为 JavaScript；同年微软推出 IE1.0，带来第一次浏览器大战。
1995：PHP 诞生，让网页可以对接数据库，真正实现动态网页。
1996-12：W3C 发布 CSS Level 1 规范。
1997：DHTML 诞生，DOM 模型正式落地，允许脚本动态修改页面内容。
1998：网景被 AOL 收购，公开 Navigator 源代码，衍生 Mozilla 项目，为火狐浏览器打下基础。
2001：IE6 发布，长期垄断浏览器市场。
2002：Mozilla 项目发布火狐浏览器早期版本。
2003：苹果发布 Safari。
2004：Firefox 正式发布，第二次浏览器大战拉开序幕。
2005：AJAX 技术大规模普及，标志 Web2.0 时代正式到来。
2006：jQuery 库诞生，极大简化 DOM 操作，广泛普及。
2008：Google V8 JS 引擎问世，大幅提升 JavaScript 的执行性能；HTML5 草案发布。
2009：
- Node.js 诞生（Ryan Dahl），JavaScript 具备后端服务端开发能力，实现一套语言通吃前后端。
- PhoneGap 诞生，使用 HTML、JS 开发移动端跨平台应用。
- AngularJS 发布，早期前端 MVVM 框架。
- ECMAScript5 标准发布。
2010：React 框架诞生。
2012：微软发布 TypeScript，JavaScript 的超集，增加类型系统，适合大型项目，编译后输出普通 JS 代码。
2013：JSON 正式成为 ECMA 国际标准。
2014：Vue.js 框架发布。
2014-11：io.js 从 Node.js 分叉，后续重新合并回 Node.js，成立 Node 基金会。
2015：
- React Native 发布，使用 React 语法开发移动端原生应用。
- Polymer 1.0 发布，推进 Web Components 组件标准。
- ES2015（即 ES6）正式标准化，JavaScript 迎来重大版本更新。
- WebAssembly 问世，允许其他语言编译为二进制，在浏览器高速运行。
2016：Chrome 市场份额超过 IE，第二次浏览器大战结束；ES2016 发布。
2017：ES2017 发布，正式支持 async、await；主流浏览器全部支持 WebAssembly。
2018：ES2018 发布；Edge 切换 Chromium 内核；Parcel、TensorFlow.js 问世。
2019：ES2019 发布；Node.js 支持 ES Module；Tailwind CSS 兴起；成立 OpenJS 基金会。
2020：ES2020 带来可选链、空值合并；Deno、esbuild 发布；Core Web Vitals 成为性能标准。
2021：ES2021 发布；Vite 崛起；Next、Nuxt 元框架普及，多渲染模式流行。
2022：ES2022 发布；Solid、Qwik 新框架出现；CSS 容器查询 @container 获得浏览器支持。
2023：React 服务组件 RSC 落地；Astro 发布；Copilot 普及；WebGPU 正式发布。
2024：ES2024 发布；React 19、Svelte 5 发布；Rust 编写的 Rspack 正式推出。
2025－2026：ES2025 新特性落地；Vite 成为主流；Tailwind CSS 4 发布；AI 驱动开发深化：设计稿转代码、AI 组件生成；WebAssembly 能力持续增强。