blockquote 的 cite 属性只能填合法且可访问的 URL，如 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote；非 URL 内容（书名、作者、页码等）会导致语义丢失，而可见来源信息须用 <footer> 包裹并置于 blockquote 内部末尾。
blockquote 的 cite 属性到底填什么
cite 属性只接受合法 URL，填书名、作者、页码或中文描述会直接失效——浏览器不报错但语义丢失，爬虫和读屏器也跳过它。cite 不是“来源说明框”，而是纯元数据字段。
- ✅ 正确：
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> - ❌ 错误：
<blockquote cite="《HTML 标准》第 42 条">（非 URL） - ❌ 错误：
<blockquote cite="作者：张三">（含描述性文字） - ❌ 错误：
<blockquote cite="ref.md">（相对路径在部署后极易 404）
URL 必须指向真实可访问的原始页面，不是首页、不是 PDF 下载链接（除非该链接本身就是规范公开地址），更不能是空链接或占位符。
怎么让用户真正看到“出自哪里”
cite 属性本身不渲染任何文字。想让访客看见来源，必须手动写可见内容，<footer> 是最合规、兼容性最好的选择，且必须放在 <blockquote> 内部末尾。
- 用
<footer>包裹作者、作品名、时间等信息，例如：<footer>— 李四，《前端语义化实践》，2023</footer> -
<cite>只包作品标题，不能塞作者或 URL：<cite>前端语义化实践</cite>✅，<cite>https://example.com</cite>❌ - 别用
<small>或单独<cite>替代<footer>—— 前者无引用语义，后者语义越界
如果引用含多个自然段，每段必须用 <p> 显式包裹，否则 HTML 验证失败，CSS 也难控制段间距。
立即学习“前端免费学习笔记（深入）”；
常见结构陷阱：cite 属性和 元素别混用
这是最常踩的坑：cite 属性和 <cite> 元素完全不是一回事。前者是 <blockquote> 的属性，后者是独立行内元素；一个存机器可读 URL，一个标人类可读作品名。
- ❌ 错误嵌套：
<blockquote><cite>《设计模式》</cite></blockquote>（<cite>不该直接当<blockquote>子元素） - ✅ 正确位置：
<blockquote cite="https://example.com/book"><p>…</p><footer>— <cite>设计模式</cite>, Gamma 等著</footer></blockquote> - 如果要加链接，把
<a>套在<cite>外面，而不是给<cite>加href
多段引用、微博截图、GitHub commit 这类复杂场景，cite 属性只管 URL，其余信息（用户名、时间、commit hash）全靠 <footer> + <time> + 普通文本补全。
样式和可访问性容易被忽略的细节
默认 <blockquote> 样式极不可靠：Chrome 和 Firefox 缩进不一致，边框粗细不同，<cite> 斜体在部分读屏器中会被跳过。
- 务必重置
<blockquote>的margin和border-left，例如：blockquote { border-left: 4px solid #007acc; padding-left: 1rem; } -
<blockquote> footer推荐设为font-style: normal，避免和<cite>的斜体混淆 - 移动端建议加
text-align: end让署名右对齐，更符合阅读习惯 - 若
<footer>含链接，加上aria-label明确上下文，比如aria-label="引用自《前端语义化实践》第5章"
真正麻烦的从来不是标签怎么写，而是判断“这段话是否需要标注出处”——会议纪要可能只需机构名，代码注释里的引用却得带 commit hash。语义永远比格式优先，别为了少写一行 HTML 而牺牲可访问性。
