HTML Div用法及代碼示例

div標簽稱為Division標簽。 div標簽在HTML中用於對網頁中的內容進行分割，例如(文本，圖像，頁眉，頁腳，導航欄等)。 Div標簽同時具有open(<div>)和close(</div>)標簽，並且必須關閉標簽。 Div是Web開發中最可用的標簽，因為它可以幫助我們分離出網頁中的數據，並且可以為網頁中的特定數據或函數創建特定的部分。

Div標簽是Block level標簽
這是一個通用的容器標簽
它用於將HTML的各種標記組合在一起，以便可以創建節並將樣式應用於它們。

我們知道Div標簽是塊級標簽，在此示例中div標簽包含整個寬度。每次將在新行而不是同一行顯示div標簽。
範例1：

<html> 
   <head> 
      <title>gfg</title> 
<style type=text/css> 
  
p{ 
  background-color:gray; 
  margin:10px; 
} 
  
div 
{ 
  color:white; 
  background-color:009900; 
  margin:2px; 
  font-size:25px; 
} 
</style> 
   
</head> 
  
 <body> 
   <div > div tag   </div> 
   <div > div tag   </div> 
   <div > div tag   </div> 
   <div > div tag   </div> 
   
   </body> 
</html>

輸出：

Divtaghtml

眾所周知，div標簽用於將HTML元素組合在一起，並在其上應用CSS和Web布局。讓我們看下麵的示例而不使用div標簽。我們需要為每個標簽應用CSS(在示例中使用H1 H2和兩段p標簽)

範例2：

<html> 
   <head> 
      <title>gfg</title> 
      <style type=text/css> 
         p{ 
         color:white; 
         background-color:009900; 
         width:400px; 
         } 
         h1 
         { 
         color:white; 
         background-color:009900; 
         width:400px; 
         } 
         h2 
         { 
         color:white; 
         background-color:009900; 
         width:400px; 
         } 
      </style> 
   </head> 
   <body> 
      <h1>GeeksforGeeks</h1> 
      <p>How many times were you frustrated while looking out 
       for a good collection of programming/algorithm/interview 
       questions? What did you expect and what did you get? 
       This portal has been created to provide well written, 
       well thought and well-explained solutions for selected 
       questions. 
      </p> 
      <h2>GeeksforGeeks</h2> 
      <p>GCET is an entrance test for the extensive classroom  
      program by GeeksforGeeks to build and enhance Data  
      Structures and Algorithm concepts, mentored by Sandeep  
      Jain (Founder & CEO, GeeksforGeeks).He has 7 years of  
      teaching experience and 6 years of industry experience. 
      </p> 
   </body> 
</html>

輸出：

layoutwithoutdivtag

使用Div標簽創建Web布局
div標簽是div標簽內的一個容器標簽，我們可以放置多個HTML元素，並且可以組合在一起並可以為其應用CSS。
div標簽可用於創建網頁布局，以下示例顯示創建網頁布局
我們也可以使用表格標簽創建網絡布局，但是表格標簽修改布局非常複雜
div標簽在創建Web布局時非常靈活，並且易於修改。在下麵的示例中，將使用div標簽顯示HTML元素的分組並創建block-wise Web布局。
例：

<html> 
   <head> 
      <title>gfg</title> 
      <style type=text/css> 
         .leftdiv 
         { 
         float:left; 
         } 
         .middlediv 
         { 
         float:left; 
         background-color:gray 
         } 
         .rightdiv 
         { 
         float:left; 
         } 
         div{ 
         padding:1%; 
         color:white; 
         background-color:009900; 
         width:30%; 
         border:solid black; 
         } 
      </style> 
   </head> 
   <body> 
      <div class="leftdiv"> 
         <h1>GeeksforGeeks</h1> 
         <p>How many times were you frustrated while looking out 
         for a good collection of programming/algorithm/interview 
         questions? What did you expect and what did you get? 
         This portal has been created to provide well written, 
         well thought and well-explained solutions for selected 
         questions. 
      </p> 
         <h2>GeeksforGeeks</h2> 
         <p>GCET is an entrance test for the extensive classroom  
         programme by GeeksforGeeks to build and enhance Data  
         Structures and Algorithm concepts, mentored by Sandeep  
         Jain (Founder & CEO, GeeksforGeeks).He has 7 years of  
         teaching experience and 6 years of industry experience. 
      </p> 
      </div> 
      <div class="middlediv"> 
         <h1>GeeksforGeeks</h1> 
         <p>How many times were you frustrated while looking out 
         for a good collection of programming/algorithm/interview 
         questions? What did you expect and what did you get? 
         This portal has been created to provide well written, 
         well thought and well-explained solutions for selected 
         questions. 
         </p> 
         <h2>GeeksforGeeks</h2> 
         <p>GCET is an entrance test for the extensive classroom  
         programme by GeeksforGeeks to build and enhance Data  
         Structures and Algorithm concepts, mentored by Sandeep  
         Jain (Founder & CEO, GeeksforGeeks).He has 7 years of  
         teaching experience and 6 years of industry experience. 
         </p> 
      </div> 
      <div class="rightdiv"> 
         <h1>GeeksforGeeks</h1> 
         <p>How many times were you frustrated while looking out 
         for a good collection of programming/algorithm/interview 
         questions? What did you expect and what did you get? 
         This portal has been created to provide well written, 
         well thought and well-explained solutions for selected 
         questions. 
         </p> 
         <h2>GeeksforGeeks</h2> 
         <p>How many times were you frustrated while looking out 
         for a good collection of programming/algorithm/interview 
         questions? What did you expect and what did you get? 
         This portal has been created to provide well written, 
         well thought and well-explained solutions for selected 
         questions.      
         </p> 
      </div> 
   </body> 
