应避免滥用<hr>，它仅适用于主题段落间的语义分隔；多数视觉分隔需求应使用<div class="divider">配合CSS实现，兼顾样式可控性、可访问性与暗色模式支持。
<hr> 不该再用作视觉分隔线了——它语义上表示“主题段落间的分隔”，不是装饰性线条。现代页面里直接写 <hr> 往往导致语义混乱、可访问性下降，且样式控制僵硬。
为什么 <hr> 在多数场景下不合适
浏览器默认把 <hr> 渲染为带阴影的灰色粗线，但它的 ARIA role 是 separator，屏幕阅读器会播报“分隔线”。如果只是想在两个模块间加一条细线（比如卡片底部、菜单项之间），它就过度语义化了；反过来，真要表达内容主题切换时，又常被开发者忽略或滥用。
- 语义错位：用在导航栏分割、表单分组线等地方，实际并无“主题切换”含义
- 样式难收敛：不同浏览器对
<hr>的 margin、border、height 默认值不一致（Chrome 默认margin: 1em 0，Firefox 更大） - 无法响应式缩放：纯 CSS 覆盖后易丢失可访问性属性（如
role和焦点管理）
用 <div> + CSS 实现真正可控的水平线
95% 的视觉分隔需求，应该用无语义的 <div> 或 <span> 配合 class 控制。关键不是“怎么画一条线”，而是“这条线在什么上下文里出现、是否需要语义、是否要适配暗色模式”。
- 最简方案：
<div class="divider"></div>，CSS 写.divider { height: 1px; background: #e0e0e0; margin: 1rem 0; } - 需支持暗色模式：用
color-scheme: light dark或媒体查询，避免写死#e0e0e0 - 需要点击交互（如展开/收起区域）：加
tabindex="0"和role="button"，不能只靠视觉 - 嵌入行内（如文字中间加线）：用
<span class="inline-divider"></span>+display: inline-block; vertical-align: middle;
何时仍该保留 <hr>？
只有当 HTML 结构本身确实在切换话题、章节或逻辑区块时，才用 <hr>。典型场景极少，比如长篇博客中“作者说明”和正文之间的分隔，或法律条款文档里不同条款间的断点。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须出现在流内容中（不能在
<header>或<nav>内部滥用） - 前后应是不同主题的
<section>、<article>或连续段落 - 若用在
<details>/<summary>后，需确认摘要与详情确属不同语义层级
React/Vue 中封装分隔线组件的注意点
组件名别叫 HrLine 或 Separator——容易诱导使用者误以为它语义等价于 <hr>。推荐命名如 VisualDivider 或 SectionDivider，并在 props 明确区分：
-
variant="thin" | "thick" | "dashed"—— 控制视觉样式 -
semantic={false}（默认） vssemantic={true}—— 真需要语义时才渲染<hr>，否则用<div> -
aria-label仅当semantic={true}且上下文缺失标题时才允许传入（例如盲文阅读器需额外提示）
复杂点往往不在“画线”，而在于判断这条线到底承不承担语义责任。很多人删掉 <hr> 后改用 <div>，却忘了同步移除旧的 ARIA 属性或焦点逻辑——那只是把语义错误从标签挪到了 JS 里。
