必须用引用独立成段、来自外部的非原创完整内容，如博客摘录、法律条文；它声明语义而非仅作样式，须含cite属性（有效url）和标注可见出处，不可用或替代。
什么时候该用 blockquote 而不是 div 或 p
当你引用的是**独立成段、来自外部来源的完整内容**（比如摘录他人博客的一整段、法律条文节选、用户长评论），必须用 blockquote。它不是“看起来像引用”的视觉容器，而是向浏览器、搜索引擎和屏幕阅读器明确声明：“这段文字非我原创”。用 div 加 class="quote" 或硬缩进 p，语义上就失效了——读屏器不会提示“这是引用”，SEO 也无法识别引用关系。
- 正确结构必须包裹块级元素，如
p、footer，不能直接放纯文本 - 多段引用要拆成多个
p，否则段落边界对辅助技术不可见 - 如果只是想高亮一段自写文案，别用
blockquote，改用 CSS 类更安全
q 标签只适合嵌在句子里的短引文
q 是行内元素，浏览器默认会自动加英文双引号（部分中文浏览器支持本地化引号，但不保证）。它只适用于“一句话里插一句别人的话”这种场景，比如：
<p>他说<q>先跑通再优化</q>，我觉得有道理。</p>
- 不能换行，不能包含
p、<code>br等块级或换行标签 - 若需标注出处，用
cite包裹作品名，例如<q>人生苦短</q>，<cite>Python 官方文档</cite> - 不要用
q替代blockquote来塞整段话，这会让语义混乱，屏幕阅读器可能跳过或误读
出处信息必须用 footer，不是 cite 属性也不是 cite 标签
blockquote 的 cite 属性只接受 URL，且不显示；而人类可见的作者、书名、时间等，必须放在 footer 里。这是 HTML5 明确规定的合法子元素，语义清晰、兼容性好。
- 错误写法：
<blockquote cite="https://example.com"> <p>...</p> <cite>张三</cite> </blockquote>——cite标签在这里语义错误（它只用于作品标题） - 正确写法：
<blockquote cite="https://example.com"> <p>语义化是基础设施。</p> <footer>— 李四，《前端语义手册》，2025</footer> </blockquote> - 若要突出作品名，可在
footer内嵌cite，例如<footer>出自 <cite>HTML Living Standard</cite></footer>
CSS 控制样式时，引号必须用伪元素生成
别手动在 HTML 里写「」或“”，否则复制文本会带上引号，i18n 场景下引号方向错乱，还污染语义。浏览器默认不给 blockquote 加引号，所以得靠 ::before 和 ::after。
- 关键样式只需三处：
border-left、margin、padding-left，其他继承父级即可 - 中文化引号用
content: "「"，配合lang="zh"可做条件切换 - 移动端建议把
border-left改为border-top，避免缩进挤占宽度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
