Html 简明教程

HTML - id

  • HTML id attribute* 是 HTML 中的一个重要关键词。HTML “id” 是一个属性，用于在网页中唯一标识一个元素。它充当该元素的标签，并允许 JavaScript 和 CSS 特别针对它。

使用 “id” 关键词在 HTML 代码中定义 * HTML id attribute* ，并通过 CSS 确定了样式。此标识有助于应用自定义样式、制作交互功能，并能够精确地在网页内导航。“id” 值在文档中必须是唯一的。

Syntax for id

在 CSS 中，您可以使用井号 (#) 后跟 HTML 元素中的 ID 名称来定位 ID 属性。尽量不要在 CSS 中使用 ID，而是可以使用 class 属性。ID 专门用于通过 JavaScript 执行。

  1. In HTML: <element class="highlight">…​</element>

  2. In CSS: /* 使用 id 属性选择器的 CSS */#突出显示{ background-color: yellow; color: black; font-weight: bold;}

  3. In JavaScript: document.getElementById('highlight')

Using HTML id Attribute

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

Define a id for Styling

在以下示例中，我们创建了两个元素，一个是 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>

Using id Attribute through JavaScript

ID 经常用于为 JavaScript 函数标识元素。例如，您可以使用 ID 定位特定的元素（如段落），并通过 JavaScript 使它们具有交互性。在以下代码中，我们创建了一个按钮，该按钮将触发一个函数，该函数会将 p 元素的 display 属性从无更改为块。您将看到一个段落。

<!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>

Difference between id and class in HTML

在 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>

Things to Remember about id

  1. id 属性至少应包含一个字符，起始字母应为字符 (a-z) 或 (A-Z)，其后可以是任何类型的字母，甚至特殊字符。

  2. id 属性不包含任何空格。

  3. 在文档中，每个 ID 必须唯一。

Valid id Attributes Pattern

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

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

Example

如果我们执行以下代码，将显示两个 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 元素上生效。