在HTML中，`
元素通过属性定义样式，传统属性如width（宽度百分比）、size（像素厚度）、color（颜色）和align（对齐方式），但HTML5已废弃这些属性，推荐使用CSS替代，`实现样式控制。在HTML中,<hr>（水平分割线）是一个自闭合标签，用于在内容中创建主题分隔线，随着HTML5的语义化升级，其属性定义发生了显著变化，以下是详细说明：
核心属性（HTML5标准）
-
全局属性
支持所有HTML全局属性（适用于所有HTML元素的通用属性）：<hr id="section-break" class="divider" title="内容分隔线" data-type="separator">
id：唯一标识符class：CSS类名style：行内CSS样式data-*：自定义数据属性
-
语义化属性（无视觉控制）
HTML5移除了所有样式相关属性，仅保留语义化功能：<hr aria-label="章节分隔"> <!-- 为屏幕阅读器提供说明 -->
已废弃属性（避免使用）
以下为HTML4旧属性,在HTML5中无效，需用CSS替代：
| 废弃属性 | 作用 | CSS替代方案 |
|---|---|---|
width |
宽度 | width: 50%; |
size |
高度 | height: 4px; |
color |
颜色 | background-color: #00f; |
align |
对齐 | margin-left: auto; margin-right: 0; |
noshade |
无阴影 | border: none; background: #000; |
现代实践方案（CSS样式化）
通过CSS完全控制样式：
hr.custom {
height: 3px;
background: linear-gradient(90deg, red, blue);
border: 0; /* 清除默认边框 */
border-radius: 10px;
margin: 2rem auto; /* 垂直间距和水平居中 */
width: 80%;
}
<hr class="custom">
语义化使用规范
-
正确场景
- 段落间的主题转换（如文章章节切换）
- 表单中不同区块的分隔
<section>...</section> <hr aria-hidden="true"> <!-- 对辅助工具隐藏 --> <section>...</section>
-
错误用法
- 仅作视觉装饰（应使用
border或伪元素） - 布局结构分隔（应使用
<div>+CSS布局）
- 仅作视觉装饰（应使用
浏览器兼容性
所有现代浏览器（Chrome/Firefox/Safari/Edge）均支持HTML5标准，旧属性在IE10+中部分支持但不推荐。
关键结论：
- 仅使用全局属性和ARIA属性
- 所有视觉样式通过CSS实现
- 遵循语义化原则：用
<hr>主题分隔而非装饰线
引用说明依据MDN Web Docs和W3C HTML5规范整理，遵循现代Web标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/32950.html
