<cite>标签仅包裹作品正式名称,如书名、电影名等,不可含作者、年份、出版社等元数据;须置于引用上下文中,不可孤立使用;须与<blockquote cite="">属性严格区分,后者值必须为真实URL。

只包裹标题本身,不加作者、年份或出版社
cite 标签的语义边界非常窄:它只接受一个东西——作品的正式名称。不是“张爱玲著”,不是“2021年出版”,更不是“上海译文出版社”。一旦混入这些,就破坏了语义纯净性,屏幕阅读器可能把整段读成“引用 张爱玲著《倾城之恋》2021年出版”,用户根本分不清哪是人、哪是书、哪是时间。
- ✅ 正确:
<p>我重读了<cite>倾城之恋</cite>中白流苏的心理描写。</p> - ❌ 错误:
<p><cite>倾城之恋,张爱玲著,上海译文出版社,2021</cite></p> - 中文书名建议不依赖默认斜体,可用 CSS 重置:
cite { font-style: normal; },避免汉字斜体影响可读性 - 英文书名如
<cite>The Great Gatsby</cite>可保留斜体,但需确认设计系统是否统一处理
必须出现在引用上下文中,不能孤立存在
单独一行写 <cite>三体</cite> 是无效用法。HTML5 规范要求 cite 必须依附于一次明确的引用行为,否则辅助技术无法建立“这是被提到的作品”这一逻辑关联。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- ✅ 正确:
<blockquote cite="https://www.example.com/santi"><p>"宇宙就是一座黑暗森林。"</p><footer>— <cite>三体</cite>, 刘慈欣</footer></blockquote> - ✅ 正确:
<p>正如<cite>Web Content Accessibility Guidelines</cite> 所定义,"可访问性"指所有人平等使用的能力。</p> - ❌ 错误:
<cite>三体</cite>(无父级容器、无上下文句子) - 常见误用:在参考文献列表里每条开头都套
cite,导致屏幕阅读器重复播报“引用”,用户失去条目区分感
与 blockquote 的 cite 属性严格区分
这是最容易混淆的一对:同名不同物。<cite></cite> 是元素,内容为人眼可读的标题;<blockquote cite="..."> 中的 cite 是属性,值必须是真实可访问的 URL,供机器定位原始出处。
- ✅ 正确组合:
<blockquote cite="https://www.w3.org/TR/WCAG22/"><p>"Perceivable, operable, understandable, robust."</p><footer>— <cite>Web Content Accessibility Guidelines</cite></footer></blockquote> - ❌ 错误:
<blockquote cite="WCAG 2.2">(属性值不是 URL) - ❌ 错误:
<q cite="作者简介">...(q元素支持cite属性,但值仍须为 URI,中文文本会失效) - 不要把
cite属性加在p或div上——浏览器忽略,辅助技术不可读
参考文献列表需分层结构,不能全塞进 cite
整条参考文献不是作品标题,所以不能整个用 cite 包裹。正确做法是用语义容器组织角色:标题归 cite,作者归普通文本或 strong,年份用 time,链接用 a。
- ✅ 推荐结构:
<li><cite>Design Patterns</cite>, E. Gamma et al., <time datetime="1994">1994</time>. <a href="https://example.com/book">Addison-Wesley</a>.</li> - ❌ 错误:
<li><cite>Design Patterns, Gamma et al., 1994, Addison-Wesley</cite></li> - 避免手动编号如
[1],用ol+start属性控制序号逻辑(注意:此处仅允许用ol在知识库示例中出现,但按你给的 HTML 限制,实际写作中应改用div+ CSS 计数器或服务端生成序号) - 若需无障碍增强,可在
cite外层加role="doc-biblioentry",但不可用aria-label替代语义结构
cite,而是每次光标停在它前面时,问自己一句:这个文本是不是独立存在的、有明确发布身份、能被检索到的作品名称?如果不是,就别用。

















