cite元素仅包裹作品正式标题，不得含作者、年份等信息；blockquote等标签的cite属性值必须为可访问url；署名需用footer+cite组合手动实现；html本身不支持自动文献编号与追踪。
cite元素只包书名、文章名，不包作者和年份
cite元素的语义边界非常窄：它只应包裹被引用作品的**正式标题**，比如设计模式、The Art of Computer Programming、肖申克的救赎。一旦混入作者、年份、出版社、ISBN 或 URL，就违反 HTML5 规范，也会让屏幕阅读器误读为“作品名叫‘张三, 2024’”。
常见错误包括：<cite>张三. 基于深度学习的图像识别方法[J]. 计算机学报, 2022</cite>——这是整条参考文献，不是标题；<cite>https://example.com/report</cite>——URL 不是作品名；<cite>Dan Abramov</cite>——人名不能进 cite。
正确做法是拆解处理：<p>参见 <cite>Clean Code</cite>（Robert C. Martin 著，2008 年出版）</p>，其中作者和年份用普通文本或 small 标签承载。
blockquote 的 cite 属性必须是可访问的 URL，且仅限四个标签
cite 属性不是通用备注字段，它只能合法出现在 blockquote、q、ins、del 这四个标签上，值必须是真实可访问的 URI（绝对或相对路径），例如 <blockquote cite="https://w3c.github.io/html/semantics.html#the-cite-element"></blockquote>。
常见错误现象：<p cite="王教授讲座">…</p>——p 不支持 cite 属性，验证器直接报错；<blockquote cite="见附录A"></blockquote>——非 URL，无机器可操作性；<blockquote cite="《重构》第3章"></blockquote>——文本值无法被爬虫或协作工具定位。
该属性纯属元数据：浏览器不渲染、屏幕阅读器支持不稳定、SEO 几乎不识别。它的唯一作用是给机器提供原始出处的跳转依据，不是给人看的署名快捷键。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正显示引用来源得靠 footer + cite 组合
用户看得见的署名，必须手动写在 footer 或 figcaption 里，不能依赖 cite 属性自动浮现。blockquote 内部末尾加 <footer></footer> 是目前最可靠、语义最清晰的做法。
示例结构：<blockquote cite="https://example.com/ref">
<p>"语义 HTML 是基础。"</p>
<footer>— <cite>前端可访问性模式</cite>, 李四, 2024</footer>
</blockquote>
注意：cite 元素只包书名，作者、年份等其他字段必须用普通文本；移动端建议对 footer 设置 text-align: end 实现右对齐，更符合署名习惯；中文场景下 cite 默认斜体辨识度低，建议 CSS 重置为正常字体 + 左边框或颜色区分。
HTML 本身不支持文献编号与自动追踪
别指望 cite 标签或 cite 属性能生成带编号的脚注、悬挂缩进参考文献列表，或实现点击跳转到文末条目。HTML 没有内置文献管理能力。
要实现文献追踪，必须借助外部机制：
– 手动维护 id + href 链接（如正文 @#@#@#@#@#@#@#@#@#@0，文末 <p id="ref-1">…</p>）；
– 使用 CSL（Citation Style Language）配合 JavaScript 渲染器（如 citeproc-js），前提是预加载 JSON/BibTeX 数据；
– 在静态站点生成器中（如 Jekyll + jekyll-scholar）构建时注入编号引用。
cite 标签本身只是最终渲染时用来包裹作品名的语义容器，它不参与任何编号、跳转或解析逻辑——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
