【html学习笔记18】- id属性
2023-08-31 本文已影响0人
兔小小
HTML 属性 id用于为 HTML 元素指定一个唯一的 id。一个 HTML 文档中不能有多个具有相同 id 的元素。
使用 id 属性
id属性指定唯一 id 的 HTML 元素。id属性的值在 HTML 文档中必须是唯一的。该属性用于指向到样式表中的特定样式声明。它也被JavaScript用来访问和使用特定id操作元素。
id 的语法是：写一个哈希字符 （#），后跟一个 id 名称。 然后，在大括号 {} 中定义 CSS 属性。
在下面的示例中，我们有一个指向id名 “myHeader”。此元素将根据 head 部分中的样式定义设置样式：<h1><h1>#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>
/* 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>
带有 id 和链接的 HTML 书签
HTML 书签用于允许读者跳转到网页的特定部分。如果页面很长，书签会很有用。
若要使用书签，必须先创建书签，然后给它添加链接。然后，当单击链接时，页面将滚动到带有书签的地方。
- 例子
首先，使用以下属性id创建一个书签：
<h2 id="C4">Chapter 4</h2>
然后，从同一页面中添加指向书签的链接（“跳转到第 4 章”）：
<a href="#C4">Jump to Chapter 4</a>
也可以写作：
<a href="html_demo.html#C4">Jump to Chapter 4</a>
在 JavaScript 中使用 id 属性
JavaScript 也可以使用id属性来执行该特定元素的某些任务。JavaScript 可以使用以下方法访问具有特定 id 的元素：getElementById()
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
点击按钮改变了文字
