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"。它不会出现在页面上，但会被爬虫、开发者工具和部分屏幕阅读器读取。
- ✅ 正确：
- ❌ 错误：
（这不是 URI，校验失败） - ❌ 错误：
（空值虽不报错，但失去语义意义） - ⚠️ 注意：URL 指向 404 页面时，
cite仍有效，但对 SEO 和可访问性无实际帮助
怎么让“作者”和“作品名”真正显示出来
浏览器不会从 cite 属性里提取文字并渲染。要显示人类可读的来源信息，必须在 blockquote 内部末尾显式添加结构，footer 是 HTML5 规范推荐的方式。
-
footer必须放在blockquote内部，不能放外面（否则语义断裂） -
cite标签只用于作品标题（如《HTML Standard》《前端手记》），不用于人名或网址 - 作者名、机构、时间等用普通文本或
strong表达，别塞进cite里 - 示例：
多段引用怎么写才合法又易维护
直接把几段文字堆进 blockquote 里，看似省事，实则破坏语义、影响 CSS 控制、通不过 HTML 验证。
- 每段引用内容必须用
p包裹，例如：第一段引文
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
第二段引文
- 禁止用
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，例如：@#@#@#@#@#@#@#@#@#@0
真正难的不是写出标签，而是判断哪些信息必须显式呈现：微博截图引用要带用户名+发布时间，PDF 引用得标页码+章节，而会议纪要可能只需机构名。语义永远比格式优先，别为了少写一行 HTML 让屏幕阅读器读不出关键上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
