必须在正文中明确提及可独立检索的创意作品标题（如书名、电影名等）时使用cite标签，且仅包裹纯标题本身，需嵌入描述性上下文，不可用于url、人名或混入出版信息。
什么时候必须用 cite 标签
只有当你在正文中明确提到一部**可独立检索的创意作品标题**时，才该用 cite。比如书名、电影名、专辑名、期刊文章标题、绘画作品名——这些名称得能被图书馆目录、ISBN、DOI 或主流数据库唯一识别。cite 不是“加个引用标记”的快捷键，它只负责包裹那个“名字本身”。
- ✅ 正确：
<p>《深入浅出设计模式》是经典入门书，<cite>深入浅出设计模式</cite>这个书名直指其核心方法论。</p> - ❌ 错误：
<p>参见 <cite>https://react.dev</cite></p>（URL 不是作品标题） - ❌ 错误：
<p>作者 <cite>Eric Freeman</cite> 提出…</p>（人名不能进cite） - ❌ 错误：
<p><cite>深入浅出设计模式（O’Reilly, 2004）</cite></p>（混入出版社和年份，破坏语义边界）
cite 必须出现在引用上下文中
单独写一个 <cite>JavaScript高级程序设计</cite> 没有意义。浏览器和读屏器需要上下文来判断这是“被引用的作品”，而不是一段普通斜体文字。它得嵌在描述性句子、<blockquote></blockquote> 或 <q></q> 里，才能建立有效语义链。
- ✅ 推荐结构：
<blockquote cite="https://example.com/book"> <p>"面向对象不是银弹。"</p> <footer>— <cite>重构：改善既有代码的设计</cite>, Martin Fowler</footer> </blockquote> - ✅ 内联引用：
<p>正如 <cite>You Don’t Know JS</cite> 所强调的，作用域是理解闭包的关键。</p> - ❌ 孤立使用：
<cite>三体</cite>（无主句、无动词、无上下文） - ⚠️ 注意：
<blockquote></blockquote>的cite属性和<cite></cite>元素无关——前者是 URL，后者是作品名，别混用。
样式与可访问性实际影响
浏览器默认把 cite 渲染为斜体，但这只是 UA stylesheet 的事，不是语义要求。你完全可以重置：cite { font-style: normal; }，语义不变。真正影响可访问性的，是你有没有把对的内容放进对的标签里。
- 屏幕阅读器一般不会特别播报“这是
cite标签”，但它会结合父元素（如<footer></footer>）推断上下文；若你把作者塞进cite，辅助技术可能误判为“作品名”，导致信息错乱。 - SEO 工具会利用
cite的语义识别文档中的参考文献结构，误用可能降低内容可信度信号。 - 别用
<i></i>或<em></em>替代cite做视觉强调——它们没有作品标题的结构含义，机器无法区分是强调语气还是标注来源。
中文场景下的常见陷阱
中文作品名常带书名号（《》），但 cite 只包裹纯标题，不包含标点。书名号属于正文字体排版，不是作品名的一部分。另外，中文习惯把作者、年份、出版社写在一起，但这些都必须剥离出去。
- ✅ 正确：
<p>《百年孤独》是拉美文学高峰，<cite>百年孤独</cite>这个标题本身即隐喻历史循环。</p> - ❌ 错误：
<p><cite>《百年孤独》（1967年）</cite></p>（括号内年份不属于作品标题） - ? 小技巧：中文站点常通过 CSS 重置
cite字体为正常（非斜体），避免视觉干扰，同时保留语义清晰度：cite { font-style: normal; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
