HTML 完全指南：从历史到实战

📅 2026年04月28日 📁 技术 / 前端⏱ 4 分钟阅读

#HTML #前端 #Web #教程

📌 要点摘要: 一份面向入门者的 HTML 完整指南，从历史起源到核心语法，涵盖标签速览、语义化结构和学习资源。

HTML 并不难，难的是搞清楚该从哪开始、该学到多深。这篇文章就是给你指路的。

引言：这篇文章怎么读

这篇文章涵盖 HTML 的方方面面——从历史背景到底层机制，再到实战标签。但你不必全部从头啃到尾。

以下怎么读：

部分	阅读建议
第一章：背景与由来	选读，了解背景但不影响写代码
第二章：HTML 是什么	必读，两分钟解决”它是啥”
第三章：核心机制	必读，搞清楚代码怎么变网页
第四章：基本语法	必读，HTML 的语法规则
第五章：常用标签	跳读，用到什么查什么
第六章：学习资源	收藏，两个链接够用一辈子
第七章：结语	选读
第八章：拓展阅读	进阶再看，全是链接

工具收藏：

https://developer.mozilla.org/zh-CN/docs/Web/HTML — 入门教材，每个标签都有示例
https://html.spec.whatwg.org/ — 官方标准，终极字典

第一章：背景与由来

1.1 起源：HTML 是怎么来的

1989 年，蒂姆·伯纳斯-李（Tim Berners-Lee）在欧洲核子研究中心（CERN）提出了一个构想：通过超文本链接将分散在不同计算机上的文档连接起来。他发明了三个核心东西：

HTML — 文档标记语言
HTTP — 传输协议
URL — 地址系统

这就是万维网（Web）的起点。

1.2 历史演变

HTML 的版本演进充满了尝试、失败和妥协：

HTML 2.0 (1995) → 第一次标准化
HTML 3.2 (1997) → 加入表格、脚本
HTML 4.0 (1997) → 加入样式分离理念
XHTML 1.0 (2000) → 试图让 HTML 像 XML 一样严格（失败）
HTML5  (2014) → 回归务实，加入多媒体、语义化
Living Standard (今) → 不再有版本号，持续演进

XHTML 的失败是个好案例——它要求语法极其严格（标签必须闭合、属性必须引号等），导致开发者大量迁移成本，最终被 HTML5 的务实路线取代。

1.3 标准组织：WHATWG 与 W3C

2004 年，苹果、Mozilla、Opera 对 W3C 放弃 HTML 转向 XHTML 的路线不满，成立了 WHATWG（Web Hypertext Application Technology Working Group）。

从此双线并轨：

WHATWG 维护 HTML Living Standard（活的标准，持续更新）
W3C 发布快照版本（如 HTML 5.0、5.1）

2019 年，双方达成协议：W3C 不再独立发布 HTML 版本，全面采纳 WHATWG 的 Living Standard。

1.4 XML 是什么

XML（可扩展标记语言）是一种数据描述语言，语法比 HTML 严格得多。简单说：

HTML 是用于展示网页内容的标记语言
XML 是用于描述和传输数据的标记语言

它们长得像，但目的完全不同。

本章为背景知识，想快速入门的读者可直接跳过，从第二章开始。

第二章：HTML 是什么

2.1 一句话定义

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准标记语言。它不是编程语言——它没有逻辑判断、循环、变量——它只是用标签来”标记”内容的结构和含义。

2.2 与 CSS、JavaScript 的分工

语言	角色	比喻
HTML	结构骨架	一栋房子的框架
CSS	样式皮肤	外墙颜色、装修风格
JavaScript	行为动作	开关灯、开门

三者协作：HTML 搭建内容结构 → CSS 美化和布局 → JavaScript 添加交互。

第三章：核心机制：从代码到网页

你在浏览器里看到的每一个页面，背后都经过这样的流程：

编写 .html 文件
    ↓
浏览器解析 → 构建 DOM 树
    ↓
加载 CSS → 构建 CSSOM
    ↓
DOM + CSSOM → 渲染树 → 绘制到屏幕
    ↓
JavaScript 可在任何阶段动态修改

3.1 编写 .html 文件

你写的只是一个纯文本文件，后缀为 .html。

3.2 浏览器解析成 DOM 树

浏览器读取 HTML 文本，将其解析为一棵树状结构——DOM（Document Object Model，文档对象模型）。每一个标签变成树上的一节点。

<html>
  <body>
    <h1>标题</h1>
    <p>内容</p>
  </body>
</html>

变成：

document
 └─ html
     └─ body
         ├─ h1 ("标题")
         └─ p  ("内容")

3.3 结合 CSS 渲染到屏幕

浏览器加载 CSS 后，计算每个 DOM 节点的样式，生成渲染树，最终绘制在屏幕上。

3.4 JavaScript 可动态修改

JavaScript 可以随时增、删、改 DOM 节点——这就是动态交互的基础。

3.5 遇到 CSS/JS 时的协作

浏览器不是单线程处理一切的。HTML 解析过程中遇到 <link>（CSS）或 <script>（JS）标签时：

CSS → 浏览器用 CSS 解析器并行构建 CSSOM，不影响 HTML 解析（默认）
JavaScript → 会阻塞 HTML 解析（默认），因为 JS 可能会用 document.write() 修改 HTML 内容

这就是为什么推荐把 <script> 放在页面底部，或使用 defer / async 属性。

第四章：基本语法

4.1 标签（Tag）与元素（Element）的区别

标签：尖括号里的内容，如 <p>、</p>
元素：开始标签 + 内容 + 结束标签的整体

