HTML id 属性

HTML id 属性用于为 HTML 元素指定唯一的标识。一个 HTML 文档中不能有多个相同 id 的元素。

HTML 的 id 属性用于为 HTML 元素指定唯一的标识。一个 HTML 文档中不能有多个相同 id 的元素。

id 属性

id 属性为 HTML 元素指定了唯一的标识。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性的用途：

  • id 属性用于指向 CSS 样式表中 id 选择器样式。
  • JavaScript 使用 id 来访问和操作特定的元素。

在 CSS 中 id 选择器定义样式的方法是：写一个井号 (#)，后跟 id 名称。然后，在花括号 {} 中定义 CSS 属性。

在以下示例中，我们有一个 <h1> 元素指向 ID 名称“myHeader”。此 <h1> 元素将根据 #myHeader head 部分中的样式定义进行样式设置：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myHeader {
        background-color: lightblue;
        color: black;
        padding: 40px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1 id="myHeader">我的标题</h1>
  </body>
</html>

! 注意： id 名称区分大小写。id 名称必须至少包含一个字符，不能以数字开头，并且不能包含空格（空格、制表符等）。

class 和 id 之间的区别

一个 class 可以被多个 HTML 元素使用，而一个 id 名只能被页面中的一个 HTML 元素使用：

<style>
  /* id 为 "myHeader" 的元素的样式 */
  #myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
  }

  /* class 为 "city" 的所有元素的样式 */
  **.city ** {
    background-color: tomato;
    color: white;
    padding: 10px;
  }
</style>

<!-- 具有唯一 ID 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 多个元素都具有 city 类 -->
<h2 class="city">北京</h2>
<p>北京是中华人民共和国的首都。</p>

<h2 class="city">广州</h2>
<p>广州是广东省的省会城市。</p>

您可以在我们的CSS 教程中了解更多关于 CSS 的信息。

带有 ID 和链接的 HTML 书签

HTML 书签用于允许读者跳转到网页的特定部分。如果您的页面很长，书签会很有用。

要使用书签，您必须首先创建它，然后添加指向它的链接。

然后，当点击链接时，页面将滚动到带有书签的位置。

例子

首先，创建一个具有以下 id 属性的书签：

<h2 id="C4">第四章</h2>

然后，从同一页面中添加指向书签的链接（“跳转到第 4 章”）：

<a href="#C4">跳转到第 4 章</a>

或者，从另一个页面添加指向书签的链接（“跳转到第 4 章”）：

<a href="html_demo.html#C4">跳转到第 4 章</a>

在 JavaScript 中使用 id 属性

JavaScript 可以使用 id 值找到对应的元素并进行一些操作。

JavaScript 可以使用 getElementById() 方法访问具有特定 id 的元素：

使用 id 属性通过 JavaScript 操作文本：

<script>
  function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
  }
</script>

提示： 在HTML JavaScript章节或 JavaScript 教程中学习 JavaScript。

总结

  • id 属性用于为 HTML 元素指定唯一标识
  • id 属性的值在 HTML 文档中必须是唯一的
  • id 的所属元素应用其对应 CSS 的 id 选择器的样式
  • id 属性值区分大小写
  • id 属性还用于创建 HTML 书签
  • JavaScript 通过 getElementById() 的方法访问具有某个 id 的元素
HTML class 属性 HTML iframe