cite属性仅存储URL元数据，不渲染任何文字；正确用法是只填可访问的绝对URL，多段引用需用<p>包裹，出处显示应使用<blockquote>内嵌<footer><cite>组合。
cite属性只存URL，不显示任何文字
写了 cite 属性却看不到“作者”“书名”或“来源链接”，不是你代码错了，而是它本来就不渲染。浏览器完全忽略该属性的视觉输出，cite 值只作为元数据存在 DOM 中，供爬虫、SEO 工具或屏幕阅读器（部分）读取。
常见错误包括：
-
cite="张三《前端手记》"—— 非法值，违反 HTML5 规范，被浏览器静默丢弃 -
cite="来源：https://example.com"—— 混入描述性文本，URL 解析失败 -
cite="post.md"—— 相对路径在静态站点或跨域场景下极易 404，语义链断裂
正确做法是只填一个可访问、真实存在的绝对 URL，例如：cite="https://github.com/vuejs/core/blob/main/README.md#reactivity"。
多段引用必须用<p>包裹，否则语义失效
<blockquote> 是块级内容模型，HTML5 明确要求其子内容必须是“流内容”，且多段文字不能直接堆叠在标签内——否则会触发验证警告，CSS 也难以精准控制段间距和缩进。
立即学习“前端免费学习笔记（深入）”；
正确结构必须是：
<blockquote cite="https://example.com/article"> <p>第一段引文内容。</p> <p>第二段逻辑独立的内容。</p> </blockquote>
错误写法（无 <p>）：
<blockquote cite="..."> 这是第一段。 这是第二段。 </blockquote>
这种写法会让浏览器自动补全 DOM（可能插入 <div> 或 <span>），但语义模糊、无障碍支持弱、样式不可控。
真正显示出处，得靠 <footer> + <cite>
想让用户在页面上看到“——李四，《现代 HTML 实践》”，cite 属性完全帮不上忙。唯一可靠、语义正确、无障碍友好的方式是手动添加 <footer> 和 <cite>：
-
<footer>必须放在<blockquote>内部末尾，不能在外面 -
<cite>只能包裹作品名（如《HTML5 权威指南》），不能放人名、网址或时间 - 人名、机构名等应直接写在
<footer>里，不套<cite>
示例：
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"> <p>The <code><blockquote></code> element represents content that is quoted from another source.</p> <footer>— WHATWG, <cite>HTML Living Standard</cite></footer> </blockquote>
没合法 URL 就别硬塞 cite，改用其他语义方案
如果引用内容来自内部文档、会议纪要、未公开的 PDF 或口头陈述，找不到可公开访问的 URL，cite 属性就失去了存在意义。强行填空字符串、虚构链接或相对路径，只会让语义链污染，还可能被 Lighthouse 或 axe 工具标为可访问性问题。
此时更合适的做法是：
- 改用
<p>+<cite>组合说明来源，例如：<p>据 2026 年 Q1 架构评审会议记录：</p><blockquote>…</blockquote> - 若需强调权威性，可在
<blockquote>外加aria-label，例如：aria-label="引自 RFC 9110 第 7.4 节" - 彻底放弃
<blockquote>，用<aside>或带 class 的<div>配合 CSS 实现视觉效果，语义上更诚实
最常被忽略的一点：语义完整性比视觉缩进重要得多。一个没 cite 但结构清晰、出处可见的引用，远胜一个带伪造 URL 却无法溯源的“伪标准”写法。
