cite标签仅用于标记被引用的创意作品名称（如书名、电影名等），不可用于作者、网址、年份或整段引文；它与cite属性语义不同，不可混用或嵌套。
cite 标签只该包裹作品标题，不是作者、网址、年份，也不是整段引文——用错就等于放弃语义，还可能干扰屏幕阅读器。
什么时候必须用 cite？
仅当标记「被引用的创意作品名称」时才合法：书名、电影名、期刊文章标题、歌曲名、展览名等。它不表示“我引用了某人”，而表示“这是那部作品的名字”。
- ✅ 正确：
<p>参见 <cite>可访问的前端设计</cite> 第三章。</p> - ❌ 错误：
<p>作者 <cite>李明</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>（作者名不该用cite） - ❌ 错误：
<p>详见 <cite>https://example.com/report</cite></p>（URL 不是作品标题） - ❌ 错误：
<p><cite>2024 年版</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 和 cite 属性根本不是一回事
cite 是 HTML 元素，cite 属性是附加在 <blockquote></blockquote>、<q></q>、<ins></ins>、<del></del> 上的 URL 值。两者语义不同、用途不同、不能互相替代。
-
cite元素内容是人类可读的标题，比如<cite>Web Content Accessibility Guidelines</cite> -
cite属性值必须是真实可访问的 URI，比如<blockquote cite="https://www.w3.org/TR/WCAG22/"></blockquote> - ❌ 把
cite属性加到<p></p>或<div> 上：浏览器完全忽略，辅助技术也读不到 <li>❌ 在 <code><q cite="作者简介"></q>里填中文文本：违反规范，部分屏幕阅读器会跳过或误读 - ✅ 推荐写法：
<blockquote cite="https://a11y-guidelines.dev/ch2"> <p>语义化不是装饰，而是基础能力。</p> <footer>— <cite>无障碍前端实践指南</cite>, 2025</footer> </blockquote>
- ⚠️ 注意：
<footer></footer>不是必须的，但若要放出处说明，<cite></cite>必须在里面或紧邻引用内容后，不能塞进<blockquote></blockquote>开头或空标签里 - ⚠️ 中文场景下：
<cite></cite>默认斜体，但中文斜体无明显区分度，建议加 CSS 重置或用font-style: normal+ 其他视觉提示（如引号、颜色） - ❌ 禁止嵌套：
<cite><cite>嵌套无效</cite></cite>——cite不支持嵌套，也不该包裹其他元数据 - ✅ 正确：
<li>张伟. <cite>现代 Web 性能优化实战</cite>. 电子工业出版社, 2024.</li>
- ❌ 错误：
<li><cite>张伟. 现代 Web 性能优化实战. 电子工业出版社, 2024.</cite></li> - ❌ 错误：
<li> <cite>[3]</cite> 张伟. …</li>——[3]是编号，不是作品标题，cite对它毫无意义 - ⚠️ 补充：HTML 本身不支持自动生成参考文献序号或悬停脚注，这类功能需 JS 或构建工具配合，不能靠
cite标签硬凑
和 <blockquote></blockquote> 配合时的常见陷阱
<blockquote></blockquote> 本身表达“大段引用”，cite 属性提供机器可读来源，<cite></cite> 元素则在视觉/语义上说明“这是哪部作品”。三者分工明确，混用就会丢失信息层次。
参考文献列表里别滥用 cite
整条参考文献（含作者、年份、出版社、DOI）是一个结构化条目，<cite></cite> 只负责其中“作品标题”那一小段。全条都包 <cite></cite>，会让屏幕阅读器重复播报“引用”，破坏可访问性。
最容易被忽略的一点：语义一旦写错，后续所有自动化处理（比如引用提取、SEO 结构化数据、无障碍导航）都会失效——而你很难立刻察觉。检查时盯住一个标准：它是不是“作品标题”本身？如果不是，就别用 cite。
