HTML 基础知识：HTML 中的类、ID 和名称

概述

HTML 页面由许多元素或标签组成。我们经常需要针对一个特定的元素或一组特定的元素来实现不同的功能，如样式。这正是 id 和 classes 派上用场的时候。id 对于 HTML 页面中的每个元素都是唯一的，而多个元素可以具有相同的类。

HTML ID 属性

顾名思义，ID 是整个文档中元素的标识符。因此，文档中的两个元素不能具有相同的 ID。

语法：

<p id="para"> Hello World </p>

如果我们尝试为文档中的两个不同元素提供相同的 id，我们将收到警告。

<body>
    <h1 id="name"> Kaush </h1>
    <h2 id="name"> Aryan </h2>
</body>

HTML5 中的 id 不应包含任何空格。虽然 id 可以包含除空格字符以外的任何字符，但建议在 id 名称中仅使用“-”和“_”。

ID 的用途

使用 CSS 定位元素：使用 id，我们可以轻松地使用 CSS 定位元素并操纵它们的样式。

在index.html
```
<div>
	<p id="para"> Hello World </p>
</div>
```
在styles.css
```
#para {
	 background-color: red;
}
```

使用脚本操作元素：我们可以使用 getElementById 和 querySelector（#id） 来操作具有给定 id 的元素。

// "ele" will now hold the <p> tag with the id name
let ele = document.getElementById("name")
ele.style.backgroundColor = "red"

因此，在上面的示例中，我们有一个 id 为 para 的 <p> 标签。为了更改此标记的样式，首先，我们使用 getElementById 定位该元素并将其分配给变量名称 ele。现在，ele 有很多属性，例如：

因此，假设我们要更改元素的背景。我们可以通过将 ele.style.backgroundColor 设置为红色来轻松实现这一点

输出：

HTML 类属性

HTML 类是包含元素类的全局属性。顾名思义，类可用于表示一组具有相似属性的元素。

与 ID 不同，文档中的多个元素可以具有相同的类。它区分大小写。

例如：

在index.html

<body>
    <h1 class="heading"> Aryan </h1>
    <h1 class="heading"> Kaush </h1>
    <h1 class="Heading"> Kuldeep </h1>
</body>

在styles.css

.heading {
    background-color: red;
}

在上面的例子中，我们有两个具有相同类名标题的元素，我们给它一个红色的背景色。这不会引发任何警告，因为具有相同类名的不同元素是正常的。此外，我们还有第三个带有类标题的元素，但它的背景不是红色的，因为类区分大小写。

输出

单个元素可以有多个类，这些类使用空格分隔。例如：

<div class="blue-box main"> <div>

这里上面的 div 有两个类，blue-box 和 main

使用

使用 CSS 的定位元素：与 ids 类似，我们可以使用其类名从文档中选择一个元素。我们在类名前使用“.”来定位特定类。

例如：

在index.html：

<div class="blue-box">
      <p> I am inside blue box </p>
      <p> I am inside blue box </p>
      <p> I am inside blue box </p>
</div>

styles.css

.blue-box {
  background-color: blue;
}

输出

在上面的例子中，我们有一个 div，id 为 blue-box。在styles.css文件中，我们使用类选择器（.）选择了div，并将div的背景颜色更改为蓝色

注意：类非常适合表示风格或功能相似的组件。例如，如果我们有一个字体大小为 1rem 且颜色为“blue”的页面副标题，并且我们在页面上的不同位置多次使用该副标题，我们最终会得到这样的结果：

在index.html

  <h2 id="sub-heading-1"> Sub heading 1 </h2>
  <p> 
    Lorem ipsum dolor sit amet 
    consectetur, adipisicing elit. 
    Natus est assumenda nam soluta, 
    delectus at voluptates 
  </p>
  <h2  id="sub-heading-2"> Sub heading 2 </h2>
  <p> 
    Lorem ipsum dolor sit amet 
    consectetur, adipisicing elit. 
    Natus est assumenda nam soluta, 
    delectus at voluptates 
  </p>

在styles.css

#sub-heading-1 {
  font-size: 1rem;
  color: blue;
}

#sub-heading-2 {
  font-size: 1rem;
  color: blue;
}

输出：

我们可以很容易地看到用于设置副标题样式的代码是如何重复的。为了克服这个问题，我们可以使用 class 而不是 id。我们将为两个副标题（或代替文档的所有子标题）提供一类子标题，并定义副标题的样式。让我们看看如何实现这一目标：