<p>这是一段文字</p>
<!-- ↑      ↑      ↑ -->
<!-- 开始  内容  结束 -->

有些标签是自闭合的，没有结束标签：

<br>
<img src="photo.jpg">

4.2 属性（Attribute）

属性为标签提供额外信息，写在开始标签内：

<a href="https://example.com" target="_blank">访问链接</a>
<!--  ↑属性名=属性值 -->

常见属性：

class — CSS 类名
id — 唯一标识符
style — 内联样式
src — 资源路径（图片、脚本等）
href — 链接目标

4.3 注释

HTML 注释不会显示在页面上，仅在源码中可见：

<!-- 这是注释，不会显示 -->

第五章：常用标签速览

本章按功能分类列出最常用的 HTML 标签。不用背，用到时回来查。

5.1 文档基础

每个 HTML 页面都有的骨架：

<!DOCTYPE html>          <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN">      <!-- 根元素 -->
  <head>                 <!-- 元信息区 -->
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>                 <!-- 可见内容区 -->
    ...
  </body>
</html>

5.2 文本

<h1>一级标题</h1>  <h2>二级标题</h2>  <!-- 直到 h6 -->
<p>段落文本</p>
<br>                <!-- 换行 -->
<hr>                <!-- 水平分割线 -->
<strong>加粗</strong>
<em>斜体</em>

5.3 链接与图片

<a href="https://example.com" target="_blank">打开新标签页</a>
<a href="#section2">跳转到本页 section2 位置</a>

<img src="image.jpg" alt="图片描述" width="400">

alt 属性很重要——图片加载失败时显示替代文字，也用于无障碍访问。

5.4 列表

<!-- 无序列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

5.5 布局

<div>块级容器</div>
<span>行内容器</span>

<div> 默认占满整行，<span> 只占内容宽度。它们本身没有语义，用于 CSS 布局。

5.6 表格

<table>
  <tr>
    <th>姓名</th>  <!-- 表头 -->
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>  <!-- 数据 -->
    <td>25</td>
  </tr>
</table>

5.7 表单

表单用于收集用户输入：

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password">
  <input type="email" name="email">
  
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>
  
  <textarea name="notes" rows="4"></textarea>
  
  <button type="submit">提交</button>
</form>

input 的类型（type）决定了输入框的形态和行为——text、password、email、number、checkbox、radio、file 等等。

5.8 语义化标签

HTML5 引入了一组语义化标签，让你的 HTML 结构更有意义：

<header>网站头部或文章头部</header>
<nav>导航链接区域</nav>
<main>页面主体内容（每页只有一个）</main>
<article>独立的文章或内容块</article>
<section>内容的分区或章节</section>
<aside>侧边栏、补充内容</aside>
<footer>底部信息</footer>

语义化的意义：让搜索引擎更好地理解页面结构，让屏幕阅读器更好地导航，也让代码更容易维护。

第六章：权威学习资源

6.1 官方标准文档（终极字典）

https://html.spec.whatwg.org/ — WHATWG 维护的 HTML Living Standard。这里定义了一切：每个标签的正确行为、每个属性的合法值、浏览器必须如何解析。

怎么用：有问题时来查，不是用来通读的。

6.2 MDN Web Docs（入门教材）

https://developer.mozilla.org/zh-CN/docs/Web/HTML — Mozilla 维护的 Web 开发者文档。每个标签都有完整的用法说明、示例代码和浏览器兼容性表。

怎么用：学习时首选，示例清晰，适合入门。

第七章：结语

HTML 不再有新版本号。它是 Living Standard，持续演进——新功能随时被添加，旧功能被废弃。

这意味着什么？你不用学完所有 HTML。 现在被称为”HTML”的东西，已经庞大到没有任何一个人全记得住。你只需要学会核心的 20 个标签，就能做绝大多数事情。剩下的，查字典。

HTML 由四大浏览器厂商（Google、Apple、Mozilla、Microsoft）在 WHATWG 中共同推动。新功能提案 → 实验性实现 → 标准化 → 广泛支持——这条路一直在走。

第八章：拓展阅读（最新动态）

以下链接指向 HTML 标准的最新进展，适合进阶读者或技术选型时查阅。

8.1 AI 相关 meta 标签提案

社区正在讨论为 AI 而设的 meta 标签，用于控制页面内容是否可以被 AI 训练爬取。

关注：GitHub 上的 proposal-ai-meta 相关仓库

8.2 HTML-in-Canvas 实验性功能

Chrome 正在试验在 Canvas 中渲染 HTML 的能力，让 Web 游戏和复杂可视化应用能直接用 DOM。

关注：WICG 提案 + Chrome 实验开关 chrome://flags

8.3 WHATWG 近期活跃提案

WHATWG 的 GitHub 仓库跟踪所有新提案和活跃讨论。

关注：WHATWG GitHub 组织的每周动态

8.4 Living Standard 动态更新

HTML 标准每天都在更新。建议偶尔扫一眼变更日志。

关注：whatwg.org 更新日志

附录：参考资料链接汇总

资源	链接	用途
WHATWG HTML Living Standard	https://html.spec.whatwg.org/	终极标准
MDN Web Docs (HTML)	https://developer.mozilla.org/zh-CN/docs/Web/HTML	入门教材
WHATWG GitHub 仓库	https://github.com/whatwg/html	提案与讨论
W3C 官网	https://www.w3.org/	标准组织

HTML 学起来不难，难得是意识到你不需要全部学会。掌握 20% 的核心标签，你已经能覆盖 80% 的场景。剩下的，查 MDN 就够了。

• ... 次阅读

📑 目录