HTML 引用标签 blockquote 的结构-html教程-PHP中文网

blockquote必须嵌套等块级元素，裸文本会导致语义断裂、可访问性差；cite属性仅接受合法URL且不渲染，人类可读出处须用内手动添加；其唯一用途是标识可溯源的外部独立内容，不可作样式工具。

html 引用标签 blockquote 的结构

blockquote 必须嵌套 `<p></p>` 等块级元素

直接写 <blockquote></blockquote>裸文本，浏览器能显示，但语义断裂、屏幕阅读器大概率连读成一段，CSS 也无法单独控制第二段的 margin-top 或 text-indent。XHTML strict 模式或部分 CMS 会直接报错“内容模型不匹配”。

正确结构是每段自然段都用 <p></p> 显式包裹，全部放在 <blockquote></blockquote> 内部：

<blockquote cite="https://example.com/article">
  <p>这是第一段引用内容。</p>
  <p>这是第二段，逻辑上独立。</p>
</blockquote>

多段引用不能靠换行符或 <br> 模拟分段——那只是视觉欺骗，无语义
允许嵌套其他流内容：如 <ol></ol>、<pre class="brush:php;toolbar:false;"></pre>、<h4></h4>，只要它们属于合法子元素
<div> 虽技术上允许，但缺乏段落语义，对可访问性和 SEO 不友好，不推荐 <h3>cite 属性只接受 URL，且不渲染</h3> <p><code>cite 是纯机器可读属性，值必须是合法 URL（绝对或相对），浏览器完全不显示它。填书名、作者名、锚点片段（如 #section2）或空字符串，都会导致语义失效或验证失败。

Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载
- ✅ 正确：cite="https://zh.wikisource.org/wiki/静夜思" 或 cite="/poems/jingyesi.html"
- ❌ 错误：cite="《JavaScript 高级程序设计》" —— HTML 验证失败，爬虫无法提取
- ❌ 错误：cite="李白" —— 无机器可读价值，辅助技术忽略
- ⚠️ 风险：cite="post.html" 在静态站点中易 404；若目标页跳转首页，cite 实际意义归零
人类可读出处必须用 <footer><cite></cite></footer> 手动添加

cite 属性本身不可见。想让用户看到“出自哪里”，必须在 <blockquote></blockquote> 内部末尾手动加 <footer></footer>，里面用 <cite></cite> 包裹作品名、文章名或网站名——人名、出版社、时间等用普通文本。
```
<blockquote cite="https://www.w3.org/TR/html52/grouping-content.html#the-blockquote-element">
  <p>The <code><blockquote></blockquote></code> element represents content that is quoted from another source.</p>
  <footer>— <cite>HTML Standard, W3C</cite></footer>
</blockquote>
```
- <footer></footer> 必须在 <blockquote></blockquote> 内部，放外面就失去语义关联
- <cite></cite> 只用于作品标题、URL 文本，不用于人名（如“鲁迅”不能包在 <cite></cite> 里）
- 别用 <small></small> 或伪元素替代 <footer><cite></cite></footer>——它们没有语义，屏幕阅读器无法识别
别把 <blockquote></blockquote> 当缩进工具用

<blockquote></blockquote> 的唯一合法用途，是声明一段**来自外部、可溯源的独立成文内容**。它不是为了“看起来像名言”而存在的样式捷径。
- ✅ 该用：<blockquote cite="https://doi.org/10.1000/xyz123">…论文结论…</blockquote>
- ❌ 不该用：自己写的注意事项、AI 生成的“人生格言”、无来源的警句
- 短引用（一两句话嵌入正文）请用 <q></q>：浏览器自动加引号，支持嵌套，语义更轻量
- 如果引用中某句特别关键，<q></q> 可以合法出现在 <blockquote></blockquote> 内部，二者分工明确
真正容易被忽略的是：<blockquote></blockquote> 的语义重心不在“长得像引用”，而在“来源可追溯”。没 URL、没 <footer></footer>、没真实出处，就等于没用对。