HTML 入门：从文档结构到语义、可访问性与浏览器解析

HTML 描述内容的结构和含义，不负责完整的视觉设计或业务行为。浏览器接收字节后，先按编码解码，再按 HTML 解析规则构建 DOM；CSS 负责呈现，JavaScript 在明确的时机增强交互。HTML 不是 XML：浏览器会按解析规则恢复许多语法错误，但页面还能显示不代表结构、无障碍树或表单行为正确。

一份现代文档的骨架

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>页面标题 | 站点名</title>
    <meta name="description" content="准确描述本页内容。">
    <link rel="stylesheet" href="/assets/site.css">
    <script type="module" src="/assets/main.js"></script>
  </head>
  <body>
    <header><a href="/">站点名</a></header>
    <main>
      <h1>本页唯一的主题标题</h1>
      <p>正文从有意义的结构开始。</p>
    </main>
  </body>
</html>

doctype 让浏览器使用标准模式，不是 HTML 标签。html 是根元素，lang 应反映主要语言；head 保存文档元数据和资源引用，body 保存页面内容。charset 声明应尽量靠前，并与服务器实际发送的编码一致。viewport 让移动设备按设备宽度布局，它不会自动让页面响应式。

标签、元素、属性和解析

标签是尖括号标记；元素通常由开始标签、内容和结束标签组成。img、meta、link、input、br 等是空元素，不能写成带结束标签的容器。属性提供元素配置，字符串属性值应加引号；布尔属性写出即为真，例如 disabled，disabled="false" 仍表示禁用。不要依赖标签名大小写表达状态。

嵌套必须符合内容模型：段落里不能随意放复杂块结构，交互控件不能互相嵌套，列表项应放在列表容器内。浏览器会修复某些错位标签，但修复后的 DOM 可能与源代码意图不同。调试时同时看 Elements 面板里的 DOM、Network 中的实际响应和控制台警告。

用语义元素表达内容角色

用 header、nav、main、article、section、aside、footer 说明页面区域；用 button 表示触发动作的控件，用 a 表示导航到资源或位置。标题按层级组织内容，列表用 ul/ol 与 li，数据表用表头和 caption。不要只为默认样式选择标签，也不要用一串 div 代替可获得原生键盘行为和辅助技术语义的控件。

语义元素不会自动替代设计：页面应有清晰的主内容，标题层级应可预测，链接名称应脱离上下文仍可理解。图片有信息时提供准确 alt；纯装饰图片使用空 alt。表单控件要有可见标签，错误信息关联字段，键盘焦点必须清晰可见。颜色不能成为唯一的状态提示。

链接、图片与表单

a 的 href 应是可理解、可验证的目标；不要用 href="#" 冒充按钮。新窗口链接应让用户知道会打开新上下文；避免把不可信目标直接拼入 URL。img 的尺寸属性或 CSS aspect-ratio 可预留空间，loading="lazy" 适合首屏之外的图片，不要延迟加载首屏主图。

表单用 label 与 input 的 id/for 关联。type、name、autocomplete、required、min/max 和 pattern 能表达基础约束，但客户端校验可被绕过，服务端必须重新校验并执行授权。密码、邮箱和搜索框应选择合适的 input type 与 autocomplete，提交按钮用明确的 button type。原生约束验证适合基础反馈，不代替业务规则和安全检查。

<form action="/subscribe" method="post">
  <label for="email">邮箱</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <button type="submit">订阅</button>
</form>

HTML 与安全边界

把用户输入插入普通文本时使用 textContent 的文本语义，不要把字符串拼进 innerHTML。富文本必须经过维护中的 sanitizer 和严格 allowlist。HTML 属性、URL、CSS 和 JavaScript 字符串需要分别处理，不能靠一个通用转义函数解决。资源策略还应由 CSP、可信脚本来源、表单目标和服务器授权共同约束。

实战检查

1. 页面声明了正确的 doctype、lang、字符集和 viewport 吗？
2. 浏览器实际 DOM 是否与源文件结构一致，有没有错误嵌套或重复 id？
3. 标题、链接、按钮、表单和图片是否有准确的语义与可访问名称？
4. 窄屏、键盘、屏幕阅读器和禁用样式时，内容仍然可理解吗？
5. 客户端校验之外，服务端是否重新校验输入和资源权限？

参考：WHATWG HTML Living Standard、MDN HTML 基本语法、MDN HTML 表单验证、MDN 添加 JavaScript、W3C WCAG 2.2。