cite标签仅用于标记被引用作品的标题且必须出现在引用语境中，如blockquote或q元素内；不可单独使用、不包作者年份、无默认样式，需CSS设置斜体并注意无障碍可辨识性。
cite 标签不是用来加粗或斜体的
很多人一看到 cite 就以为是“citation”的缩写，顺手拿来包裹书名、电影名、文章标题，结果发现样式没变化、语义没生效，甚至被 Lighthouse 报告标记为“误用”。cite 的作用非常明确：它只用于标记「作品标题」本身，且必须出现在引用语境中——比如 blockquote、q 或描述某人说了什么的句子内。
常见错误现象包括：
- 单独使用
<cite>《三体》</cite>而不关联任何引用行为 - 用
cite包裹作者名、出版社、年份等非标题信息 - 在
figcaption里滥用cite（应优先用普通文本或em）
cite 必须配合引用上下文才有语义价值
HTML5 规范明确要求：cite 表示“被引用作品的标题”，而这个“被引用”需要有可识别的引用动作。浏览器和读屏器不会单独解析 cite，但会结合父元素（如 blockquote 的 cite 属性、或 q 元素）建立语义链。
正确用法示例：
立即学习“前端免费学习笔记（深入）”；
<blockquote cite="https://example.com/article"> <p>“技术债不是欠钱，而是欠清晰。”</p> <footer>—— <cite>重构：改善既有代码的设计</cite>，Martin Fowler</footer> </blockquote>
关键点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
blockquote的cite属性指向原始出处 URL，和cite元素本身无关 -
cite元素只包书名/文章名/专辑名等「作品标题」，不包作者、年份、页码 - 如果引用是内联的（比如一句话里提到某本书），仍可用
<q>…</q> <cite>标题</cite>
和 em、i、b 的区别很实际
有人图省事用 i 或 em 替代 cite，这是可行的视觉降级方案，但会丢失结构语义。搜索引擎、无障碍工具、未来可能的语义提取器（比如自动生成参考文献列表的爬虫）都依赖 cite 的明确含义。
对比来看：
-
<i>三体</i>：仅表示“这段文字风格不同”，可能是外文、术语、船名——但不承诺是作品标题 -
<em>三体</em>：表示强调语气，语义完全错位 -
<cite>三体</cite>：明确告诉解析器：“这是一个被引用的作品名称”
如果你的页面要被学术工具抓取、或需通过 WCAG 2.1 AA 认证，cite 不是可选项，而是必要标记。
浏览器默认样式几乎为零，别指望它自动变斜体
所有主流浏览器对 cite 的默认渲染都是纯文本（无斜体、无下划线、无颜色变化）。这不是 bug，是设计使然——HTML5 强调语义与样式的分离。你得自己加 CSS：
cite {
font-style: italic;
}
但注意两点：
- 不要只靠斜体区分——色觉障碍用户可能看不到差异，建议同时加
font-weight或border-bottom - 如果全站统一用斜体，反而削弱了
cite的辨识度；可考虑对书籍用斜体、电影用引号+斜体、论文标题加 small caps
真正容易被忽略的是：即使加了样式，cite 也从不自动链接到原文。它不是 a 标签，也不带 href。想跳转？得手动套一层 <a href="..."><cite>标题</cite></a>。
