HTML中blockquote和q标签的不同之处

<q>用于嵌入句中、不打断段落流的简短引用，是行内元素，浏览器自动添加引号；<blockquote>用于独立摘录的块级内容，必须包含至少一个块级子元素（如<p>），语义为外部完整引述；cite属性仅限二者使用，值须为URL，供机器解析而非显示。

别用 <q> 包三行文字，也别把整段诗塞进 <blockquote> 里当装饰——语义错位会导致屏幕阅读器读错、SEO 识别失败、CSS 控制失灵。

什么时候该用 <q> 而不是 <blockquote>

看引用是否「嵌在句子中间、不打断段落流」。<q> 是行内元素，天生不会换行，浏览器自动加引号（如 “今晚吃火锅”），适合一句话里插一句别人的话。

• ✅ 正确场景：<p>鲁迅说<q>世上本没有路，走的人多了，也便成了路</q></p>
• ❌ 错误做法：用 <q> 包含多段、带换行的文本——浏览器可能不渲染引号，辅助技术会当成单句朗读
• ⚠️ 注意：<q> 的引号由浏览器和语言环境决定（中文可能是「」或“”），不能靠 content 伪元素直接覆盖；若需精确样式，得配合 quotes 属性，但已偏离语义初衷

<blockquote> 必须包裹块级内容吗？

是的。它的语义是「从外部独立摘录的一段完整内容」，不是为了视觉缩进而存在。HTML5 规范要求它内部至少包含一个块级元素（比如 <p>），否则在 strict XHTML 下验证失败。

• ✅ 推荐写法：<blockquote><p>床前明月光，疑是地上霜。</p></blockquote>
• ❌ 常见错误：直接写 <blockquote>文本文本</blockquote>——部分浏览器兼容性差，屏幕阅读器可能忽略语义
• ? 性能提示：不要为纯样式目的用 <blockquote>；它自带 margin，若只想要缩进，请用 <div> + CSS

cite 属性到底该写在哪、有没有用

cite 只能写在 <blockquote> 或 <q> 标签上，值必须是 URL（不是作者名、书名或日期），它是机器可读的元数据，对 SEO 和屏幕阅读器有意义，但**不显示在页面上**。

立即学习“前端免费学习笔记（深入）”；

• ✅ 合法且有用：<blockquote cite="https://example.com/2024-report"><p>数据表明……</p></blockquote>
• ❌ 混淆写法：<cite>《思考，快与慢》</cite> 是作品标题标签，不能放 URL；<blockquote cite="鲁迅"> 这种写法无效
• ⚠️ 兼容提醒：IE 系列完全不支持 cite 属性渲染，Chrome/Firefox 也不显示，但它仍会被爬虫和读屏软件解析——别省略，但别指望用户看见

最常被忽略的一点：语义一旦写错，后续用 CSS 或 JS 补救成本远高于初始选对标签。比如想给 <q> 加背景图，结果发现它是行内元素、无法设宽高；又比如用 <blockquote> 包单个词，导致布局意外换行、margin 挤占空间——这些都不是 bug，是语义误用的自然结果。