HTML - id

原创

admin 4个月前 (08-07) 阅读数 58 #HTML

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 id="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"和"highlight"，但使用"highlight"在内部CSS中设置我们的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元素的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()">点击我</button>
   <p class="content" style="display: none;">
       点击按钮可以切换此内容。
   </p>
</body>

</html>

HTML中id和class的区别

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

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

<head>
   <title>id和class的区别</title>
   <style>
      /* ID选择器 */
      #header {
         background-color: blue;
         color: white;
         padding: 10px;
      }
      /* Class选择器 */
      .button {
         background-color: green;
         color: white;
         padding: 5px 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
      <!-- 标题的唯一ID -->
      <div id="header">
         这是标题
      </div>
      <!-- 按钮的共享class -->
      <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属性(TutorialsPoint网站)，另一个带有其他id属性(Html5教程、CSS教程、JavaScript教程)。

<!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">
      TutorialsPoint网站
   </div>
   <div id="@TP1"> 
      Html5教程、CSS教程、JavaScript教程 
   </div>
</body>
</html>

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