简介

HTML（HyperText Markup Language，超文本标记语言）用于描述网页的结构与语义：标题层级、段落、链接、表单、图片替代文本等。浏览器根据 HTML 构建 DOM，再结合 CSS 呈现样式、JavaScript 实现交互。标签用法见标签，文档元数据见 Head。

一、HTML 是什么

标记语言：用标签包裹内容，表达「这是什么」，而不是编程逻辑（无变量、循环、条件分支）。
超文本：通过 <a href="..."> 等链接关联其他资源，是 Web 区别于普通文档的核心特征。
与 CSS / JS 的分工：HTML 管结构与可访问性语义；样式由 CSS 负责；行为由 JavaScript 负责。仅写 HTML 不会出现「点击、拖拽」等交互，除非使用自带控件的元素（如 <button>、<details>、<dialog>）。

二、文档类型与基本结构

HTML5 文档推荐骨架：

html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>页面标题</title>
    </head>
    <body>
        <!-- 页面可见内容 -->
    </body>
</html>

部分	作用
`<!DOCTYPE html>`	启用标准模式（Standards Mode）；须为第一行，否则浏览器可能进入怪异模式（Quirks Mode），导致盒模型等行为异常
`<html lang="...">`	根元素；`lang` 利于翻译、读屏与字体选择，缺失会被无障碍工具判定为错误
`<head>`	元数据：编码、标题、样式表、脚本引用等（见 Head）
`<body>`	用户可见的主要内容

三、元素、标签与属性

元素：由开始标签、结束标签（或空元素）与内容组成，如 <p>段落</p>。
标签：标记元素边界的语法，如 <p>、</p>。
属性：写在开始标签上，name="value" 形式，为元素提供附加信息（如 href、alt、type）。

html

<a href="/knowledge/booklet/web/html/tag" title="标签参考">标签文档</a>
<img src="logo.png" alt="站点 Logo" width="120" height="40" />

空元素（void elements）

无结束标签、无内容，例如 <br>、<img>、<input>、<meta>、<link>。HTML 中写作 <br> 即可；XML 兼容写法为 <br />。

四、「块级 / 行内」与语义

日常说的「块级标签」「行内标签」多指默认显示（由 CSS 用户代理样式决定），并非 HTML 里的官方分类。规范使用内容类别（如 flow content、phrasing content、interactive content）描述元素可出现在哪里。

常见说法	典型元素	说明
默认占满一行	`<div>`、`<p>`、`<h1>`–`<h6>`、`<ul>`	可用 CSS 改为 `display: inline` 等
默认同行排列	`<span>`、`<a>`、`<strong>`	`<img>` 为替换元素，可设宽高
语义结构	`<main>`、`<nav>`、`<article>`、`<section>`	应用 HTML5 语义标签，利于 SEO 与无障碍

布局与对齐请用 CSS display、Flex、Grid，不要仅靠 <table> 或大量 <div> 拼版。

五、为什么要写语义化 HTML

「语义化」指选用含义匹配的标签，而不是「视觉上像什么就用什么」。例如按钮应该用 <button>，而不是加了点击事件的 <div>。语义化带来的收益是多方面的：

维度	语义化的收益
可访问性	屏幕阅读器、语音助手依赖标签本身的隐含语义（如 `<nav>` 会被读作「导航」），无需额外 ARIA 标注即可正确播报
SEO	搜索引擎依据 `<h1>`–`<h6>` 标题层级、`<article>`/`<section>` 结构理解页面主题与重要程度
可维护性	`<header>`/`<main>`/`<footer>` 等标签本身即是文档，团队成员和未来的自己都更容易理解结构
默认行为	语义元素常自带浏览器默认行为，如 `<button>` 天然支持键盘 `Enter`/`Space` 触发、`<a>` 天然可被 Tab 聚焦
样式钩子更稳定	结构清晰后，CSS 选择器可以更多依赖标签与语义类名，减少无意义的 `<div>` 嵌套（俗称「div 汤」，div soup）

反例对比：

html

