cite标签不能直接做参考文献列表，因其仅语义化作品标题，非容器元素，不包含作者、年份等信息；合规做法是section+ol/ul包裹，每条中cite仅包书名，其余信息用普通文本或a标签标注。
cite 标签不能用来做参考书目列表，它只负责包裹单个作品标题；想实现规范的参考文献布局，必须用 section + ol 或 ul + cite 组合，且每条文献中 cite 只能包书名、文章名等正式标题。
为什么不能直接用 cite 做参考文献列表
HTML 规范里没有「参考文献」原生标签，cite 的语义边界极窄——它不是容器，不表示一条完整文献，更不处理作者、年份、出版社、DOI 或 URL。单独写一堆 cite 标签，比如：
<cite>《设计模式》</cite><br> <cite>The Rust Programming Language</cite>
读屏器会把它们全读成“作品标题”，用户无法分辨哪是书、哪是作者、哪是链接；搜索引擎也难以提取有效引用关系。
参考书目该用什么结构搭建
真正合规的做法是分层语义组合：section 表示整个参考文献区块，ol（编号）或 ul（不编号）包裹每条文献，每条内再用 cite 仅包作品名，其他信息用普通文本或 a 标签显式标注：
立即学习“前端免费学习笔记（深入）”；
- 用
section包裹整体，并加aria-labelledby指向标题，方便辅助技术定位 - 编号引用（如论文脚注对应）优先选
ol；网页底部通用推荐用ul - 每条文献中，
cite只包《设计模式》这类标题，不带括号说明、不混作者名 - URL 必须用
a标签包裹，且加rel="noopener"和aria-label（如aria-label="《设计模式》英文原版 PDF 下载"）
cite 在参考书目里的正确写法示例
下面这段是符合语义、可访问、利于 SEO 的参考文献条目写法：
<section aria-labelledby="refs-title">
<h2 id="refs-title">参考文献</h2>
<ol>
<li><cite>Design Patterns</cite>, Erich Gamma et al., Addison-Wesley, 1994.</li>
<li><cite>HTML Living Standard</cite> — <a href="https://html.spec.whatwg.org/" rel="noopener" aria-label="HTML Living Standard 官方规范页面">https://html.spec.whatwg.org/</a></li>
</ol>
</section>
注意几个关键点：
-
cite内只有作品名，没作者、没年份、没出版社——这些都放在外面作为普通文本 - URL 不进
cite，而是用a单独包裹，并补全可访问性属性 - 没有用
blockquote或cite属性——它们适用于「引用内容」场景，不是「列出文献」
容易被忽略的兼容性与样式问题
浏览器默认只给 cite 加斜体，视觉上几乎无法和普通强调文字区分。如果参考文献要让人一眼识别出哪些是作品名，必须手动加 CSS：
cite {
font-style: italic;
color: #1e40af;
text-decoration: underline wavy #c7d2fe;
}
否则，纯靠斜体，在小字号或弱对比屏幕上，用户根本看不出哪段是作品标题。这点在移动端尤其明显，但多数人写完就忘了加样式。
