HTML：语义结构、表单、媒体与可访问性

一个看起来像按钮的 div，不一定能像真正的按钮那样用键盘操作。HTML 元素不仅决定外观起点，也提供语义和默认交互。先选合适的元素，再加样式和脚本，往往能少写很多补救代码。

HTML 定义内容和交互控件的语义。浏览器据此构建 DOM 和可访问树，并提供表单、链接、媒体、焦点与键盘默认行为。语义正确的页面通常更容易测试、维护和被辅助技术使用。

1. 学习目标

  • 掌握文档骨架和语义分区
  • 掌握表单控件、校验与提交
  • 理解图片、音视频与响应式资源
  • 掌握键盘、焦点、名称和 ARIA 基础

2. 核心概念

1. 文档结构与语义元素

<!doctype html> 启用标准模式；html/head/body 构成骨架。header/nav/main/article/section/aside/footer 表达区域角色，标题层级描述内容大纲。button、a、列表和表格应按真实语义选择。

这里容易混淆的是： section 通常需要可识别标题；用于布局的无语义容器可使用 div，但不要用 div 模拟原生按钮。

2. 表单与浏览器校验

form 通过 method/action/encoding 定义提交。每个控件用 label for 获得可访问名称，name 决定 FormData 键；required、min/max、minlength、pattern 提供约束。服务端必须再次校验。

这里容易混淆的是： placeholder 不是 label；disabled 控件不提交，readonly 控件通常仍提交。

3. 媒体与性能

img 需要反映用途的 alt；装饰图可用空 alt。picture/srcset/sizes 让浏览器按视口和像素密度选择资源，显式 width/height 减少布局偏移。音视频应提供字幕和替代信息。

这里容易混淆的是： 不要把重要文字只放进图片；懒加载首屏主图可能延迟最大内容绘制。

4. 可访问性

可访问名称来自 label、文本或 ARIA；焦点顺序通常遵循 DOM。先使用原生语义，ARIA 仅补充缺失语义。动态错误用文本关联，模态框需管理初始焦点、焦点约束和关闭后的焦点恢复。

这里容易混淆的是： ARIA 不会自动加入键盘行为、状态管理和视觉样式。

3. 运行链路

flowchart TD A["HTML源文本"] --> B["DOM树"] B --> C["CSS渲染树"] B --> D["可访问树"] E["键盘/鼠标/触摸"] --> B B --> F["表单校验与提交"] F --> G["HTTP请求"]

4. 最小示例

html
<main>
  <h1>创建账号</h1>
  <form id="signup">
    <div>
      <label for="email">邮箱</label>
      <input id="email" name="email" type="email"
             autocomplete="email" required
             aria-describedby="email-help email-error">
      <p id="email-help">用于登录和接收通知。</p>
      <p id="email-error" role="alert" hidden></p>
    </div>
    <button type="submit">创建</button>
  </form>
</main>

JavaScript
const form = document.querySelector('#signup')
form.addEventListener('submit', event => {
  event.preventDefault()
  if (!form.reportValidity()) return
  const payload = Object.fromEntries(new FormData(form))
  console.log(payload)
})

5. 练习与验证

  1. 只用键盘完成表单
  2. 用浏览器可访问树检查控件名称
  3. 为图片选择正确 alt 与尺寸

6. 常见误区

  • 点击文字不能聚焦输入框
  • 标题仅按字号选择导致层级跳跃
  • 客户端校验被当作安全边界

7. 掌握检查

只用键盘能否填写并提交示例表单？每个输入控件的标签和错误信息是否能被理解？

先不看答案，用本章示例解释一遍；再改变一个输入或配置，检查实际结果是否符合你的判断。

参考资料