HTML id 属性

HTML id 属性用于为 HTML 元素指定唯一的 id。

在 HTML 文档中，不能有多个元素具有相同的 id。

id 属性

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

id 属性用于指向样式表中的特定样式声明。JavaScript 也使用它来访问和操作具有特定 id 的元素。

id 的语法是：写一个井号（#），后跟一个 id 名称。然后，在大括号 {} 内定义 CSS 属性。

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

亲自试一试

注意：id 名称区分大小写！

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

类与 ID 的区别

一个类名可以被多个 HTML 元素使用，而一个 id 名称在同一页面中只能被一个 HTML 元素使用：

实例

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

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

<!-- 具有唯一 id 的元素 -->
<h1 id="myHeader">我的城市</h1>

<!-- 具有相同类的多个元素 -->
<h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都。</p>

<h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p>

<h2 class="city">北京</h2>
<p>北京是中国的首都。</p>

亲自试一试

提示：您可以在我们的 CSS 教程中学习更多关于 CSS 的知识。

使用 ID 和链接的 HTML 书签

HTML 书签用于允许读者跳转到网页的特定部分。

如果您的页面很长，书签会很有用。

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

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

实例

首先，使用 id 属性创建一个书签：

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

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

实例

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

亲自试一试

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

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

在 JavaScript 中使用 id 属性

id 属性也可以被 JavaScript 用来为该特定元素执行一些任务。

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

实例

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "祝您有美好的一天！";
}
</script>

亲自试一试

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

本章总结

id 属性用于为 HTML 元素指定唯一的 id
id 属性的值在 HTML 文档中必须是唯一的
id 属性被 CSS 和 JavaScript 用来设置样式/选择特定元素
id 属性的值区分大小写
id 属性也用于创建 HTML 书签
JavaScript 可以使用 getElementById() 方法访问具有特定 id 的元素