在index.html：

  <h2 class="sub-heading"> Sub heading 1 </h2>
  <p> 
    Lorem ipsum dolor sit amet 
    consectetur, adipisicing elit. 
    Natus est assumenda nam soluta, 
    delectus at voluptates 
  </p>
  <h2  class="sub-heading"> Sub heading 2 </h2>
  <p> 
    Lorem ipsum dolor sit amet 
    consectetur, adipisicing elit. 
    Natus est assumenda nam soluta, 
    delectus at voluptates 
  </p>

在styles.css

.sub-heading {
  font-size: 1rem;
  color:blue
}

输出：

使用脚本定位一组元素：我们可以通过使用 document.getElementsByClassName 使用 JS 来定位具有相同类的元素。让我们尝试实现我们上面所做的相同的事情，但这次使用 JS。

const list = document.getElementsByClassName("sub-heading")

for(let i=0; i<list.length;i++) {
  list[i].style.color = "blue"
  list[i].style.fontSize="1rem"
}

输出将是相同的。我们必须在这里使用 for 循环，因为 getElementsByClassName 返回具有相同类的所有元素的列表。

多个类

我们知道我们可以为相同的元素提供多个类。假设，在上面的例子中;我们在小标题中还有进一步的划分。现在，某些标题将具有红色背景。我不会使用 id 实现它，而是直接跳转到它的类实现中。所有副标题都将有一类副标题，红色背景的副标题将具有额外的 redBG 类。然后，我们可以定义类 redBG 的样式。

在index.html

<h2 class="sub-heading"> Sub heading 1 </h2>
  <p> 
    Lorem ipsum dolor sit amet 
    consectetur, adipisicing elit. 
    Natus est assumenda nam soluta, 
    delectus at voluptates 
  </p>
  <h2  class="sub-heading redBG"> Sub heading 2 </h2>
  <p> 
    Lorem ipsum dolor sit amet 
    consectetur, adipisicing elit. 
    Natus est assumenda nam soluta, 
    delectus at voluptates 
  </p>

在styles.css：

.sub-heading {
  font-size: 1rem;
  color:blue
}

.redBG {
  color: red
}

在上面的例子中，我们有两个标题，一个是 sub-heading 的类名，另一个是 sub-heading 和 redBG。在 styles.css 中，我们定义了不同类名的样式。

输出

HTML 名称属性

名称是为元素命名的 HTML 属性。此名称可以进一步使用，具体取决于使用它的标记。名称的一个非常常见的用例是在 Form 标记中。

例如：

<form>
 Do you love JAVASCRIPT?
  <button name="javascript" type="submit" value="Yes">Yes</button>
  <button name="javascript" type="submit" value="No">No</button>
</form>

现在我们可以将操作和方法附加到此表单，并将此表单提交到服务器。如果用户单击“是”，服务器可以将 javascript 的值解释为“是”，如果用户单击“否”，则服务器可以将 javascript 的值解释为“是”。

我们还可以使用带有输入标签的 name 属性，并在服务器上获取其值。

<form name="detailForm">
  First name: <input type="text"  name="fname"><br><br>
 Last name: <input type="text" name="lname"><br><br>
 <button type="submit" > Send </button>
</form>

name 属性可与以下元素一起使用：

<button>
<fieldset>
<form>
<input>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>

类和 ID 之间的差异

类	编号
多个元素可以具有相同的类。	Id 在整个文档中是唯一的。
".”在 CSS 中用作选择器	"#“在 CSS 中用作选择器
"getElementsByClassName“用于使用 JS 定位元素。	"getElementsById“用于使用 JS 定位元素。

总而言之，我们可以说 id 属性用于标识元素，而 class 用于标识一组具有某些相似性的元素（例如，具有相同样式的元素或具有相同功能的元素）。name 属性通常与表单一起使用，以将数据发送到服务器。

总结

HTML ID 属性用于唯一标识 DOM 上的元素。
页面上的任何两个元素都不能具有相同的 ID。
HTML Class 属性共同表示 DOM 上的一组元素。
多个元素可能具有相同的类。
单个元素可以有多个类，由空格分隔。
ID 和 class 属性都区分大小写。
name 属性用于为 HTML 元素命名
Button、Input 和 Textarea 是我们可以使用 name 属性的一些元素。