HTML Id
提示
id
属性用途:HTML中的id
属性为元素提供唯一标识符,用于在CSS和JavaScript中选择和设置元素样式或行为。id
与锚链接:id
可用于创建锚链接,允许快速跳转到页面的特定部分,也可从其他网页链接到锚点。id
与class
区别:id
在HTML文档中是唯一的,而class
可多次使用;一个元素只能有一个id
,但可以有多个class
。
HTML id
是可以添加到 HTML 元素的属性,用于给元素一个唯一标识符。它在 CSS 或 JavaScript 中用于选择和设置元素样式,或使用 JavaScript 为其添加行为。例如,
<h2 id="title">mashangxue123</h2>
<style>
#title {
color: red;
}
</style>
浏览器输出
在上面的例子中,带有类名 title
的 <h2>
元素被 #title
选择器设置样式。
注意:在 CSS 中,我们在 id 前使用 #
。
HTML id 与 JavaScript
id
属性允许 JavaScript 使用 getElementById
API 访问元素。例如,
<h1 id="heading">主标题</h1>
<script>
let element = document.getElementById("heading");
element.innerHTML = "内容";
</script>
浏览器输出
在上面的例子中,我们使用 document.getElementById("heading")
来访问带有 id heading
的 HTML 元素。然后,innerHTML
属性将 <h1>
标签内的内容(文本)从 主标题
改变为 内容
。
HTML id 用于锚链接
锚链接用于快速跳转到页面的特定部分。我们可以使用 HTML id
来创建锚链接。创建锚链接有两个步骤。
- 为元素添加
id
。
<h1 id="main">主标题</h1>
- 使用
id
创建超链接。
<a href="#main">前往顶部。</a>
让我们看一个 HTML 文档中如何将它们结合起来的例子。
<h1 id="heading">主标题</h1>
<p class="main-content">这是一段文字</p>
<a href="#heading">前往顶部</a>
这里,点击 前往顶部
将会滚动页面到带有 id
"heading"
的 h1
标签。
从另一个网页链接锚点
锚点也可以从其他网站链接。例如,
<a href="mashangxue123.com/tutorials/html/head#title-tag"> 链接 </a>
这里,点击这个链接将带我们到 URL mashangxue123.com/tutorials/html/head 然后滚动到带有 id
title-tag
的元素。
注意事项
- HTML
id
是区分大小写的。因此,animal
和Animal
是两个不同的 id。 - 在 HTML
id
中不能使用空格。如果在id
中使用空格,它将被视为两个单独的id
值。所以,不要使用my id
作为你的 id 名称,而应使用my-id
。
Id 与 Class
HTML id
和 class
都是可以添加到 HTML 元素的属性,用于给它一个标识符。id
和 class
的主要区别在于,id
在 HTML 文档中是唯一的,而类可以在页面上多次使用。
此外,我们只能在一个 HTML 元素中使用一个 id
,而可以在一个 HTML 元素中使用多个类。