cite属性只接受合法URL且不渲染，故看不到来源信息；必须手动在<footer>或<figcaption>中添加可见出处，如— <cite>《前端手记》</cite>, 张三。
blockquote 的 cite 属性只接受合法 URL，不显示任何文字，也不是用来写作者名或书名的——填错就等于没填。
为什么写了 cite 却看不到来源信息？
cite 是纯元数据属性，浏览器不渲染、不插入 DOM、不改变页面视觉。你看到的“张三《前端手记》”必须手动写进 <footer> 或 <figcaption> 里，而不是塞进 cite 属性值中。
- ✅ 正确：
<blockquote cite="https://example.com/book"><p>…</p><footer>— <cite>《前端手记》</cite>, 张三</footer></blockquote> - ❌ 错误：
<blockquote cite="张三《前端手记》">（非 URL，被浏览器静默丢弃） - ❌ 错误：
<blockquote cite="来源：https://example.com/book">（混入描述文本，URL 解析失败）
cite 属性只能用在哪些标签上？
仅限四个元素：<blockquote>、<q>、<ins>、<del>。加在 <p>、<div>、<span> 上完全无效，HTML 验证器会报错，屏幕阅读器也读不到。
-
<blockquote cite="https://w3c.github.io/html/semantics.html#the-blockquote-element">—— 大段引用，指向规范原文 -
<q cite="https://twitter.com/vuejs/status/123456789">Composition API is stable.</q>—— 短引用，自动加引号（部分 UA） -
<ins cite="/edit-log/2026-05-18.json" datetime="2026-05-18">修复了内存泄漏</ins>—— 标注编辑依据
多段引用怎么写才合法又可控？
直接把几段文字堆在 <blockquote></blockquote> 里是错的：HTML5 要求其子内容为“流内容”，纯文本或连续换行会被浏览器自动补全为不可控节点（如 <div>），导致语义模糊、样式难调、无障碍支持弱。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须用
<p>显式包裹每一段：<blockquote cite="..."><p>第一段。</p><p>第二段。</p></blockquote> - ✅ 允许嵌套
<pre>、<ul>等块级元素（只要符合流内容模型） - ❌ 禁止：
<blockquote cite="...">第一段。\n第二段。</blockquote>（无标签包裹，结构松散）
URL 填什么才算真正有用？
填一个能打开、返回 200、且确实包含该引用原文的 URL。指向首页、404 页面、或跳转到无关内容的链接，对 SEO、爬虫、辅助技术都毫无价值。
- 推荐用绝对 URL（如
https://example.com/report#sec-3.2），避免相对路径在跨域或静态站点中失效 - URL 中含特殊字符（如
?、=）必须编码：cite="article%3Fid%3D123"，否则解析失败 - 没有在线原始出处时，宁可省略
cite属性，改用<footer><cite>《XXX》</cite></footer>手动说明
最常被忽略的一点：很多人以为加上 <blockquote> 就完成了引用标注，其实真正起作用的是 cite 属性 + 可验证的 URL + 手动添加的可见出处结构。三者缺一，语义链就断了。
