cite标签仅用于包裹创意作品的正式标题，如书名、电影名等，不可用于作者、URL、年份、出版社等其他信息；它与blockquote的cite属性功能不同，需配合footer等标签实现完整引用语义。
cite 标签不是“加个引用标记”或“塞个来源链接”的万能占位符——它只负责一件事：包裹作品标题本身。用错地方，语义就崩了，辅助技术可能读错，SEO 也可能误判。
什么时候必须用 cite？只包书名、电影名、专辑名这类标题
它的语义边界非常窄：仅限创意作品的正式名称。不是作者、不是出版社、不是 URL、不是 DOI、不是年份，更不是“参见[1]”这种编号。
- ✅ 正确：
<p>《百年孤独》是加西亚·马尔克斯的代表作，<cite>百年孤独</cite>这个书名源自拉丁美洲的历史循环观。</p> - ❌ 错误：
<p>详见<cite>https://example.com/gabo</cite></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>（URL 不是作品名） - ❌ 错误：
<p>由<cite>马尔克斯</cite>创作</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（人名不能进cite） - ❌ 错误：
<p><cite>百年孤独</cite>（1967年，布宜诺斯艾利斯）</p>（年份和地点破坏语义纯净性）
cite 和 blockquote 的 cite 属性是两回事
这是最容易混淆的一对：一个是 HTML 元素，一个是属性，名字相同但职责完全不同。
-
<cite></cite>是行内元素，内容为人眼可读的作品标题，比如<cite>Design Systems</cite> -
<blockquote cite="https://example.com/book"></blockquote>中的cite是属性，值必须是合法 URL（绝对或相对），用于机器定位原始出处 - 两者可以共存，但不能互相替代：
<blockquote cite="https://example.com/book"> <p>组件驱动开发正在成为主流…</p> <footer>——Nathan Curtis, <cite>Design Systems</cite></footer> </blockquote> - 填
cite="《Design Systems》"或cite="ISBN:978-0-99999999-9"是无效的，浏览器不会报错但会忽略，辅助技术可能跳过或朗读异常
怎么配合其他标签让引用更完整？别单靠 cite
cite 单独存在没问题，但要表达“谁说的、在哪说的、出处在哪”，就得组合使用。HTML5 明确推荐结构是 blockquote + footer + cite。
-
<blockquote></blockquote>包裹引文内容（多句/段落） -
<footer></footer>放在blockquote内部末尾，专门承载署名、出处说明等元数据 -
<cite></cite>只出现在footer里，且只包作品标题，不包作者或链接 - 如果作品有在线版本，把
cite套在a里更合理：<a href="https://example.com/book"><cite>Design Systems</cite></a> - 避免用
cite套i或em：它默认斜体是浏览器 UA stylesheet 的事，不是语义需要；真要取消斜体，写cite { font-style: normal; }即可
容易被忽略的兼容性与可访问性细节
现代浏览器都支持 cite，但它对辅助技术的实际影响很有限——屏幕阅读器通常不会特别播报“这是 cite 标签”，而是把它当普通文本读。真正起作用的是你有没有把该放的内容放对位置。
- 把作者名塞进
cite，读屏器可能误判为“某部叫‘张三’的小说”，造成理解混乱 - 搜索引擎会识别
cite内容为作品标题，但若混入 URL 或 ISBN，可能削弱页面主题相关性 - 想让机器可读性更强？
data元素 +value属性更适合存 DOI、PMID 等结构化 ID，cite仍专注人类可读的标题呈现 - 不要指望
cite自动生成参考文献列表——那得靠 JS 解析 DOM 或后端预处理，浏览器原生不提供此功能
最常出问题的不是不会写 cite，而是下意识把它当“引用容器”来用。记住：它只是作品标题的语义包装纸，不是整本参考文献的抽屉。
