CITE标签引用作品标题的HTML文档结构规范-html教程-PHP中文网

cite标签必须嵌入引用语境（如blockquote、q或描述句）才有效，仅含作品标题，不可混入元数据，需css重置中文斜体样式，并配合明确引用说明以保障无障碍语义。

cite标签引用作品标题的html文档结构规范

cite 标签本身不构成完整引用结构，必须嵌入语义上下文才有效——单独使用、脱离引用动作、混入元数据，都会让语义失效。

浏览器和读屏器不会孤立解析 cite；它需要明确的“被引用”行为作为支撑。常见合法上下文包括：blockquote、q、或描述性句子（如“正如重构指出…”）。

✅ 正确：<p>《代码大全》强调：<q>好的变量名胜过十行注释</q> —— <cite>代码大全</cite></p>
❌ 错误：<p><cite>代码大全</cite></p>（无引用动作，语义断裂）
⚠️ 注意：figcaption 里一般不用 cite，标题信息用普通文本更稳妥；若需强调作品名，可加 em 或 CSS 控制，但别硬套 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/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" 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 中

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，和没写一样。