<!-- 不推荐：纯样式驱动，无语义，键盘用户无法聚焦，屏幕阅读器无法识别为按钮 -->
<div class="btn" onclick="submitForm()">提交</div>

<!-- 推荐：原生语义、默认可聚焦、默认支持键盘操作 -->
<button type="submit">提交</button>

六、可访问性（Accessibility / a11y）要点

可访问性不是额外附加的「特效」，而是尽量让所有用户（包括使用屏幕阅读器、键盘导航、放大镜、色弱用户）都能正常使用页面。HTML 是可访问性的第一道防线。

1. 语义地标（Landmark）帮助跳过导航

<header>、<nav>、<main>、<aside>、<footer> 等元素会被浏览器映射为对应的 ARIA landmark role（如 <nav> → navigation），屏幕阅读器用户可以通过快捷键在地标间跳转，不必逐行听完整页内容。

2. 表单必须有可编程关联的标签

html

<label for="email">邮箱</label>
<input id="email" name="email" type="email" required />

<label for> 与 <input id> 关联后，点击文字也能聚焦控件，屏幕阅读器会读出「邮箱，可编辑文本」。
仅用 placeholder 代替 <label>是常见误区：占位文字在开始输入后消失，且部分屏幕阅读器不会持续播报。

3. 图片的 `alt` 是强制思考项，而非可选项

有信息的图片：alt 描述图片传达的内容，而非「图片」「photo」等空话。
纯装饰性图片：alt=""（空字符串），让屏幕阅读器直接跳过，而不是读出文件名。

4. 键盘可达性

交互元素优先用原生可聚焦标签（<a>、<button>、表单控件），它们自带 Tab 顺序和键盘事件。
若必须用 <div> 模拟交互（不推荐），需要手动补 tabindex="0"、键盘事件、role 与 aria-*，工作量远大于直接使用语义标签。

5. ARIA 的定位：补充，而非替代

ARIA（Accessible Rich Internet Applications）属性（如 role、aria-label、aria-expanded）用于补充原生 HTML 语义不足以表达的场景（如自定义下拉菜单、标签页组件）。业界准则「No ARIA is better than Bad ARIA」：优先用原生语义标签，只有确实没有对应原生元素时才手写 ARIA。

html

<!-- 自定义可展开面板，需要手动补充状态 -->
<button aria-expanded="false" aria-controls="panel1">更多信息</button>
<div id="panel1" hidden>面板内容…</div>

6. 颜色与内容不能画等号

不要用「红色文字表示错误」作为唯一提示方式（色弱用户无法区分），应同时提供文字或图标：

html

<p class="error"><span aria-hidden="true">⚠</span> 密码至少 8 位</p>

七、HTML 与 CSS、JavaScript 的关系

三者常被称为 Web 前端的「三大支柱」，各司其职、松耦合协作：

text

HTML（结构与语义） ──构建──▶ DOM（文档对象模型）
                                   │
CSS（样式）        ──应用──▶  渲染树 / 视觉呈现
                                   │
JavaScript（行为） ──操作──▶  动态修改 DOM / CSSOM，响应事件

HTML → DOM：浏览器解析 HTML 文本生成 DOM 树，这是 CSS 和 JS 操作的对象。
CSS 如何介入：<link rel="stylesheet">、<style> 或行内 style 属性提供样式规则，浏览器结合 DOM 生成渲染树并布局绘制。详见 CSS 盒模型。
JS 如何介入：<script> 通过 DOM API（如 document.querySelector）读写元素、监听事件，动态增删节点或切换 class，从而驱动交互。详见 DOM / BOM。
渐进增强的分层思路：先保证纯 HTML 语义清晰、内容可读（即使 CSS/JS 加载失败或被禁用），再叠加样式与交互——而不是反过来用 JS「拼」出本该由 HTML 表达的结构。
脚本位置影响解析：<script> 默认会阻塞 HTML 解析，通常建议放在 </body> 前，或使用 defer/async（详见 Head）。

八、现代 HTML 要点

