跳转至

HTML 元素

元素是 HTML 文档的结构单位。选择元素时应先考虑内容含义和允许的嵌套关系， 而不是只考虑浏览器默认显示成什么样。

学习目标

  • 区分元素、开始标签、结束标签和内容。
  • 正确嵌套普通元素并识别空元素。
  • 理解 DOM、内容模型和默认样式不是同一概念。

核心概念

下面的整体是一个 p 元素，其中包含一个 strong 子元素：

<p>部署前请<strong>检查备份</strong>。</p>

嵌套时应后打开、先关闭：

<article>
  <h2>维护通知</h2>
  <p>服务将在周日升级。</p>
</article>

空元素不能包含子内容，也没有结束标签。常见空元素包括 img、meta、link、input、 br 和 hr：

<img src="status.png" alt="所有服务均正常" width="320" height="180">

在 HTML 文档中不需要写 XML 风格的 />。团队可以统一格式，但斜杠不会让空元素获得结束标签。

内容模型

并非任意元素都能放入另一个元素。例如 ul 的直接子元素应是 li，p 不能包含 div。 浏览器遇到无效结构时可能隐式关闭元素，使最终 DOM 与源码缩进不同。

<ul>
  <li>检查标题结构</li>
  <li>检查替代文本</li>
</ul>

CSS 可以把 span 设置成块状显示，也可以把 div 设置成行内显示，但这不会改变它们的 HTML 语义， 也不会改变规范允许的子内容。

语义元素与通用容器

当内容确实是导航、文章或按钮时，优先使用 nav、article 或 button。只有在没有更合适语义、 主要为了分组或样式时，才使用 div 和 span。

常见错误

  • 交叉闭合标签，依赖浏览器猜测作者意图。
  • 为每一层布局都添加无意义的 div。
  • 给空元素编写结束标签或尝试在其中放文字。
  • 认为改变 display 属性也改变了可访问角色。
  • 在 p 内嵌套章节、列表或另一个段落。

相关链接