HTML id 属性
学习用 id 唯一标识元素 · 难度:入门 · +10XP
HTML id 属性
id属性用于给HTML元素指定唯一的标识符。同一个页面中,每个id值只能出现一次。
语法
<element id="unique-name">id的三大用途
| 用途 | 示例 |
|---|---|
| CSS选择器 | #header{background:blue} |
| JS操作元素 | document.getElementById("header") |
| 页面内锚点 | <a href="#section2">跳到第二节</a> |
锚点跳转示例
<a href="#bottom">跳到底部</a>
...大量内容...
<h2 id="bottom">页面底部</h2>
<a href="#top">返回顶部</a>id vs class
| id | class |
|---|---|
| 页面唯一 | 可重复使用 |
| CSS: #name | CSS: .name |
| JS: getElementById | JS: getElementsByClassName |
| 一个元素一个id | 一个元素可多个class |
id命名规范
- 区分大小写
- 不能以数字开头
- 不能包含空格
- 建议用连字符: main-content
???? 练习
- 创建页面内锚点跳转
- 给页面标题设置id并用CSS设置样式