HTML ID

id属性为元素指定唯一的标识符，用于CSS样式、JavaScript操作和锚点链接。一个页面中每个id必须是唯一的。

什么是 id 属性？

id（identifier）属性用于为HTML元素分配唯一标识符。这个标识符在当前页面中必须是唯一的，不能重复。

重要

id属性值必须唯一！同一页面中不能有两个相同的id。如果需要为多个元素应用相同样式，请使用class属性。

基本用法

为元素添加id属性，值为标识符名称：

<div id="header">页头</div>
<div id="footer">页脚</div>
<nav id="main-nav">导航</nav>

id命名规则

必须以字母（A-Z 或 a-z）开头
后面可以跟字母、数字（0-9）、下划线（_）和连字符（-）
不能包含空格
区分大小写（header 和 Header 是不同的）

CSS ID选择器

使用 #id名 来选择具有特定id的元素：

#header {
    background-color: #333;
    color: white;
    padding: 20px;
}

#sidebar {
    width: 250px;
    float: left;
}

锚点链接

id常用于创建页面内的锚点链接：

<!-- 目录链接 -->
<a href="#chapter1">第一章</a>
<a href="#chapter2">第二章</a>
<a href="#chapter3">第三章</a>

<!-- 锚点目标 -->
<section id="chapter1">
    <h2>第一章</h2>
    <p>内容...</p>
</section>

<section id="chapter2">
    <h2>第二章</h2>
    <p>内容...</p>
</section>

点击"第一章"链接后，页面会自动滚动到 id="chapter1" 的位置。

JavaScript中使用id

id是JavaScript中获取元素的主要方式之一：

// 通过id获取元素
const header = document.getElementById("header");

// 修改元素内容
header.textContent = "新的标题";

// 修改元素样式
header.style.backgroundColor = "#3498db";

// 也可以使用 querySelector
const element = document.querySelector("#header");

id vs class

特性	id	class
唯一性	必须唯一	可重复使用
选择器	#id名	.类名
使用场景	页面唯一元素	相同样式的元素组
JavaScript	getElementById	getElementsByClassName
优先级	较高	较低

交互式示例

在下面的代码编辑器中，尝试修改id和使用JavaScript操作元素：

💻 在线代码编辑器

👁️ 预览效果

最佳实践

建议

id应该用于页面中唯一的元素，如页头、页脚、侧边栏等
避免使用id来定义样式，优先使用class，因为class可以复用
使用有意义的id名称，如 #main-header、#navigation-menu
在复杂应用中，考虑使用id作为JavaScript操作的目标，class用于样式
CSS中id的优先级高于class，可能会导致样式难以覆盖