应使用表示独立成段的长引用，用于嵌入句中的短引用；必须包裹块级元素（如），是行内元素且浏览器自动加引号；出处需用显式标注，cite属性仅接受url且不显示。
引用块该用 <blockquote></blockquote> 还是 <q></q>
语义决定标签选择：<blockquote></blockquote> 用于**独立成段、可脱离上下文存在的长引用**，比如摘录整段文章、用户评论、法律条文；<q></q> 只适用于**嵌入在段落中、较短的内联引用**，且浏览器会自动添加引号（但不保证样式一致）。混用会导致语义错误，影响屏幕阅读器识别和 SEO。
-
<blockquote></blockquote>必须包裹完整引用内容，可嵌套<p></p>、<footer></footer>等，但不能直接放文本节点 -
<q></q>不应包含换行或段落，否则会被打断——它本质是“一句话里的引文” - 如果引用带出处，
<blockquote></blockquote>内用<footer></footer>（不是<cite></cite>）标注作者/来源，例如<footer>— 张三，《设计原则》，2024</footer> -
<cite></cite>只用于作品标题（如书名、文章名），不是人名或机构名；它不表示引用来源，仅标识被引用内容的原始出处名称
<blockquote></blockquote> 里要不要加 <cite></cite>？
不加。常见错误是写成 <blockquote>
<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>
<cite>张三</cite>
</blockquote>——这违反规范。<cite></cite> 的语义是“被引用作品的标题”，比如《Web 标准实践》；而作者名、时间、出处链接等元信息应放在 <footer></footer> 中，且 <footer></footer> 是 <blockquote></blockquote> 的合法子元素。
- 正确结构：
<blockquote> <p>语义化不是装饰，是基础设施。</p> <footer>— 李四，《前端语义手册》，2025</footer> </blockquote> -
<cite></cite>可以出现在<footer></footer>里，但仅当它是作品标题时，例如<footer>— 出自 <cite>HTML Living Standard</cite></footer> - 若需链接出处，把
<a></a>套在<footer></footer>文本内，不要包裹整个<blockquote></blockquote>
引用块的视觉样式与可访问性冲突点
CSS 重置引号或缩进时容易破坏辅助技术理解。浏览器默认给 <blockquote></blockquote> 加左缩进和斜体，但屏幕阅读器依赖这个结构标记来宣布“这是引用”，而不是靠样式。
- 禁用
font-style: normal或font-style: inherit覆盖默认斜体——除非你同时用 ARIA 属性明确声明角色，否则会削弱语义 - 用
margin-inline-start替代padding-left控制缩进，避免干扰焦点顺序和读屏顺序 - 不要给
<blockquote></blockquote>加role="quote"：它已有隐含 role，重复声明反而可能覆盖原生行为 - 若引用内容来自第三方 API 动态插入，确保 DOM 插入后仍保留完整结构（含
<footer></footer>），否则读屏软件可能跳过出处
嵌套引用或多人对话怎么处理
没有 <blockquote></blockquote> 的嵌套规范，W3C 明确不鼓励多层 <blockquote></blockquote>。真实场景中，所谓“引用中的引用”应拆解为逻辑分组，而非视觉嵌套。
- 多人对话用
<section></section>+ 多个<blockquote></blockquote>并列，每个配独立<footer></footer>，例如会议记录 - 引文里再引一句，优先用
<q></q>包裹内层短句，外层仍用<blockquote></blockquote> - 避免
<blockquote><blockquote>…</blockquote></blockquote>：它会让读屏软件误判层级，且无法准确传达引用关系 - 若必须强调某句被多次转引，用
<aside></aside>注释说明，而不是靠嵌套标签
<footer></footer> 漏写，或一个 <cite></cite> 误用，可能让整段引用在无障碍环境中失效——而这往往在开发阶段完全不可见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
