HTML 元素参考

HTML 元素是具有语义的构建块，而不仅仅是标签。每个元素都有内容模型规则、允许使用的属性以及可能影响布局或可访问性的浏览器行为。

<link> #

<link> 通过 URL 引用外部资源。最重要的属性包括：

• rel，用于指定关系；
• href，用于指向资源。

样式表和 preconnect 提示是其常见用途：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="/styles.css">

rel 的取值用途非常广泛，因此在行为不明确时，应结合 IANA link-relations 注册表进行确认。

<meta> #

<meta> 提供字符编码、视口设置或页面描述等元数据。它通常位于文档 head 中，并经常由浏览器、爬虫或社交分享系统使用。

<noscript> #

<noscript> 为 JavaScript 被禁用或不受支持的环境提供后备内容。

它适用于：

• 渐进式增强；
• 主题引导提示；
• 依赖脚本的功能的警告消息。

<p> #

<p> 元素不能嵌套。如果在一个段落内部编写另一个段落，浏览器会隐式关闭外层段落。

这一行为很重要，因为即使手写的 HTML 看起来没有问题，模板引擎仍可能意外输出无效的嵌套结构。

<p>
  First paragraph.
  <p>Second paragraph.</p>
</p>

浏览器会将这段标记重写为彼此独立的同级段落。

布局与语义 #

元素不能相互替代：

• 结构元素定义文档层次结构；
• 短语元素定义行内内容；
• 图像和 canvas 等替换元素具有由宿主定义的渲染行为。

使用模板构建页面时，元素的选择会同时影响样式和可访问性。语义正确的元素通常可以减少后续所需的 CSS 数量。

实用规则 #

将元素视为契约：

1. 检查允许的内容模型；
2. 检查必需或具有实际意义的属性；
3. 检查浏览器如何修复无效标记。

遵循这一习惯，可以在许多布局错误到达页面之前将其阻止。