HTML Living Standard 持续演进，除去经典标签，以下是近年常用、容易被忽略的能力：

特性	说明
`<dialog>`	原生模态/非模态对话框，配合 `.showModal()` 自动处理焦点陷阱与 `Esc` 关闭
`<details>` / `<summary>`	原生折叠面板，无需 JS 即可实现手风琴效果
`<template>`	存放不会被立即渲染的标记片段，配合 JS `content.cloneNode()` 高效批量插入 DOM
`<picture>` + `<source>`	依据视口、格式支持情况提供不同图片资源，见标签 · 响应式图片
`loading="lazy"`	`<img>`/`<iframe>` 原生懒加载，无需额外 JS 库
`decoding="async"`	提示浏览器异步解码图片，减少主线程阻塞
`inert`	将一整块区域及其子元素标记为「不可交互、不可聚焦」，常用于被遮罩的背景内容
`popover`	新的原生弹出层属性（结合 `popovertarget`），浏览器自动管理层级、外部点击关闭等行为
`contenteditable`	使任意元素可编辑，是富文本编辑器的基础能力之一
`enterkeyhint` / `inputmode`	优化移动端虚拟键盘的回车键文案与键盘类型
Web Components（自定义元素）	通过 `customElements.define()` 注册的 `<my-component>` 标签，可在 HTML 中直接使用，是框架无关的组件化方案

不存在名为「HTML6」的官方版本号；新特性以独立模块形式持续加入 living standard，浏览器实现速度不一，使用前建议查 MDN 兼容性表。

九、注释

html

<!-- 注释不会显示在页面上，仍会出现在「查看源代码」中，勿写敏感信息 -->

十、标准与版本

名称	说明
HTML Living Standard	由 WHATWG 维护的现行规范，浏览器实现以此为主
HTML5	指约 2014 年前后定稿的一批新语义与 API（`<video>`、`<canvas>` 等），日常说「HTML5 文档」即 `<!DOCTYPE html>`
XHTML	基于 XML 语法的 HTML，现多用于 SVG/MathML 等嵌入场景，一般 Web 页面不必写 XHTML
HTML 4.01	历史版本；新项目应使用 HTML5 文档类型

十一、兼容性与有效性

有效性：使用符合规范的标签嵌套与属性（可用 validator.w3.org 校验）。
浏览器差异：少数属性/元素支持度不同，查 MDN 兼容性表或规范。
渐进增强：先保证语义 HTML 与核心内容可读，再叠加 CSS/JS；旧环境用 @supports、特性检测等（见 CSS 现代特性），而非依赖已废弃的「CSS Hack」解决 HTML 问题。

十二、学习路径建议

掌握文档骨架、head 元数据、常见标签。
理解表单、链接、alt、标题层级，并结合本文「可访问性」一节实践无障碍教程。
配合 CSS 布局与响应式 viewport。
再学习 JavaScript 的 DOM / BOM 操作，理解三者如何协作驱动一个真实页面。

十三、小结

HTML 负责结构与语义，CSS 负责样式，JavaScript 负责行为，三者应保持关注点分离。
语义化标签不仅是「规范要求」，直接影响可访问性、SEO 与代码可维护性。
可访问性的核心是：能用原生语义标签就不要用 <div> 模拟；表单控件必须有关联标签；图片必须思考 alt。
现代 HTML 已内置大量曾经需要 JS 库实现的能力（对话框、折叠面板、懒加载、弹出层等），优先使用原生特性可以减少代码量与运行时开销。

参考文献

以下链接在编写时均可正常访问：

资料	说明
MDN：HTML	中文参考与教程入口
MDN：HTML 内容类别	元素分类（非块级/行内二分）
MDN：无障碍开发指南	可访问性总览
WHATWG：HTML Living Standard	现行规范（英文）
W3C：HTML 5.2	W3C 快照（英文）
W3C Markup Validation Service	文档校验
W3C WAI：页面结构教程	语义与无障碍（英文）
W3C WAI-ARIA 权威指南	ARIA 设计模式（英文）