最稳妥方案是用加css边框，但必须规范语义结构：段落用包裹、cite属性填真实url、来源放中，边框推荐border-left+padding-left，深色模式需适配颜色与圆角。
直接用 <blockquote></blockquote> + CSS 边框是最稳妥的方案，但必须按语义规范写结构，否则屏幕阅读器会读错、SEO 会丢权重、移动端可能错位。
为什么不能只用 div + border 套名言
很多人图省事写 <div class="quote">…</div> 再加边框，这在视觉上能凑合，但实际埋了三个坑：
-
<blockquote></blockquote>是唯一语义上表示“引用外部内容”的 HTML 元素，搜索引擎和辅助技术靠它识别引文来源 - 裸
<div> 没有默认 margin/padding，不同浏览器渲染差异大，<code><blockquote></blockquote>有 UA 样式兜底（比如上下 1em 间距） - 如果未来要加
cite属性或<footer></footer>来源，<div> 不支持 <code>cite，强行加也无效正确的 blockquote 结构怎么写
必须满足三点：段落用
<p></p>包裹、cite属性填 URL、来源信息放<footer></footer>里。错误写法如<blockquote>第一段。第二段。</blockquote>或cite="《论语》"都会导致校验失败或语义断裂。- 每段引文独立用
<p></p>，哪怕只有一段也要包一层 -
cite只接受可访问的 URL，例如cite="https://ctext.org/analects"，不是书名也不是人名 - 可见的来源文字必须放在
<blockquote></blockquote>内部末尾，且用<footer><cite>《论语·学而》</cite></footer>，<cite></cite>仅用于作品名/网址，不塞人名或日期
边框样式怎么加才不破坏语义
边框本身不影响语义，但加的位置和方式会影响可维护性与响应式表现。推荐直接作用于
<blockquote></blockquote>元素，避免套多余 wrapper。- 用
border-left: 4px solid #4a6fa5比四边全加更轻量，也更接近传统引文排版习惯 - 配合
padding-left: 1.5rem防止文字贴边，数值要大于 border 宽度 - 别用
background-image模拟边框——虽然能做花哨效果，但会干扰文字选中、复制和高对比度模式适配 - 如果要用装饰性 PNG 边框（比如手绘相框），必须用
<div> 包住 <code><blockquote></blockquote>，且确保<blockquote></blockquote>本身仍保持语义完整、无障碍可读移动端和深色模式要注意什么
边框颜色在深色背景下容易看不见，纯
#000在黑底上就是消失。这不是小问题，而是直接影响可读性。- 优先用
currentColor或 CSS 变量，比如border-color: var(--quote-border, #4a6fa5)，方便主题切换时统一改 - 避免固定像素值写死圆角，
border-radius: 0.25rem比4px更适应缩放 - 在深色模式下，
background和border-color必须同时调整，否则出现“白底灰框”或“黑底无框” - 测试时真机打开系统深色开关，别只靠浏览器模拟器——部分安卓 WebView 对
@media (prefers-color-scheme)支持不全
最易被忽略的是
cite属性的 URL 必须真实可访问，哪怕只是指向自己页面的锚点（如cite="#lunyu-1-1"），也不能留空或填虚构字符串；否则这段引用在机器眼里等于没出处。 - 优先用
- 每段引文独立用
