cite标签仅用于包裹作品名称,不可包含作者、年份、URL等元数据;正确用法是<cite>设计模式</cite>,错误用法如混入作者或URL;引用来源应通过<blockquote>内嵌<footer>配合<cite>实现,且<footer>必须为最后一个子元素。

cite 标签不能用来“引用来源”,它只负责包裹作品名称——比如书名、文章标题、电影名。想靠它显示作者、年份、URL 或整条参考文献,会直接破坏语义,还可能被屏幕阅读器误读。
cite 元素只能包作品标题,不能包作者或网址
它的内容必须是人类可读的正式作品名,且不含任何元数据:
-
cite正确用法:<cite>设计模式</cite>、<cite>The Art of Computer Programming</cite> - 错误用法:
<cite>Gamma 等著,《设计模式》,1994</cite>(混入作者和年份) - 错误用法:
<cite>https://react.dev/reference/react/useEffect</cite>(URL 不是作品名) - 错误用法:
<cite>Dan Abramov</cite>(人名不是作品)
浏览器默认渲染为斜体,但中文环境下几乎不可区分,建议加 CSS 控制样式,比如 font-style: normal 配合引号或颜色提示。
blockquote 的 cite 属性 ≠ cite 元素,也不能替代来源说明
cite 属性只能用在 <blockquote>、<q>、<ins>、<del> 上,且值必须是真实可访问的 URI:
立即学习“前端免费学习笔记(深入)”;
- ✅ 合法:
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"> - ❌ 非法:
<blockquote cite="《JavaScript权威指南》">(文本非 URL,验证器报错) - ❌ 非法:
<p cite="https://example.com">(p不支持cite属性,浏览器忽略)
这个属性不渲染任何文字,也不保证被读屏器读出——它只是 DOM 中一个元数据字段,不能当作“可见出处”依赖。
真正让用户看到来源,得靠 footer + cite 组合
要让引用有明确、可访问、可样式化的出处,唯一可靠方式是:
- 把
<footer>作为<blockquote>的**最后一个子元素** - 在
<footer>里用<cite>包裹作品名,其余信息(作者、机构、年份)直接写文本 - 多段引用必须用
<p>显式包裹,不能靠换行或空格分段
示例:
<blockquote cite="https://a11y-guidelines.dev/ch2"> <p>语义化不是装饰,而是基础能力。</p> <footer>— <cite>无障碍前端实践指南</cite>, 2025</footer> </blockquote>
注意:<footer> 必须嵌套在 <blockquote> 内部,否则语义断裂;<cite> 只包书名,不包 “—” 或 “2025”。
表格数据来源别碰 cite,用 figure + figcaption
<table> 和 <tr> 根本不支持 cite 属性,写了也是无效标记,W3C 验证器会报错。常见错误是写成:
<table cite="https://stats.gov.cn/2023">...</table>
正确做法是用语义化结构标注来源:
- 整张表的来源:用
<figure>包裹<table>,再加<figcaption> - 某列或某单元格的来源:在
<td>内用<small>或title属性提供提示 - 避免把来源塞进
<caption>—— 它的作用是说明“表格是什么”,不是“从哪来”
最常被忽略的一点:PDF 导出工具、无障碍审计工具、甚至部分 CMS,都会跳过或误解析 cite 属性和错误嵌套的 cite 元素。真正起作用的,永远是用户能看见、能链接、能被辅助技术稳定识别的那部分 HTML。



















