blockquote是语义化标签，表示引用内容，浏览器默认加左缩进和外边距但不加引号；需用footer标注出处，CSS生成引号以支持多语言，避免滥用影响可访问性。
blockquote 的基本语义和默认行为
blockquote 不是装饰性容器，而是语义化标签，表示“从别处引用的一段内容”。浏览器默认会给它加左缩进和上下外边距，但不自动添加引号，也不强制要求嵌套 cite。如果你只想要视觉上的“引用块”，直接用 blockquote 可能反而导致语义错误或样式意外。
常见误用：把一段自撰文案包进 blockquote 当作“高亮区块”——这会误导屏幕阅读器和搜索引擎。
如何正确添加引用来源（cite）
引用必须标注出处才完整。cite 元素应放在 blockquote 内部，通常紧贴末尾，但它不渲染为可见文本，仅作为元数据存在。要显示来源文字，得手动写进去，或者用 CSS 的 ::after 伪元素生成。
- 错误写法：
<blockquote cite="https://example.com">…</blockquote>——cite属性值不会显示 - 推荐写法：
<blockquote><p>内容…</p><footer>— 张三，《技术札记》，2024</footer></blockquote> - 兼容性提示：用
footer比用small或纯div更语义清晰，且现代浏览器支持良好
用 CSS 控制引号、缩进与边框效果
浏览器默认的左缩进不够明显，多数项目需要重置样式。关键点在于：引号必须用 CSS 生成，不能靠 HTML 字符硬编码，否则无法随语言切换（如中文用「」，英文用 “”）。
立即学习“前端免费学习笔记（深入）”；
blockquote {
margin: 1em 0;
padding-left: 1.2em;
border-left: 3px solid #ccc;
position: relative;
}
blockquote::before {
content: "“";
font-size: 2em;
line-height: 0.5;
position: absolute;
left: -0.5em;
top: -0.3em;
color: #999;
}
注意：::before 中的引号是英文直角引号，若需中文化，可用 content: "「"; 并配合 lang 属性做条件切换；line-height: 0.5 是为了压低引号位置，避免和首行文字错位。
响应式与可访问性容易被忽略的细节
移动端缩进过大会挤占内容宽度，而屏幕阅读器对 blockquote 有固定朗读提示（如“引用开始”），如果滥用会导致信息噪音。
- 响应式建议：在小屏下把
border-left改为border-top，并减小padding-left - 可访问性红线：不要给
blockquote加role="note"或aria-label—— 它已有原生语义，覆盖反而破坏体验 - 性能提醒：避免在
blockquote::before里用大图标字体或 SVG，会触发额外重绘
真正难的是判断“这段话到底算不算引用”——不是所有带破折号或斜体的文字都该塞进 blockquote。语义对了，样式才站得住脚。
