语义化引用必须同时使用和，cite提供机器可读来源URL，footer呈现人类可读署名；长引用需嵌套保留格式；行内短引用用而非。
blockquote 必须带 cite 属性，否则不是语义化引用
只写 <blockquote>文字</blockquote> 是错的。浏览器和读屏器不认为这是真实引用，Lighthouse 会报可访问性问题，SEO 也不识别来源。cite 属性必须填合法 URL（如 https://example.com/article/42），不能是空字符串、相对路径或中文描述。
常见错误现象：
– 页面里一堆 <blockquote></blockquote> 但没 cite，被当成装饰性缩进
– 填了 cite="张三《前端手册》" —— 这不是 URL，无效
– 复制公众号文章后全塞进一个 <blockquote></blockquote>，无出处、无机器可读标识
- 正确做法：每个
<blockquote></blockquote>对应一个明确外部来源，cite指向该来源唯一 URL - 如果引用来自本地 PDF 或未上线文档，先上传到公开可访问地址再填 URL
- 多个段落直接用
<p></p>套在<blockquote></blockquote>内，别用<br>或空行模拟
footer 必须显式标注作者、书名、年份等可见信息
<footer></footer> 是用户看得见的署名区，不是可选配件。它和 cite 属性分工明确：cite 供机器读取，<footer></footer> 供人阅读。两者同时存在才是完整引用。
典型误用：
– 只写 <footer>— 来源：某公众号</footer>，没作者、没时间、没作品名
– 把整段引用包在 <cite></cite> 里：<cite><blockquote>...</blockquote></cite> —— <cite></cite> 只能用于作品名，比如书名或文章标题
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 推荐格式：
<footer>— 李四，《现代 Web 开发》，2025 年第 2 版，第 87 页</footer> - 如果引用自网页，
<footer></footer>里可用<cite></cite>包裹标题，如：<footer>— 王五，<cite>CSS Grid 实战指南</cite>，MDN Web Docs，2026</footer> - 避免在
<footer></footer>里放链接 —— 那是cite的职责；也别用<a></a>包住整个<footer></footer>
长引用含代码、诗歌或终端输出时，必须嵌套 pre+code
普通 <blockquote></blockquote> 会合并空白符，导致缩进丢失、换行错乱。遇到依赖格式的内容（如 JSON 片段、命令行输出、古诗排版），不能靠敲空格或 <br> 强行对齐。
错误示例：
– 把一段 Python 代码直接塞进 <p></p> 里，缩进全塌陷
– 用多个 模拟诗歌空格 —— 响应式下完全不可控
- 正确组合：
<blockquote cite="https://example.com/json-spec"><pre class="brush:php;toolbar:false;"><code>{ "status": "ok", "data": [] }</code></pre><footer>— RFC 8259, Section 2, 2017</footer> </blockquote> -
<pre class="brush:php;toolbar:false;"></pre>保留原始换行与空格，<code>表明这是计算机内容（利于语法高亮和可访问性） - 建议加 class 控制字体，例如
<pre class="code-block"></pre>，再用 CSS 设font-family: monospace
别把 q 当成短版 blockquote 来滥用
<q></q> 是为行内一句话引用设计的，比如对话、格言、术语定义。它由浏览器自动添加引号（支持 CSS 自定义样式），语义清晰且轻量。硬套 <blockquote></blockquote> 反而破坏结构。
典型场景踩坑：
– 在段落中写“他说：<blockquote>今天上线</blockquote>”——这会让 DOM 层级混乱，屏幕阅读器误判为独立区块
– 把列表项里的引文全用 <blockquote></blockquote> 包裹，只为视觉缩进
- 该用
<q></q>的情况：<p>文档指出：“<q>所有 API 必须返回 JSON</q>”。</p> - 不要给
<q></q>加cite属性 —— 它不支持；需要出处时，改用<blockquote></blockquote>+footer - 如果引用内容含标点（如句号在引号内），
<q></q>会自动处理，无需手动加引号
最常被忽略的一点：blockquote 不是样式工具。缩进、边框、背景色这些都该交给 CSS，而不是靠嵌套多个 blockquote 或加空 <div> 来凑效果。语义归语义，表现归表现，混着用迟早出 accessibility 和 SEO 问题。</div>
