html中怎么给hr命名

在HTML中，我们可以使用<hr>标签来创建水平线，如果我们想要对水平线进行更复杂的操作，例如通过JavaScript或CSS来改变其样式，我们就需要给这个水平线命名，这样，我们就可以通过引用这个名字来选择和操作这个元素，如何在HTML中给hr命名呢？

1. 使用id属性命名

在HTML中，我们可以使用id属性来给元素命名。id属性的值是唯一的，不能在同一个HTML文档中有重复的值，我们可以将id属性的值设置为我们想要的名字，然后通过这个名字来选择和操作这个元素。

我们可以创建一个名为"myHr"的水平线：

<hr id="myHr">

我们就可以通过JavaScript或CSS来操作这个水平线了，我们可以使用JavaScript来改变这个水平线的颜色：

document.getElementById("myHr").style.color = "red";

或者，我们可以使用CSS来改变这个水平线的宽度：

myHr {
  width: 50%;
}

2. 使用class属性命名

除了使用id属性外，我们还可以使用class属性来给元素命名。class属性的值可以有多个，每个值都可以代表一个类名，我们可以将class属性的值设置为我们想要的名字，然后通过这个名字来选择和操作这个元素。

我们可以创建一个名为"myHrClass"的水平线：

<hr class="myHrClass">

我们就可以通过JavaScript或CSS来操作这个水平线了，我们可以使用JavaScript来改变这个水平线的颜色：

var myHr = document.getElementsByClassName("myHrClass")[0];
myHr.style.color = "red";

或者，我们可以使用CSS来改变这个水平线的宽度：

.myHrClass {
  width: 50%;
}

3. 使用data-*属性命名

我们还可以使用data-*属性来给元素命名。data-*属性的值可以是任何字符串，我们可以通过这个字符串来选择和操作元素，我们可以将data-*属性的值设置为我们想要的名字，然后通过这个名字来选择和操作这个元素。

我们可以创建一个名为"myHrData"的水平线：

<hr data-name="myHrData">

我们就可以通过JavaScript或CSS来操作这个水平线了，我们可以使用JavaScript来改变这个水平线的颜色：

var myHr = document.querySelector('[data-name="myHrData"]');
myHr.style.color = "red";

或者，我们可以使用CSS来改变这个水平线的宽度：

[data-name="myHrData"] {
  width: 50%;
}