是唯一语义正确、浏览器原生支持的主题分隔符，用于标识内容主题切换，提升可访问性与seo；必须用css定制样式，禁用旧属性，避免滥用。
<hr> 是唯一标准、语义正确且浏览器原生支持的水平线插入方式。别用 <div style="border-top: 1px solid #ccc"></div> 或伪元素模拟——除非你明确不需要语义，只图视觉效果。
为什么必须用 <hr> 而不是 CSS border
它不是“画一条线”，而是告诉浏览器：“这里发生了主题切换”。屏幕阅读器会播报“thematic break”，搜索引擎能识别内容结构变化，<hr> 在可访问性和 SEO 上有隐式价值。用 border 模拟，等于把语义丢进垃圾桶；用 <hr> 再加 CSS 样式，才是正解。
<hr> 的写法和兼容性要点
现代 HTML5 中只接受 <hr>（无斜杠），不要写 <hr> 或 <hr> ——XHTML 风格在纯 HTML5 页面里多余，还可能在某些旧构建工具中触发警告。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 它必须是块级元素，前后自动换行，不能被
display: inline强行压成一行 - 不接受
width、size、color等旧属性，写了也无效 - 所有样式必须走 CSS：
height、background、border、margin都可以，但注意：设height时默认border会叠加，建议统一用border-bottom或background控制线条
常见样式自定义陷阱
直接写 hr { height: 2px; background: #007bff; } 看似合理，但多数浏览器默认给 <hr> 加了 border: none 和 margin，实际高度常被撑开或截断。更稳的写法是：
hr {
border: none;
height: 2px;
background: #007bff;
margin: 1.5rem auto;
}
- 务必清掉默认
border，否则新旧样式打架 - 用
background而非border更易控制粗细和颜色一致性 - 移动端记得加
max-width或width: 90%，避免窄屏下溢出 - 若要虚线/双线/渐变，优先用
background: linear-gradient(...)或border-image，比多层border更可控
什么时候不该用 <hr>
仅为了在两个 <div> 之间加一条线，且上下文毫无主题切换（比如表单里两个输入框之间），这时候 <code><hr> 反而污染语义。换成 <div class="divider"></div> + CSS 更干净。判断依据就一条：删掉这条线，用户是否会觉得“这两块内容突然连在一起、逻辑断裂了？”——如果是，就该用 <hr>；如果只是“看起来空一点”，那就别硬套。
