跳到主要内容

HTML Id

提示
  1. id 属性用途：HTML中的id属性为元素提供唯一标识符，用于在CSS和JavaScript中选择和设置元素样式或行为。
  2. id 与锚链接：id可用于创建锚链接，允许快速跳转到页面的特定部分，也可从其他网页链接到锚点。
  3. id与class区别：id在HTML文档中是唯一的，而class可多次使用；一个元素只能有一个id，但可以有多个class。

HTML id 是可以添加到 HTML 元素的属性，用于给元素一个唯一标识符。它在 CSS 或 JavaScript 中用于选择和设置元素样式，或使用 JavaScript 为其添加行为。例如，

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

浏览器输出

使用 CSS 为带有 ID 的元素设置样式。

在上面的例子中，带有类名 title 的 <h2> 元素被 #title 选择器设置样式。

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

HTML id 与 JavaScript​

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

<h1 id="heading">主标题</h1>
<script>
  let element = document.getElementById("heading");
  element.innerHTML = "内容";
</script>

浏览器输出

使用 Javascript 修改带有 ID 的元素。

在上面的例子中，我们使用 document.getElementById("heading") 来访问带有 id heading 的 HTML 元素。然后，innerHTML 属性将 <h1> 标签内的内容（文本）从 主标题 改变为 内容。

HTML id 用于锚链接​

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

  • 为元素添加 id。
<h1 id="main">主标题</h1>
  • 使用 id 创建超链接。
<a href="#main">前往顶部。</a>

让我们看一个 HTML 文档中如何将它们结合起来的例子。

<h1 id="heading">主标题</h1>
<p class="main-content">这是一段文字</p>
<a href="#heading">前往顶部</a>

这里，点击 前往顶部 将会滚动页面到带有 id "heading" 的 h1 标签。

从另一个网页链接锚点​

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

<a href="mashangxue123.com/tutorials/html/head#title-tag"> 链接 </a>

这里，点击这个链接将带我们到 URL mashangxue123.com/tutorials/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 文档中是唯一的，而类可以在页面上多次使用。

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

最后于 更新