应重置<hr />样式：清除默认边框，用height+background或border-top控制线条，设margin规范间距，并依语义决定是否选用<hr />——主题切换用<hr />，纯视觉分隔优先用border-bottom。
用 <hr> 标签插入分隔线，但默认样式太丑怎么办
直接写 <hr> 会渲染出一条细、浅灰、带阴影的线，现代设计里基本没法直视。它不是“不能用”，而是浏览器给的默认样式（比如 Chrome 用 border: none; border-top: 1px solid #ccc;）和语义理解已经过时——<hr> 的本意是“段落级主题切换”，不是“画条线”。所以实际项目中，你得主动重置样式，否则容易和周围文字行高、间距打架。
常见错误现象：<hr> 紧贴上一段末尾，看起来像粘连；或在 Flex/Grid 容器里突然塌陷、消失；又或者在移动端缩放后变虚、错位。
- 必须显式设置
margin，尤其上下外边距，否则和段落margin-bottom叠加导致空白过大 - 禁用默认
border，改用background或伪元素控制颜色/粗细，兼容性更稳 - 在 CSS 重置文件里统一处理，比如全局写
hr { margin: 1.5rem 0; border: 0; height: 1px; background: #e0e0e0; }
<hr> 和 border-bottom 选哪个更合适
取决于语义和布局上下文。如果分隔的是两个逻辑独立的区块（比如文章正文与评论区），<hr> 是语义正确的选择；如果只是某个标题下方加一道线（如卡片标题下划线），用 border-bottom 更自然、可控性强。
性能与兼容性影响不大，但注意：在 Grid/Flex 子项中，<hr> 默认是块级，可能触发额外的布局计算；而 border-bottom 是纯装饰，不参与文档流。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
<hr>时，确保父容器没有overflow: hidden或transform，否则可能被裁切 - 用
border-bottom时，别忘了给目标元素设padding-bottom，否则线会压住文字 - 不要为了“省一个标签”把
<hr>塞进<h2>里——HTML5 不允许嵌套，会破坏可访问性
响应式分隔线怎么写才不崩
纯 CSS 方案最可靠。避免用图片或 SVG 当分隔线（增加请求、难适配），也别依赖 JS 动态插入——<hr> 本身是静态语义元素，响应式该由 CSS 承担。
关键点在于：线的高度、颜色、间距都要随视口变化，而不是固定像素值。
- 用
rem或em控制margin，比如margin: 2rem 0;，比32px更易维护 - 颜色建议用 CSS 变量，方便暗色模式切换：
background: var(--divider-color, #e0e0e0); - 需要“渐隐”效果？别用
opacity（会影响整个元素），改用background: linear-gradient(to right, #e0e0e0, transparent 70%);
无障碍和 SEO 里 <hr> 容易被忽略的细节
屏幕阅读器会把 <hr> 读作“水平规则”或“分隔线”，这是它的价值所在；但如果滥用（比如每两行文字就插一个），反而干扰用户。搜索引擎不抓取 <hr> 内容，但它能强化页面结构信号——合理使用有助于理解内容层级。
真正容易被忽略的是：没有 role 或 aria- 属性的 <hr> 在部分旧读屏软件中可能被跳过，或误读为装饰元素。
- 不需要额外加
role="separator"（HTML5 已内置语义），但别给它加aria-hidden="true" - 如果分隔线承载了信息（比如“广告分隔线”），那就不是
<hr>的场景，该用带文本的<div>+aria-label - 测试方法：用 Chrome 开发者工具打开 Lighthouse，跑一次“无障碍”审计，看是否有 “
<hr>element does not have a discernible name” 报错
