Html 简明教程

HTML - id

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

The id is an important keyword in HTML. HTML "id" is an attribute used to uniquely identify an element within a web page. It serves as a label for that element and enables JavaScript and CSS to target it specifically.

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

HTML id attribute is defined in the HTML code using the "id" keyword, and the styling is determined in CSS. This identification helps in applying custom styles, making interactive features, and navigating within the webpage with precision. The "id" values must be unique within the document.

Syntax for id

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

In CSS, you can target the id attribute by using a hash symbol (#) followed by the id name in HTML element. Try not to use id in CSS rather you can use class attribute. Ids are specially created to execute through JavaScript.

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

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

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

Using HTML id Attribute

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

HTML ids are essential for managing events, and changing the structure of documents. In order to create interactive and dynamic web pages, it gives developers the ability to target particular parts and provide them specialized behavior and appearance. Rarely it is used to do the styling in CSS.

Define a id for Styling

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

In the following example, we have create two element one is h1 and other is p, and we set id on them as well "header" & "heightlight" but using the "heightlight" is in internal CSS to style our p element. You can use the "header" id in the similar way to style the h1 element.

<!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 属性从无更改为块。您将看到一个段落。

The ids are frequently used to identify elements for JavaScript functions. For example, you can use a id to target specific elements, like paragraph, and make them interactive through JavaScript. In the following code we have create a button which will trigger a function that will change the display property none to block of a p element. You will see a paragraph.

<!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 属性可以应用于多个元素，允许对共享常用样式或行为的元素进行分组。

In HTML, the id attribute uniquely identifies a single element on a page, making it useful for targeting with CSS and JavaScript, and it must be unique within the document. The class attribute, on the other hand, can be applied to multiple elements, allowing for the grouping of elements that share common styles or behaviors.

<!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. The id attribute should contain at least one character should be there, the starting letter should be a character (a-z) or (A-Z), and the rest of the letters of any type can written even special characters.

  2. The id attribute does not contain any spaces.

  3. Within the document every id must be unique.

Valid id Attributes Pattern

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

Certain ID Attributes are valid in HTML 5, but not in Cascading Style Sheets. In such cases, it is recommended to go with simple output rather than styled output because certain values that we use for ID may be invalid in CSS.

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

Following example demonstrates the use of simple ID attributes.

Example

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

If we execute below code, two div elements will be displayed, one with id attribute (TutorialsPoint Website), and the other one with other id attribute (Html5 Tutorials, CSS Tutorials, JavaScript Tutorials).

<!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 元素上生效。

If we remove the @ symbol from the id’s value the it will become avalid id declaration and applied styles will be effected on the HTML Element.