id 是 HTML 中的一个重要关键字。HTML“id”是用于唯一标识网页中元素的属性。它充当该元素的标签，并使 JavaScript 和 CSS 能够专门针对它。
HTML id 属性在 HTML 代码中使用“id”关键字定义，样式在 CSS 中确定。这种识别有助于应用自定义样式、制作交互式功能以及在网页中精确导航。“id”值在文档中必须是唯一的。
id 的语法
在 CSS 中，您可以通过在 HTML 元素中使用哈希符号 （#） 后跟 id 名称来定位 id 属性。尽量不要在CSS中使用id，而是可以使用class属性。ID 是专门为通过 JavaScript 执行而创建的。
在 HTML 中：
<element class="highlight">...</element>
在 CSS 中：
/* 使用id属性选择器的CSS */
#highlight {
background-color: yellow;
color: black;
font-weight: bold;
}
在 JavaScript 中：
document.getElementById('highlight')
使用 HTML id 属性
HTML ID 对于管理事件和更改文档结构至关重要。为了创建交互式和动态网页，它使开发人员能够定位特定部分，并为其提供专门的行为和外观。它很少用于在CSS中进行样式设计。
定义样式的 ID
在下面的例子中，我们创建了两个元素，一个是h1，另一个是p，我们也在它们上设置了id“header”和“heightlight”，但是在内部CSS中使用“heightlight”来设置p元素的样式。您可以以类似的方式使用“header”id 来设置 h1 元素的样式。
<!DOCTYPE html>
<html>
<head>
<style>
<!-- 已使用CSS id属性选择器 -->
#highlight {
background-color: yellow;
color: black;
padding: 5px;
}
</style>
</head>
<body>
<!-- 在两个元素中都使用id属性-->
<h1 id="header">七科普教程</h1>
<p id="highlight">简单易用</p>
</body>
</html>
通过 JavaScript 使用 id 属性
ID 经常用于标识 JavaScript 函数的元素。例如，您可以使用 id 来定位特定元素（如段落），并通过 JavaScript 使它们具有交互性。在下面的代码中，我们创建了一个按钮，该按钮将触发一个函数，该函数将 p 元素的显示属性 none 更改为 block。你会看到一个段落。
<!DOCTYPE html>
<html>
<head>
<script>
function showContent() {
var element = document.getElementById('content');
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>
<style>
.interactive-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="interactive-button" onclick="showContent()">点击这里</button>
<p class="content" style="display: none;">
单击按钮可以切换此内容。
</p>
</body>
</html>
HTML 中 id 和 class 之间的区别
在 HTML 中，id 属性唯一标识页面上的单个元素，使其可用于使用 CSS 和 JavaScript 进行定位，并且它在文档中必须是唯一的。另一方面，class 属性可以应用于多个元素，从而允许对共享常见样式或行为的元素进行分组。
<!DOCTYPE html>
<html lang="en">
<head>
<title>id和class之间的差异</title>
<style>
/* 选择符 */
#header {
background-color: blue;
color: white;
padding: 10px;
}
/* 类选择器 */
.button {
background-color: green;
color: white;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<!-- 标签的唯一ID -->
<div id="header">
This is the header
</div>
<!-- 按钮的共享类 -->
<div class="button">
按钮 1
</div>
<div class="button">
按钮 2
</div>
</body>
</html>
关于id要记住的事情
- id 属性应至少包含一个字符，起始字母应为字符 （a-z） 或 （A-Z），其余任何类型的字母甚至可以写入特殊字符。
- id 属性不包含任何空格。
- 在文档中，每个 ID 都必须是唯一的。
有效的 id 属性模式
某些 ID 属性在 HTML 5 中有效，但在级联样式表中无效。在这种情况下，建议使用简单输出而不是样式化输出，因为我们用于 ID 的某些值在 CSS 中可能无效。
以下示例演示了简单 ID 属性的使用。
例如果我们执行下面的代码，将显示两个 div 元素，一个具有 id 属性（qikepu Website），另一个具有其他 id 属性（Html5 qikepu、CSS qikepu、JavaScript qikepu）。
<!DOCTYPE html>
<html>
<head>
<title>类选择器简单Id属性</title>
<style>
/* 从代码中删除@，然后重新运行代码 */
#@TP {
color: #070770;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#@TP1 {
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div id="@TP">
qikepu Point网站
</div>
<div id="@TP1">
Html5教程，CSS教程，JavaScript教程
</div>
</body>
</html>
如果我们从 id 的值中删除 @ 符号，它将成为有效的 id 声明，并且应用的样式将对 HTML 元素产生影响。
