HTML - id

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 中

/* CSS using id Attribute Selector */
#highlight {
   background-color: yellow;
   color: black;
   font-weight: bold;
}

在 JavaScript 中
```
document.getElementById('highlight')
```

使用 HTML id 属性

HTML id 对于管理事件和更改文档结构至关重要。为了创建交互式和动态网页，它使开发人员能够定位特定部分并为其提供专门的行为和外观。很少用于在 CSS 中进行样式设置。

定义用于样式设置的 id

在以下示例中，我们创建了两个元素，一个是 h1，另一个是 p，并且我们在它们上设置了 id，分别是“header”和“heightlight”，但使用“heightlight”是在内部 CSS 中为我们的 p 元素设置样式。您可以以类似的方式使用“header”id 为 h1 元素设置样式。

<!DOCTYPE html>
<html>

<head>
   <style>
      <!-- CSS id attribute Selector Used -->
      #highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>

<body>
   <!-- Using id attribute in both Element -->
   <h1 id="header">Tutorialspoint</h1>
   <p id="highlight">Simply Easy Learning</p>
</body>

</html>

通过 JavaScript 使用 id 属性

id 经常用于识别 JavaScript 函数的元素。例如，您可以使用 id 定位特定的元素，如段落，并通过 JavaScript 使其具有交互性。在以下代码中，我们创建了一个按钮，它将触发一个函数，该函数将更改段落元素的 display 属性，从 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()">Click Me</button>
   <p class="content" style="display: none;">
       This content can be toggled by clicking the button.
   </p>
</body>

</html>

HTML 中 id 和 class 的区别

在 HTML 中，id 属性唯一地标识页面上的单个元素，使其可用于通过 CSS 和 JavaScript 进行定位，并且它在文档中必须唯一。另一方面，class 属性可以应用于多个元素，从而允许对共享通用样式或行为的元素进行分组。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Difference between id and class</title>
   <style>
      /* ID selector */
      #header {
         background-color: blue;
         color: white;
         padding: 10px;
      }
      /* Class selector */
      .button {
         background-color: green;
         color: white;
         padding: 5px 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
      <!-- Unique ID for the header -->
      <div id="header">
         This is the header
      </div>
      <!-- Shared class for buttons -->
      <div class="button">
         Button 1
      </div>
      <div class="button">
         Button 2
      </div>
</body>

</html>

关于 id 的注意事项

id 属性应至少包含一个字符，起始字母应为字符 (a-z) 或 (A-Z)，其余字母可以是任何类型，甚至可以是特殊字符。
id 属性不包含任何空格。
在文档中，每个 id 必须唯一。

有效的 id 属性模式

某些 ID 属性在 HTML 5 中有效，但在层叠样式表中无效。在这种情况下，建议使用简单输出而不是样式化输出，因为我们用于 ID 的某些值在 CSS 中可能无效。

以下示例演示了简单 ID 属性的使用。

示例

如果我们执行以下代码，将显示两个 div 元素，一个带有 id 属性 (TutorialsPoint 网站)，另一个带有其他 id 属性 (Html5 教程、CSS 教程、JavaScript 教程)。

<!DOCTYPE html>
<html>

<head>
   <title>Simple Id Attributes</title>
   <style>
      /* Remove @ from the code and run the code again */
      #@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">
      TutorialsPoint Website
   </div>
   <div id="@TP1"> 
      Html5 Tutorials, CSS Tutorials, JavaScript Tutorials 
   </div>
</body>
</html>

如果我们从 id 的值中删除 @ 符号，它将成为有效的 id 声明，并且应用的样式将对 HTML 元素产生影响。

打印页面