<blockquote>是专为引用外部可溯源内容设计的语义标签，必须搭配cite属性（合法URL）和<footer><cite>标注出处，禁止用作样式工具或包裹全文转载。
blockquote 的基本用法和语义边界
blockquote 不是“加引号的段落容器”，它是专为引用外部来源内容设计的语义标签。浏览器默认会给它加左边缩进和外边距，但样式可覆盖。如果只是想让一段文字视觉上像引用，又没明确来源，用 <aside> 或带 aria-label 的 <div> 更合适。
- 引用必须有明确出处，理想情况下应配合
cite属性或<footer> - 不要嵌套多个
blockquote来实现多层缩进——那是 CSS 该干的事 - 长篇引用中若含段落，直接在
blockquote内写多个<p>，不要用<br>换行
<blockquote cite="https://example.com/article"> <p>这是第一段引用内容……</p> <p>这是第二段，仍属于同一出处。</p> <footer>— 张三，《技术写作实践》，2023</footer> </blockquote>
长引用里的换行、缩进与排版控制
默认 blockquote 对长文本的换行表现正常，但遇到连续空格、制表符或硬回车，容易破坏阅读流。HTML 会合并空白符，所以别指望靠敲空格对齐；要用 CSS 控制。
- 避免在 HTML 源码里手动换行来模拟段落——浏览器不认这个逻辑
- 如果原文有特殊缩进（如诗歌、代码片段），改用
<pre><code>组合，再套blockquote - 行高、字体大小建议通过 class 控制，而非直接改
blockquote全局样式，避免影响其他引用
<blockquote class="poem"> <pre><code>山重水复疑无路， 柳暗花明又一村。</code></pre> </blockquote>
cite 属性和 footer 的实际作用差异
cite 属性只接受 URL，且不渲染为可见文本，仅供机器读取（如爬虫、屏幕阅读器）。而 <footer> 是可见的，适合放作者、书名、页码等信息。
-
cite值必须是有效 URL，填相对路径或空字符串都可能被忽略 - 同一引用中同时用
cite和<footer>是合理且推荐的组合 - 不要用
<cite>标签包裹整个引用——它只用于作品名称，比如书名、文章标题
错误示例：<cite><blockquote>…</blockquote></cite>
正确用法：<blockquote cite="https://example.org"><p>…</p><footer><cite>《重构》</cite>，Martin Fowler</footer></blockquote>
响应式与无障碍注意事项
长引用在小屏上容易撑破容器，尤其含长英文单词或未断行中文。同时，部分屏幕阅读器对 blockquote 的播报方式依赖语义完整性。
立即学习“前端免费学习笔记（深入）”；
- 给
blockquote加style="overflow-wrap: break-word;"或对应 CSS 类，防溢出 - 确保
cite属性值真实可访问，否则会误导辅助技术 - 如果引用内容本身含链接，检查其 contrast ratio 是否满足 WCAG 4.5:1，否则文字难辨
最常被忽略的一点：很多人把整篇转载文章包进一个 blockquote，这违反语义——它应只包裹被引用的那几段，而非全文。真正的“长篇引用”，是指单次引用内容较长，不是把别人整篇文章当引用塞进来。
