blockquote 的 cite 属性仅存储合法 url 供机器读取，不渲染、不显示、不可交互；正确用法需配合内部 手动标注出处，且仅限 blockquote、q、ins、del 元素。

blockquote 的 cite 属性只存 URL，不显示作者、书名或可点击链接

cite 属性的作用非常明确：它只是把一个合法的 URI 存进 DOM，供机器（比如爬虫、部分屏幕阅读器）读取。浏览器不会渲染它，用户看不到、点不了、悬停也没提示。写 cite="https://example.com/article" 和写 cite="doi:10.1234/abcd" 在视觉上完全没区别——都是零输出。

常见误解是把它当“自动署名”或“快捷外链”，结果发现页面干干净净什么都没变。这不是 bug，是规范设计：W3C 明确说它“仅供机器读取”。

• cite 值必须是可解析的绝对或相对 URL，不能是中文描述、ISBN、作者名，也不能混入“来源：”这类前缀
• 填错会被浏览器静默丢弃，document.querySelector('blockquote').cite 会返回 null 或空字符串
• 即使值正确，也别指望它提升 SEO 排名——正文里一条自然外链 + 锚文本的效果远超 cite

cite 属性值必须是真实可访问的 URL，否则语义链断裂

填了 cite="https://example.com" 却指向首页，或 cite="paper.pdf" 返回 404，等于没填。机器无法验证引用真实性，结构化数据就失去意义。

实际开发中容易踩的坑：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 用相对路径如 cite="spec.html"：静态站点部署到子目录或 CDN 后极易 404
• DOI 或 ISBN 没转成可访问链接：应写成 cite="https://doi.org/10.1145/123456789"，而不是 cite="10.1145/123456789"
• URL 含空格或中文字符没编码：cite="https://example.com/文档.pdf" 应为 cite="https://example.com/%E6%96%87%E6%A1%A3.pdf"

真正让用户看见出处，必须手动加

+ 组合

想让读者看到“——《HTML Living Standard》，WHATWG，2026”，cite 属性完全不管这事。唯一可靠、语义正确、无障碍友好的方式是：

在 <blockquote></blockquote> 内部末尾放一个 <footer></footer>，里面用 <cite></cite> 包裹作品标题，其余文字（作者、机构、年份）直接写普通文本。

• <footer></footer> 必须是 <blockquote></blockquote> 的最后一个子元素，放外面就断开语义关联
• <cite></cite> 只能包书名、文章标题、标准名，不能包人名、URL、时间，否则屏幕阅读器会误读为“作品名叫‘李四’”
• 中文场景下建议重置 <cite></cite> 样式：font-style: normal; color: #666;，避免斜体失效

cite 属性不能用于 table、p、div 等非允许元素

试图给 <table cite="https://data.gov"> 加 <code>cite，HTML5 验证器会报错，浏览器忽略该属性。规范只允许 cite 出现在 <blockquote></blockquote>、<q></q>、<ins></ins>、<del></del> 上。

表格数据来源应走 <figure><figcaption></figcaption></figure> 路径，而不是硬套 cite：

<figure><table>...</table>
<figcaption>数据来源：国家统计局，2023 年度报告</figcaption></figure>

用 data-source 自定义属性虽不报错，但无语义、无 SEO、无辅助技术支持，纯属徒增维护成本。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！