HTML中hr属性如何定义？

在HTML中,<hr>（水平分割线）是一个自闭合标签，用于在内容中创建主题分隔线，随着HTML5的语义化升级，其属性定义发生了显著变化，以下是详细说明：

核心属性（HTML5标准）

1. 全局属性
   支持所有HTML全局属性（适用于所有HTML元素的通用属性）：

   <hr id="section-break" class="divider" title="内容分隔线" data-type="separator">

   • id：唯一标识符
   • class：CSS类名
   • style：行内CSS样式
   • data-*：自定义数据属性

2. 语义化属性（无视觉控制）
   HTML5移除了所有样式相关属性，仅保留语义化功能：

   

   <hr aria-label="章节分隔"> <!-- 为屏幕阅读器提供说明 -->

已废弃属性（避免使用）

以下为HTML4旧属性,在HTML5中无效，需用CSS替代：

现代实践方案（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">

语义化使用规范

1. 正确场景

   

   • 段落间的主题转换（如文章章节切换）
   • 表单中不同区块的分隔

     <section>...</section>
     <hr aria-hidden="true"> <!-- 对辅助工具隐藏 -->
     <section>...</section>

2. 错误用法

   • 仅作视觉装饰（应使用border或伪元素）
   • 布局结构分隔（应使用<div>+CSS布局）

浏览器兼容性

所有现代浏览器（Chrome/Firefox/Safari/Edge）均支持HTML5标准，旧属性在IE10+中部分支持但不推荐。

关键结论：

• 仅使用全局属性和ARIA属性
• 所有视觉样式通过CSS实现
• 遵循语义化原则：用<hr>主题分隔而非装饰线

引用说明依据MDN Web Docs和W3C HTML5规范整理，遵循现代Web标准。