HTML id 属性

学习id属性

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

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

在CSS中,要选择具有特定id的元素,请写入(#)字符,后跟元素的id:

实例

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

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

<h1 id="myHeader">Header 区域</h1>

结果:

Header 区域

运行 »

提示: id属性可用于任何 HTML元素。

注意: id值区分大小写。

注意: id值必须至少包含一个字符,并且不得包含空格(空格,制表符等)。


class和id之间的区别

class可以在页面里面重复使用, id由于在页面里面只能出现一次:

实例

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

<!-- 独特的元素 -->
<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书签用于允许读者跳转到网页的特定部分。

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

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

单击链接后,页面将跳转到带有书签的位置。

实例

首先,使用id属性创建书签:

<h2 id="C4">第 4 章节</h2>

然后,在同一页面中添加指向书签的链接(“跳转到第4章”):

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

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

实例

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

在JavaScript中使用id属性

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

实例

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

<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "开心每一天!";
}
</script>
运行 »

提示:HTML JavaScript章节或我们的 JavaScript教程中学习 JavaScript