blockquote 是唯一语义正确的名言包裹方式，必须用 p 包裹每段引文，出处放 footer 中，cite 仅用于作品名且需配合 url 属性。
用 blockquote 而不是 div 或 p 包裹名言
直接用 blockquote 是唯一语义正确的方式。它告诉浏览器、搜索引擎和屏幕阅读器：“这段内容引自别处”，不是你写的原创文字。用 div class="quote" 看起来像，但机器读不懂——SEO 权重归零，视障用户可能跳过整段。
常见错误现象：
– <div>真正的勇气是面对恐惧依然前行。</div>
– <p class="quote">...</p>
– 把多段引文直接写在 blockquote 里不套 p，导致语义断裂、CSS 难控制行距
- 每段自然段必须用
p显式包裹：<blockquote> <p>第一段。</p> <p>第二段。</p> </blockquote> - 即使只有一段，也建议包一层
p，避免未来扩展时结构不一致 - 别用
\n或空格模拟换行——那只是视觉假象，无障碍和校验器都会报错
出处信息必须放 footer，cite 只能标作品名
footer 是 blockquote 的合法子元素，专用于放作者、时间、来源说明等元信息；cite 则只能出现在 footer（或段落）内部，且仅限书名、文章名、电影名这类作品标题。
错误写法：
– <cite>曼德拉</cite>（人名不能套 cite）
– <blockquote cite="《曼德拉自传》">...</blockquote>（cite 属性必须是 URL，不是书名）
- 正确结构：
<blockquote> <p>真正的勇气…</p> <footer>— <cite>《漫漫自由路》</cite>, 纳尔逊·曼德拉</footer> </blockquote> -
cite不自动加斜体，如需样式，用 CSS 控制cite { font-style: italic; } - 如果出处是网页，
cite值应为真实 URL：cite="https://www.nelsonmandela.org/quotes"
边框、缩进、引号全靠 CSS 控制，别信浏览器默认
浏览器对 blockquote 的默认渲染差异极大：Chrome 加左竖线，Firefox 不加，Safari 默认缩进值也不统一。想“看起来优雅”，必须显式写 CSS。
容易踩的坑：
– 直接依赖 margin-left 默认值，移动端缩进过大挤出屏幕
– 用 ::before 加引号却写 content: '"';，结果中文显示半角双引号
– 给整个 blockquote 设 font-style: italic，把正文也变斜体（那是 cite 的事）
- 推荐基础样式：
blockquote { margin: 1em 0; padding-left: 1.5rem; border-left: 3px solid #4a6fa5; } - 中文引号务必用全角：
blockquote::before { content: "“"; }、blockquote::after { content: "”"; } - 限制宽度提升可读性：
blockquote { max-width: 60ch; }（ch是字符单位，比px更适应字体缩放）
cite 属性不是摆设，但填错等于没填
cite 是 blockquote 和 q 的原生属性，但它不显示在页面上，只供爬虫和辅助技术解析。填错格式，就等于放弃机器可读性。
典型错误：
– cite="张三"（人名，非 URL）
– cite="第3章"（片段标识，不可访问）
– cite="book.pdf"（本地路径，无网络可溯源）
- 必须是可访问的 URL，哪怕只是锚点：
cite="#section-intro"或cite="https://example.com/quotes#mandela" - 静态站点中，优先用绝对 URL，避免部署后 404
- 不填
cite不报错，但引用失去 SEO 权重和辅助技术上下文，实际效果接近裸文本
blockquote。用 div + class 配合清晰注释，反而更诚实。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
