二维码
搜索 ×

HTML id 属性

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML id 属性

使用 HTML 属性 为 HTML 元素指定唯一 ID。id

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

使用 id 属性

该属性指定唯一 ID 对于 HTML 元素。该属性的值在 HTML 文档中必须是唯一的。id``id

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 元素使用 在页面内：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>  
/* Style the element with the id "myHeader" */  
**#myHeader** {  background-color: lightblue;  
  color: black;  
  padding: 40px;  
  text-align: center;
}  

/* Style all elements with the class name "city" */  
**.city** {  background-color: tomato;  
  color: white;  
  padding: 10px;
}  
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>  

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>  
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>  
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>  
<p>Tokyo is the capital of Japan.</p>

提示： 您可以在我们的 [CSS 教程中了解有关 CSS] 的更多信息。

带有 ID 和链接的 HTML 书签

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

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

若要使用书签，必须先创建书签，然后添加链接 到它。

然后，当单击该链接时，页面将滚动到带有 书签。

例

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

1
<h2 id="C4">Chapter 4</h2>

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

1
<a href="#C4">Jump to Chapter 4</a>

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

1
<a href="html_demo.html#C4">Jump to Chapter 4</a>

在 JavaScript 中使用 id 属性

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

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

1
2
3
4
5
6
7
使用该属性通过 JavaScript 操作文本：`id`

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

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

本章小结

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

推荐教程