码农教程 - 一技在手,衣食无忧! tools

HTML id 属性

❮ 上一节 下一节 ❯

HTMLid属性用于指定 HTML 元素的唯一 ID。

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

使用 id 属性

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

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

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

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

示例

<!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>
/* 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属性：

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

然后，在同一页面中添加指向书签 ("Jump to Chapter 4") 的链接：

示例

<a href="#C4">Jump to Chapter 4</a>
亲自试一试 »

或者，从另一个页面添加指向书签 ("Jump to Chapter 4") 的链接：

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

在 JavaScript 中使用 id 属性

这个idJavaScript 还可以使用属性来执行该特定元素的某些任务。

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

示例

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

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

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

章节总结

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

HTML练习

通过练习测试一下

练习:

添加正确的 HTML 属性以使 H1 元素变为红色。

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1 >My Home Page</h1>

</body>
</html>

开始练习


❮ 上一节 下一节 ❯