HTML - ID （标识网页元素唯一的属性）_HTML 菜鸟教程

id 是 HTML 中的一个重要关键字。HTML“id”是用于唯一标识网页中元素的属性。它充当该元素的标签，并使 JavaScript 和 CSS 能够专门针对它。

HTML id 属性在 HTML 代码中使用“id”关键字定义，样式在 CSS 中确定。这种识别有助于应用自定义样式、制作交互式功能以及在网页中精确导航。“id”值在文档中必须是唯一的。

我们强烈建议您使用类通过 CSS 设置任何元素的样式。

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 元素产生影响。

<< HTML - 类（class） HTML - 背景元素 >>