</html>

使用Div標簽，我們可以覆蓋標題標簽和段落標簽之間的間隙，在此示例中，將顯示三個塊的Web布局。

輸出：
divtagblock

我們可以使用以下方法在任何部門使用CSS：

1.使用類：
我們可以在內部CSS或外部CSS的特定div上使用Class

如果是內部CSS：我們需要在<style>元素的HTML的<head>部分中定義Class。
如果是外部CSS：我們需要創建一個單獨的.css文件，並使用<link>元素將其包含在<head>部分的HTML代碼中。

該類名應與其他div中的其他類名不同，否則一個div中使用的CSS可能會影響另一劃分。

Code:

<html> 
   <head> 
      <link rel="stylesheet" href="color.css"> 
      <title> 
         gfg 
      </title> 
   </head> 
   <body> 
      <center> 
         <div class="color"> 
            <!--open tag of Div!-->
            <caption> 
               <h1>GEEKSFORGEEKS</h1> 
            </caption> 
            <h1>Inline CSS is not  USED in THIS method. 
            </h1> 
         </div> 
         <!--closing tag of Div!-->
      </center> 
   </body> 
</html>

顏色類的CSS：文件名color.css

.color 
{ 
height:400px; 
width:600px; 
border:1px solid; 
background-color:009900; 
}

在此示例中，我們對該特定Div使用了一個類。名稱為color.css的div屬性。這是一個單獨的文件，該文件通過此HTML代碼中的鏈接標記鏈接

Output:

2.內聯CSS：
我們可以直接在div中使用CSS，而且此方法不需要CLASS。 HTML編碼中的Div也用作容器標簽，因為它可以包含所有其他標簽。

Code:

<html> 
   <head> 
      <title> 
         gfg 
      </title> 
   </head> 
   <body> 
      <center> 
         <div style="height:300px; width:500px; color:white; 
            border:1px solid; background-color:009900;"> 
            <!--open tag of Div!-->
            <caption> 
               <h1>GEEKSFORGEEKS</h1> 
            </caption> 
            <h1>Inline CSS is USED in THIS method. 
               In this div no class is used. 
            </h1> 
         </div> 
         <!--closing tag of Div!-->
      </center> 
   </body> 
</html>

在這種方法中，我們在div標簽中應用了內聯CSS。通過使用樣式屬性，此樣式將應用於該特定div。

Output:

Difference Between Div tag and span tag

div和span標簽是使用HTML創建頁麵並對其執行不同函數時的兩個常見標簽
而div標簽是塊級元素，而span是內聯元素div標簽創建換行符，默認情況下，在標簽開始後到標簽以</div>結尾之間創建文本分隔。 div標簽為該標簽內的所有元素(如文本，圖像，段落)創建單獨的框或容器。

特性	Div標簽	跨度標簽
元素類型	Block-Level	Inline
空間/寬度	包含可用的整個寬度	僅采用所需的寬度
Examples	標題，段落，表格	屬性，圖片
Uses	Web-layout	soome文本的容器
Attributes	不需要，帶普通CSS，類	不需要，帶普通CSS，類

span標簽不會創建類似於div標簽的換行符，而是允許用戶在同一行內的頁麵上將事物與周圍其他元素分開。避免換行，隻會導致所選文本發生更改，並使周圍的所有其他元素保持不變。下麵的示例將顯示span和div標簽之間的區別，而div標簽包含整個寬度，而span標簽僅包含所需的寬度，其餘部分可用於其他元素。代碼：

<html> 
   <head> 
      <title>gfg</title> 
      <style type=text/css> 
         p{ 
         background-color:gray; 
         margin:10px; 
         } 
           
           
         div 
         { 
         color:white; 
         background-color:009900; 
         margin:2px; 
         font-size:25px; 
         } 
         span 
         { 
         color:black; 
         background-color:gray; 
         margin:5px; 
         font-size:25px; 
         } 
      </style> 
   </head> 
   <body> 
<!-- below some div tags -->      
  
      <div > div tag   </div> 
      <div > div tag   </div> 
      <div > div tag   </div> 
      <div > div tag   </div> 
        
<!-- below some span tags -->      
      <span>span-tag</span> 
      <span>span-tag</span> 
      <span>span-tag</span> 
      <span>span-tag</span> 
   </body> 
</html>

輸出：

spanvsdiv

支持的瀏覽器：<div>標簽支持的瀏覽器如下：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自AkashRawat大神的英文原創作品 HTML | Div Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。