- 第1节:HTML 导读
- 第2节:HTML 简介
- 第3节:HTML 基础
- 第4节:HTML 元素
- 第5节:HTML 属性
- 第6节:HTML 标题
- 第7节:HTML 段落
- 第8节:HTML 格式化
- 第9节:HTML 链接
- 第10节:HTML 引用
- 第11节:HTML 注释
- 第12节:HTML 头部
- 第13节:HTML ID
- 第14节:HTML CSS
- 第15节:HTML 符号
- 第16节:HTML 图像
- 第17节:HTML 表格
- 第18节:HTML 列表
- 第19节:HTML 区块
- 第20节:HTML 布局
- 第21节:HTML 表单
- 第22节:HTML 框架
- 第23节:HTML 颜色
- 第24节:HTML 颜色名
- 第25节:HTML 颜色值
- 第26节:HTML 脚本
- 第27节:HTML 字符实体
- 第28节:HTML URL
- 第29节:HTML 文件路径
- 第30节:HTML 表情符号
- 第31节:HTML 字符集
- 第32节:HTML 背景
- 第33节:HTML URL字符编码
- 第34节:HTML 文档类型
- 第35节:HTML 媒体(Media)
- 第36节:HTML 插件(Object和Embed)
- 第37节:HTML 音频(Audio)
- 第38节:HTML 视频(Videos)播放
- 第39节:HTML 常用标签
- 第40节:HTML 常用代码
- 第41节:HTML 滚动条样式
- 第42节:HTML版权符号写法及美化
HTML ID
HTML id
属性用于 为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素。
使用 id 属性
id
属性指定 HTML 元素的唯一 ID。 id
属性的值在 HTML 文档中必须是唯一的。
id
属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是:写一个井号 (#),后跟一个 id
名称。然后,在花括号 {} 中定义 CSS 属性。
下面的例子中我们有一个 <h1>
元素,它指向 id
名称 "myHeader"。这个 <h1>
元素将根据 head 部分中的 #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 必须包含至少一个字符,且不能包含空白字符(空格、制表符等)。
Class 与 ID 的差异
同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用:
实例
<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* 设置类名为 "city" 的所有元素的样式 */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>
<!-- 拥有相同类名的多个元素 -->
<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">第四章</h2>
然后,在同一张页面中,向这个书签添加一个链接(“跳转到第四章”):
实例
<a href="#C4">跳转到第四章</a>
或者,在另一张页面中,添加指向这个书签的链接(“跳转到第四章”):
<a href="html_demo.html#C4">Jump to Chapter 4</a>
在 JavaScript 中使用 id 属性
JavaScript 也可以使用 id 属性为特定元素执行某些任务。
JavaScript 可以使用 getElementById()
方法访问拥有特定 id 的元素:
实例
使用 id 属性通过 JavaScript 来处理文本:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
提示:请在我们的 JavaScript教程 中学习 JavaScript。
本章总结
-
id
属性用于为 HTML 元素指定唯一的 id -
id
属性的值在 HTML 文档中必须是唯一的 - CSS 和 JavaScript 可使用
id
属性来选取元素或设置特定元素的样式 -
id
属性的值区分大小写 -
id
属性还可用于创建 HTML 书签 - JavaScript 可以使用
getElementById()
方法访问拥有特定 id 的元素