必须用<blockquote>引用独立成段、来自外部的非原创完整内容，如博客摘录、法律条文；它声明语义而非仅作样式，须含cite属性（有效URL）和<footer>标注可见出处，不可用<div>或<p>替代。
什么时候该用 blockquote 而不是 div 或 p
当你引用的是**独立成段、来自外部来源的完整内容**（比如摘录他人博客的一整段、法律条文节选、用户长评论），必须用 blockquote。它不是“看起来像引用”的视觉容器，而是向浏览器、搜索引擎和屏幕阅读器明确声明：“这段文字非我原创”。用 div 加 class="quote" 或硬缩进 p，语义上就失效了——读屏器不会提示“这是引用”，SEO 也无法识别引用关系。
- 正确结构必须包裹块级元素，如
p、footer，不能直接放纯文本 - 多段引用要拆成多个
p，否则段落边界对辅助技术不可见 - 如果只是想高亮一段自写文案，别用
blockquote，改用 CSS 类更安全
q 标签只适合嵌在句子里的短引文
q 是行内元素，浏览器默认会自动加英文双引号（部分中文浏览器支持本地化引号，但不保证）。它只适用于“一句话里插一句别人的话”这种场景，比如：
<p>他说<q>先跑通再优化</q>，我觉得有道理。</p></p> <ul> <li>不能换行，不能包含 <code>p、
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，避免缩进挤占宽度
