<blockquote>必须嵌套<p>等流内容元素，不可直接放文本；多段需独立<p>，cite仅支持URL，人类可读出处用<footer><cite>；引号须伪元素添加，样式需重置子元素而非父级。
blockquote 是唯一语义正确、可访问、可被爬虫识别的引用容器，直接用 <div class="quote"> 或加 margin-left 模拟缩进，等于放弃结构价值和辅助技术支持。
为什么不能直接写 <blockquote>文字</blockquote>
浏览器能渲染，但会出三类问题：
— 屏幕阅读器把多段连读成一句，无法停顿；
— CSS 无法单独控制第二段的 margin-top 或 text-indent；
— XHTML strict 模式或部分 CMS（如 WordPress 的 block editor 后端校验）会报错。
根本原因是：HTML 规范要求 blockquote 的内容模型是“流内容”，而纯文本不属于流内容——它必须包裹在 p、h4、pre 等合法子元素中。
blockquote 必须嵌套 p，且每段独立
正确写法只有一种：
— 每个自然段用一个 p 包裹；
— p 是 blockquote 的直接子元素；
— 多段引用之间不靠空行或 br 分隔。
<blockquote cite="https://example.com/source"> <p>这是第一段引用内容，逻辑完整、独立成意。</p> <p>这是第二段，同样应具备语义完整性。</p> </blockquote>
若引用内含代码、小标题或列表，可合法嵌套 pre、h4、ol，只要它们不破坏上下文逻辑。
立即学习“前端免费学习笔记（深入）”；
cite 属性只认 URL，人类可读出处得手动加
cite 是机器元数据，不是显示文案：
— 值必须是绝对 URL（cite="https://..."）或相对路径（cite="/doc/123"），填书名、人名或中文地址直接失效；
— 浏览器不渲染它，document.querySelector('blockquote').cite 返回空字符串；
— 用户想看到“出自《史记》卷七”，必须手动加 footer + cite：
<blockquote cite="https://zh.wikisource.org/wiki/史记/卷07"> <p>项王笑曰：“天之亡我，我何渡为！”</p> <footer>— <cite>《史记·项羽本纪》</cite></footer> </blockquote>
footer 必须是 blockquote 的直接子元素；cite 标签只用于作品名、文章名、网站名，不用于人名（人名用普通文本）。
样式重置优先动 margin，引号得靠伪元素手动加
浏览器默认给 blockquote 加左右外边距（Chrome/Firefox 约 40px），不是 padding，也不是 text-indent：
— 首行缩进请用 p 上的 text-indent: 2em，别碰 blockquote；
— 引号必须用 ::before/::after 伪元素添加，CSS 不提供自动引号开关；
— 若需竖排引用，writing-mode: vertical-rl 必须配合 text-orientation: upright，否则英文字母堆叠成列。
最容易被忽略的是：所有 blockquote 子元素（包括 p、footer）的 margin 和 line-height 都要单独控制——父级 blockquote 不继承也不透传这些样式。
