illegalCreed

中文

English

中文

English

Appearance

分组内容 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • <p>：段落——文本内容的基本单位；别把 <p> 当「空行 / 间距」用，间距是 CSS 的事
  • <blockquote>：块级长引用，可带 cite="来源URL"；行内短引用用 <q>，来源标题用 <cite>
  • 归属署名要放在 <blockquote> 外面（规范要求），不能塞进引用块内部
  • <figure> + <figcaption>：自包含的图 / 代码 / 图表 + 可选说明，作为整体被正文引用
  • <figcaption> 必须是 <figure> 的第一个或最后一个子元素；它给 <figure> 提供无障碍名
  • <figure> 的特点是「可移到别处 / 附录而不影响正文」——这是判断该不该用它的关键
  • <hr>：表示主题转换（段落级语义分隔），不是「画条横线」的样式工具
  • <pre>：保留空白与换行的预格式化文本，常配 <code> 展示代码
  • <div>：零语义，最后手段——只在「纯粹需要样式 / 布局容器」且无任何合适语义元素时用

前面几页讲的是「分区」（页面骨架），这一页讲「分组」——把正文内部的段落、引用、图表组织起来的元素。原则不变：按含义选，别按外观选。

<p>：段落 ​

<p> 是文本内容最基本的分组单位，表示一个段落。它看起来人人会用，但有一个高频误用：拿空的 <p> 来制造垂直间距。

html
<!-- ❌ 误用：用空段落撑间距 -->
<p>第一段。</p>
<p></p>
<p></p>
<p>第二段。</p>

<!-- ✅ 正确：间距交给 CSS -->
<p>第一段。</p>
<p>第二段。</p>
<!-- 间距用 margin / gap 控制 -->

段落之间要多少留白，是 margin / gap 的职责，不该用空标签硬撑。

<blockquote>：块级引用 ​

<blockquote> 表示一段较长的、独立成块的引用。要点有三个：

cite 属性指向来源 ​

<blockquote> 可以带 cite 属性，值是引用来源文档的 URL（注意：这个 URL 是给机器读的元信息，浏览器默认不显示它）：

html
<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>信鸽可以提供高延迟、低吞吐、低空的服务……</p>
</blockquote>

署名放在外面 ​

这是规范的一条硬要求：引用的归属 / 署名必须放在 <blockquote> 外面，不能塞进引用块内部。来源作品的标题用 <cite> 元素标注：

html
<blockquote>
  <p>如果调试是消除软件 bug 的过程，那么编程就是把 bug 放进去的过程。</p>
</blockquote>
<p>—— Edsger Dijkstra，<cite>某次演讲</cite></p>

块级 vs 行内：blockquote / q / cite ​

  • <blockquote>：块级长引用（独立成段）；
  • <q>：行内短引用（夹在句子里，浏览器会自动加引号）；
  • <cite>：标注被引用作品的标题（书名、文章名等），不是用来包人名。
html
<p>正如那句老话所说，<q>过早优化是万恶之源</q>，出自 <cite>计算机程序设计艺术</cite>。</p>

视觉缩进是表现，不是语义

<blockquote> 默认带左右缩进，但这纯粹是浏览器的默认样式，可以用 CSS margin 改掉。不要因为「想要缩进效果」去用 <blockquote>——那是误用语义；想缩进就直接写 CSS。

<figure> 与 <figcaption>：带说明的自包含内容 ​

<figure> 表示自包含的内容——图片、插画、图表、代码片段、引文、诗歌等——可以配一个 <figcaption> 作说明。图、说明和内容被当作一个整体对待。

判断该不该用 <figure> 的关键特征是：

它在正文中被引用，但可以移到文档别处或附录，而不影响正文的流畅。

也就是说，正文里写「如图 1 所示」，那张图挪到页尾也不影响阅读——这种「可挪动的引用对象」就该用 <figure>。

figcaption 的位置 ​

<figcaption> 必须是 <figure> 的第一个或最后一个子元素（图上方说明或图下方说明都行），且它会为 <figure> 提供无障碍名：

html
<!-- 图 + 下方说明 -->
<figure>
  <img src="/logo.png" alt="站点 Logo" />
  <figcaption>本站 Logo</figcaption>
</figure>

<!-- 代码 + 上方说明（figcaption 在前） -->
<figure>
  <figcaption>用 <code>navigator</code> 获取浏览器信息</figcaption>
  <pre><code>const name = navigator.appCodeName;</code></pre>
</figure>

<figure> 的隐式角色是 figure。注意 <figcaption> 提供的是整个 figure 的无障碍名，和图片自身的 alt（描述图像内容）是两回事，两者可以并存、各司其职。

<hr>：主题分隔（不是横线） ​

<hr> 在 HTML5 里有语义——它表示段落级别的主题转换（比如故事里场景的切换、一节内容转向另一节），而不是「画一条装饰性横线」。

html
<p>……第一个话题到此为止。</p>
<hr />
<p>接下来是一个完全不同的话题……</p>

如果你只是想要一条视觉分割线（纯装饰），更合适的是用 CSS border，而不是 <hr>。判断标准：有没有发生「话题 / 主题的切换」——有，才用 <hr>。

<pre>：预格式化文本 ​

<pre> 表示预格式化文本：它会原样保留源码里的空白和换行（普通 HTML 会折叠连续空白）。最常见的用途是展示代码、ASCII 图、保留缩进的文本，通常和 <code> 搭配：

html
<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

<pre> 负责「保留排版」，<code> 负责「这是代码」这层语义，二者组合是展示代码块的标准写法。

<div>：最后手段 ​

<div> 是完全没有语义的通用容器。它在本叶被反复点名为「最后手段」，原因值得再强调一次：它存在的唯一正当理由，是作为样式 / 布局的纯包裹——为了 Flex / Grid 布局、为了挂 class 做圆角阴影背景等。

选择顺序应该是：

  1. 先问「哪个语义元素能表达这块内容的含义？」——是导航就 <nav>、是文章就 <article>、是段落就 <p>、是图就 <figure>……
  2. 只有当答案是「它没有任何含义，我纯粹需要一个盒子来布局 / 套样式」时，才用 <div>。
html
<!-- ✅ div 的正当用途：纯布局容器 -->
<div class="grid">
  <article class="card">…</article>
  <article class="card">…</article>
</div>

把 <div> 当默认、能用语义元素也图省事用 <div>，就退化成了 为什么语义化 里说的「div 汤」。<div> 不是坏东西，用错位置才是。它和同样无语义的行内容器 <span> 是一对——<div> 块级、<span> 行内，都只为样式而生。

小结 ​

分组内容的元素同样遵循「含义优先」：段落用 <p>、长引用用 <blockquote>、可挪动的图表用 <figure>、主题切换用 <hr>、代码用 <pre><code>。当且仅当找不到任何合适的语义元素、只需要一个样式盒子时，才轮到 <div>。

下一步 ​

至此本叶六个深度面都讲完了。需要随手查阅元素清单、地标对照、大纲规则或权威链接，去参考页。