HTML中cite标签的正确使用方法

cite标签仅用于包裹创意作品的正式标题，如书名、电影名、文章标题；不可用于作者、URL、年份或编号等非标题内容，且须独立使用、不嵌套，以保障语义准确与可访问性。

cite 标签只用来包裹作品标题，不是“加个引用标记”的万能占位符——用错地方，语义就失效了。

什么时候必须用 cite？只包书名、电影名、文章标题这类纯标题

它的语义边界非常窄：仅限创意作品的正式名称。不是作者、不是出版社、不是 URL、不是年份，更不是“参见[1]”这种编号。

• ✅ 正确：<cite>JavaScript高级程序设计</cite>、<cite>Inception</cite>
• ❌ 错误：<cite>https://example.com/book</cite>（URL 不是作品名）
• ❌ 错误：<cite>张三</cite>（人名不能进 cite）
• ❌ 错误：<cite>百年孤独（1967年）</cite>（年份破坏语义纯净性）

cite 和 blockquote 的 cite 属性是两回事

名字一样，但一个是元素，一个是属性，职责完全不同：

• <cite></cite> 是行内元素，内容为人眼可读的作品标题，比如 <cite>Design Systems</cite>
• <blockquote cite="https://example.com/book"></blockquote> 中的 cite 是属性，值必须是合法 URL（绝对或相对），用于机器定位原始出处
• 两者可以共存，但不能互相替代；blockquote 的 cite 属性值不能是书名或 ISBN

怎么配合 blockquote 或 footer 构成完整引用语义

单靠 cite 不足以表达“谁说的、在哪说的、出处在哪”。推荐结构是：

立即学习“前端免费学习笔记（深入）”；

<blockquote cite="https://example.com/book">  <p>Fear can hold you prisoner. Hope can set you free.</p>  <footer>— from <cite>Rita Hayworth and Shawshank Redemption</cite> by Stephen King</footer></blockquote>

• footer 是 HTML5 推荐的容器，用来放作者、出处说明等非标题信息
• cite 必须独立出现，不嵌套在 a、span 或列表中
• 不要用 cite 替代 i 做样式强调——它没有默认斜体语义（只是浏览器 UA stylesheet 渲染为斜体）

最容易被忽略的一点：屏幕阅读器一般不会特别播报“这是 cite 标签”，真正影响可访问性的，是你有没有把作者、年份、URL 这些东西硬塞进去——一旦塞了，辅助技术可能误判内容类型。