cite标签必须嵌入引用语境（如blockquote、q或描述句）才有效，仅含作品标题，不可混入元数据，需css重置中文斜体样式，并配合明确引用说明以保障无障碍语义。
cite 标签本身不构成完整引用结构，必须嵌入语义上下文才有效——单独使用、脱离引用动作、混入元数据，都会让语义失效。
cite 必须出现在引用语境中
浏览器和读屏器不会孤立解析 cite；它需要明确的“被引用”行为作为支撑。常见合法上下文包括：blockquote、q、或描述性句子（如“正如重构指出…”）。
- ✅ 正确：
<p>《代码大全》强调：<q>好的变量名胜过十行注释</q> —— <cite>代码大全</cite></p> - ❌ 错误：
<p><cite>代码大全</cite></p>（无引用动作，语义断裂） - ⚠️ 注意：
figcaption里一般不用cite，标题信息用普通文本更稳妥；若需强调作品名，可加em或 CSS 控制，但别硬套cite
cite 内容只能是作品标题本身
它不是容器标签，不能承载作者、年份、出版社、URL、ISBN 或任何附加信息——这些都属于元数据，应由其他标签分层处理。
- ✅ 正确：
<p>参见 <cite>Web Accessibility Guidelines</cite> 第 4.2 节。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - ❌ 错误：
<p><cite>Web Accessibility Guidelines, W3C, 2023</cite></p>（混入机构与年份） - ? 替代方案：作者用
span或small，年份用time datetime="2023"，链接用a href，再统一包裹在footer或div中
与 blockquote 的 cite 属性严格区分
cite 元素和 blockquote 的 cite 属性毫无关系：前者是人类可读标题，后者是机器可读 URI，二者不可互换、不可嵌套、不可混用。
- ✅ 正确：
<blockquote cite="https://www.w3.org/TR/WCAG22/"> <p>可访问性不是附加功能。</p> <footer>— <cite>Web Content Accessibility Guidelines</cite>, W3C</footer> </blockquote> - ❌ 错误：
<blockquote cite="Web Content Accessibility Guidelines"></blockquote>（属性值不是 URL） - ❌ 错误：
<blockquote><cite>WCAG</cite></blockquote>（cite不是blockquote的子元素语义要求，且没提供 URI）
中文场景下需重置默认斜体样式
HTML 默认对 cite 应用 font-style: italic，但中文标题斜体无辨识度，反而影响可读性；必须通过 CSS 显式覆盖。
- ✅ 推荐写法：
cite { font-style: normal; font-weight: 500; }（或搭配font-variant: small-caps等增强区分） - ⚠️ 注意：不要依赖
i或em替代cite，它们语义不同；视觉降级可以，但结构语义不能丢 - ? 配合无障碍：确保父级上下文有足够文字说明（如“引自”“参见”），否则仅靠
cite无法传达引用意图
真正容易被忽略的是：语义有效性不取决于你写了多少个 cite，而取决于每个 cite 是否能被辅助技术准确关联到一次真实的引用行为——脱离上下文的 cite，和没写一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
