cite标签仅语义化标记作品名称，不承担文献引用功能；正确用法是仅包裹书名、文章名等，而非整条参考文献；文献追踪需依赖id链接、csl工具或schema.org结构化数据等外部机制。
cite 标签只用于作品名称，不是文献引用容器
cite 标签语义上仅表示「被引用的作品名称」，比如书名、文章名、电影名等，它不承载作者、年份、来源链接等文献元数据。浏览器默认将其渲染为斜体，但仅此而已——它不会自动生成参考文献列表，也不支持交叉引用或编号追踪。
常见错误是把整条参考文献塞进 cite 里：<cite>张三. 基于深度学习的图像识别方法[J]. 计算机学报, 2022, 45(3): 123–135.</cite>
这违反 HTML 语义规范，且无法被屏幕阅读器或学术工具正确解析。
- 正确用法只包裹作品名部分：
<cite>计算机学报</cite>或<cite>基于深度学习的图像识别方法</cite> - 若需标注期刊名+文章名，应分层使用语义标签：
<cite>基于深度学习的图像识别方法</cite>，发表于 <cite>计算机学报</cite> -
cite不接受id或data-cite-id等自定义属性来实现追踪——这些属性不会被任何标准解析器识别
真正实现文献追踪得靠外部机制
HTML 本身没有内置文献管理能力。要让「某处引用」和「文末参考文献条目」产生可追踪关联，必须借助额外结构或工具：
- 手动维护
id+href链接：在正文中用@#@#@#@#@#@#@#@#@#@0，文末写<p id="ref-1">Knuth, D. E. (1973). <cite>The Art of Computer Programming</cite>...</p> - 使用 CSL（Citation Style Language）配合 JavaScript 渲染器（如 citeproc-js），前提是文献数据以 JSON 或 BibTeX 格式预加载
- 静态站点生成器（如 Jekyll + jekyll-scholar）可在构建时注入带编号的引用和参考文献块，但运行时仍是纯 HTML，无动态追踪
注意：cite 标签本身不参与上述任一机制——它只是最终渲染时用来包裹作品名的语义容器。
与 blockquote 和 q 的协作场景
当引用内容来自某部作品时，cite 常与 blockquote 或 q 搭配，表明出处来源：
<blockquote> <p>“程序 = 算法 + 数据结构”</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <footer>— <cite>Niklaus Wirth</cite>, <cite>Program Development by Stepwise Refinement</cite></footer> </blockquote>
这里两个 cite 分别标记人名（有争议，更推荐用 <span></span> 或微数据）和论文标题，符合规范。但注意：
- 作者名不应强制用
cite，W3C 明确说明cite表示“作品”，不是“创作者” -
footer是blockquote的合法子元素，比small更语义准确 - 这种写法仍无自动编号或跳转能力，纯属静态呈现
现代替代方案：Schema.org 微数据或 JSON-LD
如果目标是让搜索引擎或学术工具识别并索引文献信息，cite 远不够用。应补充结构化数据：
<div itemscope itemtype="http://schema.org/ScholarlyArticle"> <span itemprop="name"><cite>Attention Is All You Need</cite></span> <span itemprop="author">Vaswani et al.</span> <time itemprop="datePublished" datetime="2017">2017</time> </div>
这样做的效果是：
- Google 学术可能抓取该条目并关联到知识图谱
- Zotero 等工具可通过页面元数据自动提取文献信息
- 仍需自行处理正文中的引用锚点与参考文献列表同步问题
说到底，cite 是个轻量语义标签，不是引用系统。想靠它实现文献追踪，就像想用 em 标签做全文翻译——方向错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
