ID 在整个 HTML 页面中必须是唯一的吗?

htmlweb developmentfront end technology更新于 2024/7/25 13:00:17

是的，ID 在整个 HTML 页面中必须是唯一的。即使是官方 HTML 标准也提出了同样的建议 -

使用 id 属性的唯一 ID

示例

我们来看一个例子。这里我们使用了 id 属性 -

<!DOCTYPE html>
<html>
<head>
   <style>
      #myHeader {
         border: 2px solid yellow;
         background-color: orange;
         padding: 50px;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 id="myHeader">
      Demo Heading
   </h1>
   <p>This is a text outside.</p>
</body>
</html>

输出

显示四个不同的唯一 ID

另一个显示四个不同唯一 ID 的示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         width: 100%;
         font-size: 10px;
         text-align: center;
      }
      #left {
         float: left;
         width: 100px;
         border: 2px solid green;
      }
      #right {
         float: right;
         width: 100px;
         border: 2px solid orange;
      }
      #center {
         margin: 0 auto;
         width: 100px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="left">
         <h1>Left</h1>
      </div>
      <div id="right">
         <h1>Right</h1>
      </div>
      <div id="center">
         <h1>Center</h1>
      </div>
   </div>
</body>
</html>