blockquote 默认不显示引号，需用 css 伪元素或手动添加；推荐 ::before/::after 插入中文“”或英文""，注意字体、字号、间距及嵌套语义，作者信息应使用 标签。
blockquote 默认不显示引号，必须用 CSS 或手动添加
浏览器对 <blockquote></blockquote> 的默认样式几乎都不渲染双引号——它只负责语义化标记引用内容，视觉装饰（比如首尾引号）得自己加。直接写 <blockquote>Hello</blockquote>，页面上就是干干净净一段文字，没引号。
常见错误是以为加了 <blockquote></blockquote> 就自动带引号，结果 QA 提出“引用没标点”，才发现漏了样式或 HTML 结构。
- 如果项目用 CSS 控制样式，推荐用
::before和::after伪元素插入 Unicode 引号（如"或更合适的“/”） - 如果需要兼容老浏览器（IE8 及以下），或者服务端渲染限制无法用伪元素，就老老实实把引号写进 HTML：
<blockquote>“这是一段引用。”</blockquote> - 注意中英文引号区别：中文语境优先用
“”（U+201C / U+201D），英文用" "（U+0022），混用会导致排版错位或字体 fallback 问题
用 CSS 伪元素加引号时，记得重置 margin 和 font-family
<blockquote></blockquote> 自带上下外边距（各 1em 左右），且默认继承父级字体。如果引用块嵌在正文里，又用了衬线字体配引号，但正文是无衬线体，视觉上会突兀。
典型易踩坑点：
- 忘记清除默认
margin，导致引用块和前后段落间距过大 - 伪元素引号用默认字体，而中文引号在某些系统字体里显示为方框或问号（尤其 macOS 上缺思源黑体时）
- 没设
font-family，导致“渲染成西文直角引号"
最小可用样式示例：
blockquote {
margin: 0.5em 0;
font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
}
blockquote::before {
content: "“";
font-family: "Noto Serif CJK SC", serif;
}
blockquote::after {
content: "”";
font-family: "Noto Serif CJK SC", serif;
}
嵌套引用或作者信息要用 cite 标签，别硬塞在 blockquote 里
如果引用后要跟作者名或来源，比如“——鲁迅《朝花夕拾》”，直接写在 <blockquote></blockquote> 内容末尾，语义不清晰，也不利于屏幕阅读器识别。
正确做法是用 <cite></cite> 标签包裹来源，并配合 CSS 定位：
<blockquote>真的猛士，敢于直面惨淡的人生。<cite>——鲁迅《记念刘和珍君》</cite> </blockquote>-
<cite></cite>默认是斜体，可覆盖font-style: normal避免风格冲突 - 若需右对齐作者信息，不要用
text-align: right，而是用display: flex; justify-content: flex-end或绝对定位，避免影响块级流布局
响应式下引号大小容易失衡，建议用 rem 或 em 单位控制
固定像素值（如 font-size: 16px）在移动端会让引号显得太大或太小，尤其当用户调整系统字号时。伪元素里的引号字号最好跟随 <blockquote></blockquote> 文本本身缩放。
- 给
blockquote设font-size: 1rem，伪元素引号用font-size: 1.2em（相对于父元素） - 避免用
vw，否则在窄屏下引号可能比正文还大 - 如果引用块内含多段落（
<p></p>），确保每段开头的引号只出现在第一段前，结尾引号只出现在最后一段后——这时不能只靠::before/::after，得用 JS 或更精细的 CSS 选择器控制
真正麻烦的从来不是加引号，而是让引号在各种字号、语言、设备下都稳住位置和比例。动手前先确认设计规范里对引号的字重、字高、字距有没有隐含要求，不然调完发现和 UI 稿差两像素，还得返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
