最稳妥方案是用<blockquote>加CSS边框，但必须规范语义结构：段落用<p>包裹、cite属性填真实URL、来源放<footer><cite>中，边框推荐border-left+padding-left，深色模式需适配颜色与圆角。
直接用 <blockquote> + CSS 边框是最稳妥的方案，但必须按语义规范写结构，否则屏幕阅读器会读错、SEO 会丢权重、移动端可能错位。
为什么不能只用 div + border 套名言
很多人图省事写 <div class="quote">…</div> 再加边框，这在视觉上能凑合，但实际埋了三个坑：
-
<blockquote>是唯一语义上表示“引用外部内容”的 HTML 元素，搜索引擎和辅助技术靠它识别引文来源 - 裸
<div>没有默认 margin/padding，不同浏览器渲染差异大，<blockquote>有 UA 样式兜底（比如上下 1em 间距） - 如果未来要加
cite属性或<footer>来源，<div>不支持cite，强行加也无效
正确的 blockquote 结构怎么写
必须满足三点：段落用 <p> 包裹、cite 属性填 URL、来源信息放 <footer> 里。错误写法如 <blockquote>第一段。第二段。</blockquote> 或 cite="《论语》" 都会导致校验失败或语义断裂。
- 每段引文独立用
<p>，哪怕只有一段也要包一层 -
cite只接受可访问的 URL，例如cite="https://ctext.org/analects"，不是书名也不是人名 - 可见的来源文字必须放在
<blockquote>内部末尾，且用<footer><cite>《论语·学而》</cite></footer>，<cite>仅用于作品名/网址，不塞人名或日期
边框样式怎么加才不破坏语义
边框本身不影响语义，但加的位置和方式会影响可维护性与响应式表现。推荐直接作用于 <blockquote> 元素，避免套多余 wrapper。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 用
border-left: 4px solid #4a6fa5比四边全加更轻量，也更接近传统引文排版习惯 - 配合
padding-left: 1.5rem防止文字贴边，数值要大于 border 宽度 - 别用
background-image模拟边框——虽然能做花哨效果，但会干扰文字选中、复制和高对比度模式适配 - 如果要用装饰性 PNG 边框（比如手绘相框），必须用
<div>包住<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"），也不能留空或填虚构字符串；否则这段引用在机器眼里等于没出处。
