HTML - <div> 标签

HTML <div> 标签 用于定义网页中的各个部分。开发人员使用此标签来分组 HTML 元素，我们可以一次性将 CSS 样式应用于多个 div 元素。只有在没有其他语义元素（例如 <article> 或 <nav>）适用时，才应使用 <div> 元素。

语法

以下语法演示了 div 标签在 HTML 文档中的位置

<div>
    .....
</div>

属性

HTML div 标签接受所有 HTML 全局属性 和 事件属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

div 标签示例

以下示例演示了如何在 HTML 文档中使用 div 标签

Open Compiler

<!DOCTYPE html>
<html>
  <head>
    <title>Example of div Tag</title>
  </head>
  
  <body>
    <h1>Example of div Tag</h1>
    
	<div>
      <h3>Heading inside div tag.</h3>
      <p>Paragraph inside div tag.</p>
      <p>Another paragraph inside div tag.</p>
    </div>
  
  </body>
</html>

在上面的示例中，我们将一个 h3 标签和两个 p 标签放在一个 div 标签内，为这三个元素创建了一个单独的区域/部分。

使用 <div> 标签创建多个区域

每当您想要创建一个新的部分或区域时，您可以多次使用 <div> 标签。

示例

在下面的示例中，我们使用 <div> 标签在 html 文档中定义两个 div 部分。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
</head>
<body>
   <h3>HTML div tag Example</h3>
   <!-- Using HTML div tag -->
   <div>
       This is div tag 1
   </div>
   <div>
       This a div tag 2
   </div>
</body>

嵌套 <div> 标签

可以将 div 标签放在 div 标签内以创建嵌套部分或区域。

示例

在下面的示例中，我们使用 <div> 标签创建嵌套的 div 部分

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
   <style>
      /* using CSS to increase the visibility of divs */
      div {
         border: 2px solid black;
         padding: 4px;
      }
   </style>
</head>
<body>
   <h3>HTML div Tag Example</h3>
   <!-- Using HTML div tag -->
   <div>Outer 
       <div>Inner 
        <div>Inner1</div>
      </div>
   </div>
</body>
</html>

使用 CSS 样式化 div 标签

您可以对 div 标签使用各种 CSS 属性来更改其外观和布局，例如更改背景颜色、字体大小、填充、边距等。单个 CSS 类可以应用于所有 div 标签以使其具有类似的外观，您还可以创建不同的类以使其具有不同的外观。

示例

在下面的示例中，我们使用四个不同的 div 标签并使用单独的 CSS 类对其进行样式设置

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
   <style>
      .first {
         width: 100px;
         height: 100px;
         background-color: rgb(4, 109, 109);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      .second {
         width: 100px;
         height: 100px;
         background-color: rgb(17, 92, 222);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      .third {
         width: 100px;
         height: 100px;
         background-color: rgb(82, 40, 180);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      .fourth {
         width: 100px;
         height: 100px;
         background-color: rgb(157, 17, 222);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      div {
         border-radius: 10px;
         margin: 10px 10px;
      }

      div p {
         color: white;
      }
   </style>
</head>
<body>
   <h3>HTML div Tag Example</h3>
   <!-- Using HTML div tag -->
   <div class="first">
      <p>First</p>
   </div>
   <div class="second">
      <p>Second</p>
   </div>
   <div class="third">
      <p>Third</p>
   </div>
   <div class="fourth">
      <p>Fourth</p>
   </div>
</body>
</html>

在 div 标签内创建表单

我们可以将任何组件放在 div 标签中以包装该组件，这里我们将表单放在 HTML <div> 标签内。

示例

让我们来看下面的例子，我们将使用 <div> 标签创建一个表单区域。然后，我们在表单内为输入字段和按钮创建另一个区域，将字段分成单独的区域。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
   <style>
      .myForm {
         width: 300px;
         height: 250px;
         background-color: green;
         border-radius: 10px;
      }

      .myForm h2 {
         text-align: center;
         position: relative;
         top: 10px;
         color: white;
         font-family: sans-serif;
      }

      .myForm .fields input {
         position: relative;
         top: 20px;
         border-radius: 5px;
         width: 80%;
         margin: 20px auto;
         display: flex;
         padding: 10px;
      }

      .myForm button {
         width: 100px;
         position: relative;
         top: 10px;
         left: 20px;
         padding: 10px;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <h3>HTML div Tag Example</h3>
   <p>
       Here we have placed a form inside a div, 
       div is playing the role of wrper for the form.
   </p>
   <!--div tag-->
   <div class="myForm">
      <h2>Login</h2>
      <form>
      <!--div tag-->
      <div class="fields">
         <input type="text" placeholder="Username">
         <input type="password" placeholder="password">
         <br>
         <button>Login</button>
      </div>
      </form>
   </div>
</body>
</html>

使用 div 标签的优点

在创建 HTML 文档时，使用div 标签有各种优点

分组元素：当您想要将多个元素分组到一个容器中时，div 标签非常有用，div 标签像一个容器一样工作，您可以将 CSS 属性应用于所有子元素以获得相同的外观。
分离部分：通过使用div标签，您可以分离网页的不同部分。这有助于轻松编写和维护代码。
可重用结构：您可以使用借助div标签和 CSS 创建的相同 HTML 结构。这将降低复杂性和代码大小。

支持的浏览器

标签
div	是	是	是	是	是

html_tags_reference.htm

打印页面