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>

关键点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 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。想跳转？得手动套一层 @#@#@#@#@#@#@#@#@#@0。

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