HTML - <div> 標籤

HTML <div> 標籤 用於定義網頁中的各個部分。開發人員使用此標籤來分組 HTML 元素，我們可以一次性將 CSS 樣式應用於多個 div 元素。只有在沒有其他語義元素（例如 <article> 或 <nav>）適用時，才應使用 <div> 元素。

語法

以下語法演示了 div 標籤在 HTML 文件中的位置

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

屬性

HTML div 標籤接受所有 HTML 全域性屬性 和 事件屬性。

div 標籤示例

以下示例演示瞭如何在 HTML 文件中使用 div 標籤

<!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 部分。

<!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 部分

<!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 類對其進行樣式設定

<!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> 標籤建立一個表單區域。然後，我們在表單內為輸入欄位和按鈕建立另一個區域，將欄位分成單獨的區域。

<!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

列印頁面