HTML Id

HTML id 是一个可以添加到 HTML 元素以赋予其唯一标识符的属性。它用于 CSS 或 JavaScript 中，以选择和样式化元素，或通过 JavaScript 为其添加行为。例如：

<h2 id="title">Programiz</h2>
<style>
    #title {
        color: red;
    }
</style>

浏览器输出

在上面的示例中，类名为 title 的 <h2> 元素使用 #title 选择器进行样式设置。

注意：在 CSS 中，我们在 id 前使用 #。

带有 Javascript 的 HTML id

id 属性允许 JavaScript 使用 getElementById API 访问元素。例如：

  <h1 id="heading">Main Heading</h1>
  <script>
	let element = document.getElementById("heading");
	element.innerHTML = "Content"
  </script>

浏览器输出

在上面的示例中，我们使用 document.getElementById("heading") 访问 HTML 元素，其中 heading 是 <h1> 元素中的 id 名称。然后，innerHTML 属性将内容（<h1> 标签内的文本）从 Main Heading 更改为 Content。

用于锚链接的 HTML id

锚链接用于跳转到页面的特定部分以进行快速导航。我们可以使用 HTML id 创建锚链接。创建锚链接有以下两个步骤。

• 向元素添加一个 id。

<h1 id="main">Main Heading</h1>

• 使用 id 创建超链接。

<a href="#main">Go to the top.</a>

让我们看一个这在 HTML 文档中如何一起工作的示例。

 <h1 id="heading">Main Heading</h1>
  <p class="main-content">
	This is a paragraph
  </p>
  <a href="#heading">Go to the top</a>

在这里，点击 Go to top 将使页面滚动到带有 id "heading" 的 h1 标签。

从另一个网页链接锚点

锚点也可以从其他网站链接。例如：

<a href="programiz.com/html/head#title-tag"> Link </a>

在这里，点击此链接将带我们到 URL programiz.com/html/head，然后滚动到带有 id title-tag 的元素。

注意事项

• HTML id 区分大小写。因此，animal 和 Animal 是两个不同的 id。
• 您不能在 HTML id 中使用空格。如果您在 id 中使用空格，它将被视为两个单独的 id 值。因此，不要使用 my id 作为您的 id 名称，而应使用 my-id。

Id 与 Class

HTML id 和 class 都是可以添加到 HTML 元素以赋予其标识符的属性。id 和 class 的主要区别在于 id 在 HTML 文档中是唯一的，而 class 可以在页面上多次使用。

此外，我们只能在一个 HTML 元素中使用一个 id，而可以在一个 HTML 元素中使用多个 class。