cite标签仅用于包裹书名、文章名等作品标题，不可包含作者、年份等信息，也不应嵌套链接或引用说明，其核心价值在于html语义结构而非视觉样式。

cite 标签只包裹书名/文章名，不包作者或年份

cite 的语义非常明确：它只用于标示被引用作品的标题（如书名、期刊名、文章标题、电影名等），不是用来标记整个参考文献条目。很多人误把它当 <footer></footer> 或 <small></small> 用，结果语义错乱，还影响屏幕阅读器理解。

正确做法是只把标题文字包进 cite，其余信息（作者、出版社、年份、页码）用普通文本或更合适的元素（如 span、time）处理：

<p>正如<cite>《代码大全》</cite>中所说：“好的代码首先是写给人看的。”</p>
<p>参见<cite>Nature</cite>杂志2023年发表的<cite>“Large Language Models as Zero-Shot Reasoners”</cite>一文。</p>

注意第二个例子里嵌套了两个 cite：一个包期刊名 Nature，一个包论文标题——这是合法且推荐的，因为它们都是独立的作品标题。

不要用 cite 替代链接或引用说明

cite 本身不带链接能力，也不暗示出处位置。如果要提供可点击的来源，必须显式加 a 标签；如果要说明“引自第X页”或“转引自”，这些属于引用说明，不属于 cite 范畴。

• ❌ 错误：《JavaScript高级程序设计》 —— cite 不该包裹 a，语义混淆
• ✅ 正确：《JavaScript高级程序设计》 —— 链接在外部，cite 专注标标题
• ✅ 正确：

  见《深入浅出Node.js》第42页。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  —— “第42页”是引用说明，不进 cite

浏览器默认样式弱，但别靠 CSS 强行改语义

多数浏览器对 cite 的默认渲染只是斜体（font-style: italic），这容易让人误以为它只是个“美化标签”。但它的价值不在视觉，而在结构语义——辅助技术（如读屏软件）会特别提示“这是作品标题”，搜索引擎也可能据此增强内容理解。

如果你发现加了 cite 后排版突兀，优先检查是否误用了它；真要调整样式，可用：

cite {
  font-style: normal; /* 取消斜体 */
  font-weight: 600;
}

但别为了视觉统一，把所有引用文字都塞进 cite，比如把“作者：XXX”也包进去——那是在破坏 HTML 的语义契约。

和 blockquote + footer 搭配时，cite 不放 footer 里

当引用较长内容并用 blockquote 包裹时，常有人把来源信息丢进 blockquote>footer，再在里面套 cite。这是可以的，但要注意：只有标题部分才该用 cite，其他信息不是。

<blockquote>
  <p>编程是一门实践的艺术，而非纯理论学科。</p>
  <footer>— <cite>《程序员修炼之道》</cite>，Andrew Hunt & David Thomas</footer>
</blockquote>

这里 <cite>《程序员修炼之道》</cite> 正确，但作者名 Andrew Hunt & David Thomas 不属于作品标题，不能包进 cite。如果想进一步区分作者，可用 span 加 class 或微数据，但别滥用 cite。

真正容易被忽略的是：很多 CMS 或 Markdown 解析器会自动把整段引用文本（含作者+书名）塞进一个 cite，这种“一键生成”看似省事，实则把语义全搞丢了。手动拆解标题和非标题部分，才是可靠做法。

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