HTML div class和id有什么用处

HTML中， < div>标签表示HTML文档中的一个分区或部分。此标签用作容器，内部可以嵌入任何HTML元素（如文本、图像、表格、音频、视频等）。

如果我们想要对

元素进行样式化或交互，我们可以为其分配一个id或class属性。

注意 −默认情况下，大多数浏览器在

元素之前和之后始终添加换行符。

HTML id属性

在HTML中，使用id属性（全局属性），我们可以为任何HTML元素指定唯一标识符。在HTML文档中，我们不能为多个元素分配相同的id，因此id必须在整个文档中是唯一的。

使用此id，我们可以使用CSS和JavaScript样式化或与特定的HTML元素进行交互。

语法

下面是将id定义为HTML属性的语法：

<p id = mypara1> Welcome to Tutorialspoint </p>

我们可以使用 (#id) 选择器在CSS中访问id属性。以下是语法 −

#mypara{
   color: Red;
}

HTML class 属性

在HTML中，class属性（全局属性）可以用来为任何HTML元素指定一个类。我们可以将同一个类分配给多个HTML元素。类名区分大小写。

我们可以使用CSS和JavaScript样式或操作具有特定类名的元素。

语法

以下是为HTML属性定义类的语法 −

<h1 class = myheading1> Simply easy learning </h1>

我们可以使用(.class)选择器在CSS中访问class属性。以下是语法−

.myheading1{
   color: yellowgreen;
}

示例

在下面的示例中，我们创建了4个没有分配类和id属性的<div>元素-

<!DOCTYPE html>
<html>
<head>
   <title>DIV in HTML</title>
   <style>
      div {
         border: solid 1px;
      }
   </style>
</head>
<body>
   <div>
      <p>Tutorialspoint</p>
   </div>
   <div>
      <p>simply</p>
   </div>
   <div>
      <p>easy</p>
   </div>
   <div>
      <p>learning</p>
   </div>
</body>
</html>

输出

从输出中我们可以看到，我们有三个<div>元素，并且浏览器在<div>元素之前和之后添加了一个换行符。

示例

在下面的示例中，我们为HTML文档中的每个<div>元素赋予了一个class属性，并使用CSS对它们进行了样式定义 −

<!DOCTYPE html>
<html>
<head>
   <title>DIV in HTML</title>
   <style>
      div {
         border: solid 1px;
         padding: 10px;
      }

      .mydiv1 {
         background-color: lightcoral;
      }
      .mydiv2 {
         background-color: lightgreen;
      }
      .mydiv3 {
         background-color: lightseagreen;
      }
      .mydiv4 {
         background-color: lightslategrey;
      }
   </style>
</head>
<body>
   <div class="mydiv1">
      <p>Tutorialspoint</p>
   </div>
   <div class="mydiv2">
      <p>simply</p>
   </div>
   <div class="mydiv3">
      <p>easy</p>
   </div>
   <div class="mydiv4">
      <p>learning</p>
   </div>
</body>
</html>

输出

在上面的程序中，我们使用<style>标签中的类来为div元素添加样式。

示例

这里，我们使用它们的id为<div>元素添加CSS。

<!DOCTYPE html>
<html>
<head>
   <title>DIV in HTML</title>
   <style>
      div{
         border: solid 1px;
         padding: 10px;
      }

      #mydiv1{
         background-color: lightslategrey;
      }
      #mydiv2{
         background-color: lightseagreen;
      }
      #mydiv3{
         background-color: lightgreen;
      }
      #mydiv4{
         background-color: lightcoral;
      }
   </style>
</head>
<body>
   <div id="mydiv1">
      <p>Tutorialspoint</p>
   </div>
   <div id="mydiv2">
      <p>simply</p>
   </div>
   <div id="mydiv3">
      <p>easy</p>
   </div>
   <div id="mydiv4">
      <p>learning</p>
   </div>
</body>
</html>