HTML ID

使用id属性

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

CSS和JavaScript可以使用id值来为具有指定id值的唯一元素执行某些任务。

在CSS中，要选择具有特定id的元素，请写”#”，后跟元素的id名称：

示例：

使用CSS为id为”myHeader”的元素设置样式：

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

<h1 id="myHeader">我的标题</h1>

结果：

亲自试一试

提示:id属性可用于任何HTML元素。
注意:id的值区分大小写。
注意:id值必须至少包含一个字符，并且不得包含空格,缩进。

类和ID之间的区别

HTML元素只能有一个属于该单个元素的唯一ID，而类名可以由多个元素使用：

示例：

<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>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>伦敦是英国的首都。</p>

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

<h2 class="city">Tokyo</h2>
<p>东京是日本的首都</p>

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

亲自试一试

在JavaScript中使用id属性

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

示例

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

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

亲自试一试

提示:在 JavaScript 教程可以学习更多关于JavaScript知识。

带有ID和链接的书签(锚链接)

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

如果您的网页很长，书签会非常有用。

要创建书签，您必须先创建书签，然后添加一个链接。

单击链接后，页面将滚动到带有书签的位置。

示例

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

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

然后，在同一页面中添加指向书签的链接(“跳到第四章”)：

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

或者，从另一页面添加指向书签的链接(“跳到第四章”):

示例

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

亲自试一试