blockquote 的 cite 属性仅存 URI 且不渲染，要显示来源须手动添加 footer 或 cite 元素；多段引用需用 p 包裹，禁止 br 换行；样式需重置以保障可访问性与一致性。
blockquote 不会自动显示来源，cite 属性只存 URL 且不渲染；真要让人看见“谁说的”“出自哪”，必须手动加 footer 或 cite 元素——这是最常被卡住的一点。
blockquote 的 cite 属性到底填什么
cite 是 blockquote 的属性，不是标签，它的值只能是合法 URI（绝对或相对路径），比如 cite="https://example.com/article" 或 cite="report.pdf"。它不会出现在页面上，但会被爬虫、开发者工具和部分屏幕阅读器读取。
- ✅ 正确：
<blockquote cite="https://w3c.github.io/html/grouping-content.html#the-blockquote-element"></blockquote> - ❌ 错误：
<blockquote cite="张三《语义化手册》第5页"></blockquote>（这不是 URI，校验失败） - ❌ 错误：
<blockquote cite=""></blockquote>（空值虽不报错，但失去语义意义） - ⚠️ 注意：URL 指向 404 页面时，
cite仍有效，但对 SEO 和可访问性无实际帮助
怎么让“作者”和“作品名”真正显示出来
浏览器不会从 cite 属性里提取文字并渲染。要显示人类可读的来源信息，必须在 blockquote 内部末尾显式添加结构，footer 是 HTML5 规范推荐的方式。
-
footer必须放在blockquote内部，不能放外面（否则语义断裂） -
cite标签只用于作品标题（如《HTML Standard》《前端手记》），不用于人名或网址 - 作者名、机构、时间等用普通文本或
strong表达，别塞进cite里 - 示例：
<footer>— 李四，《前端语义化实践》</footer>
多段引用怎么写才合法又易维护
直接把几段文字堆进 blockquote 里，看似省事，实则破坏语义、影响 CSS 控制、通不过 HTML 验证。
立即学习“前端免费学习笔记（深入）”；
- 每段引用内容必须用
p包裹，例如：<p>第一段引文</p> <p>第二段引文</p> - 禁止用
br或纯换行模拟分段——那只是视觉断行，不是语义分段 - 避免在
blockquote里嵌套section、article等语义冲突容器 - 如果引用含代码片段，用
pre+code，但别让blockquote承担代码语义职责
样式和可访问性容易忽略的关键点
默认样式靠不住：Chrome 和 Firefox 对 blockquote 的缩进、边框、字体处理不一致；cite 的斜体在中文里反而降低可读性。
- 重置
cite的字体风格：cite { font-style: normal; font-weight: 600; } - 用
border-left替代依赖 UA 缩进：blockquote { border-left: 4px solid #007acc; padding-left: 1rem; } - 为
footer单独设置颜色与字号，避免和正文混淆 - 若引用来源带链接，别只包在
cite里——加a并配aria-label，例如：<a href="..." aria-label="引用自《前端语义化实践》，作者李四">《前端语义化实践》</a>
真正难的不是写出标签，而是判断哪些信息必须显式呈现：微博截图引用要带用户名+发布时间，PDF 引用得标页码+章节，而会议纪要可能只需机构名。语义永远比格式优先，别为了少写一行 HTML 让屏幕阅读器读不出关键上下文。
