用于嵌入句中、不打断段落流的简短引用，是行内元素，浏览器自动添加引号；用于独立摘录的块级内容，必须包含至少一个块级子元素（如），语义为外部完整引述；cite属性仅限二者使用，值须为url，供机器解析而非显示。
别用 <q></q> 包三行文字，也别把整段诗塞进 <blockquote></blockquote> 里当装饰——语义错位会导致屏幕阅读器读错、SEO 识别失败、CSS 控制失灵。
什么时候该用 <q></q> 而不是 <blockquote></blockquote>
看引用是否「嵌在句子中间、不打断段落流」。<q></q> 是行内元素，天生不会换行，浏览器自动加引号（如 “今晚吃火锅”），适合一句话里插一句别人的话。
- ✅ 正确场景：
<p></p>鲁迅说<q></q>世上本没有路，走的人多了，也便成了路 - ❌ 错误做法：用
<q></q>包含多段、带换行的文本——浏览器可能不渲染引号，辅助技术会当成单句朗读 - ⚠️ 注意：
<q></q>的引号由浏览器和语言环境决定（中文可能是「」或“”），不能靠content伪元素直接覆盖；若需精确样式，得配合quotes属性，但已偏离语义初衷
<blockquote></blockquote> 必须包裹块级内容吗？
是的。它的语义是「从外部独立摘录的一段完整内容」，不是为了视觉缩进而存在。HTML5 规范要求它内部至少包含一个块级元素（比如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>），否则在 strict XHTML 下验证失败。
- ✅ 推荐写法：
<blockquote><p></p></blockquote>床前明月光，疑是地上霜。 - ❌ 常见错误：直接写
<blockquote></blockquote>文本文本——部分浏览器兼容性差，屏幕阅读器可能忽略语义 - ? 性能提示：不要为纯样式目的用
<blockquote></blockquote>；它自带 margin，若只想要缩进，请用<div> + CSS <h3> <code>cite属性到底该写在哪、有没有用cite只能写在<blockquote></blockquote>或<q></q>标签上，值必须是 URL（不是作者名、书名或日期），它是机器可读的元数据，对 SEO 和屏幕阅读器有意义，但**不显示在页面上**。- ✅ 合法且有用：
<blockquote cite="https://example.com/2024-report"><p></p></blockquote>数据表明…… - ❌ 混淆写法：
<cite></cite>《思考，快与慢》是作品标题标签，不能放 URL；<blockquote cite="鲁迅"></blockquote>这种写法无效 - ⚠️ 兼容提醒：IE 系列完全不支持
cite属性渲染，Chrome/Firefox 也不显示，但它仍会被爬虫和读屏软件解析——别省略，但别指望用户看见
最常被忽略的一点：语义一旦写错，后续用 CSS 或 JS 补救成本远高于初始选对标签。比如想给
<q></q>加背景图，结果发现它是行内元素、无法设宽高；又比如用<blockquote></blockquote>包单个词，导致布局意外换行、margin 挤占空间——这些都不是 bug，是语义误用的自然结果。 - ✅ 合法且有用：
