html lang用途HTML languageHTML description listinnerHTML styleinnerHTMLsection div差異

HTML Div用法及代碼示例- 純淨天空

文章推薦指數： 80 %
投票人數：10人

div標簽在HTML中用於對網頁中的內容進行分割，例如(文本，圖像，頁眉，頁腳，導航欄等)。

Div標簽同時具有open(

)和close(
)標簽，並且必須關閉標簽。

Div是Web ... 當前位置:首頁>>代碼示例 >>用法及示例精選 >>正文 div標簽稱為Division標簽。

div標簽在HTML中用於對網頁中的內容進行分割，例如(文本，圖像，頁眉，頁腳，導航欄等)。

Div標簽同時具有open(
)和close(
)標簽，並且必須關閉標簽。

Div是Web開發中最可用的標簽，因為它可以幫助我們分離出網頁中的數據，並且可以為網頁中的特定數據或函數創建特定的部分。

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

我們知道Div標簽是塊級標簽，在此示例中div標簽包含整個寬度。

每次將在新行而不是同一行顯示div標簽。

範例1：           gfg    p{   background-color:gray;   margin:10px; }    div {   color:white;   background-color:009900;   margin:2px;   font-size:25px; }             
divtag  
   
divtag  
   
divtag  
   
divtag  
        輸出： 眾所周知，div標簽用於將HTML元素組合在一起，並在其上應用CSS和Web布局。

讓我們看下麵的示例而不使用div標簽。

我們需要為每個標簽應用CSS(在示例中使用H1H2和兩段p標簽) 範例2：           gfg                 p{          color:white;          background-color:009900;          width:400px;          }          h1          {          color:white;          background-color:009900;          width:400px;          }          h2          {          color:white;          background-color:009900;          width:400px;          }                      

GeeksforGeeks

      

Howmanytimeswereyoufrustratedwhilelookingout        foragoodcollectionofprogramming/algorithm/interview        questions?Whatdidyouexpectandwhatdidyouget?        Thisportalhasbeencreatedtoprovidewellwritten,        wellthoughtandwell-explainedsolutionsforselected        questions.       

      

GeeksforGeeks

      

GCETisanentrancetestfortheextensiveclassroom        programbyGeeksforGeekstobuildandenhanceData        StructuresandAlgorithmconcepts,mentoredbySandeep        Jain(Founder&CEO,GeeksforGeeks).Hehas7yearsof        teachingexperienceand6yearsofindustryexperience.       

    輸出： 使用Div標簽創建Web布局div標簽是div標簽內的一個容器標簽，我們可以放置多個HTML元素，並且可以組合在一起並可以為其應用CSS。

div標簽可用於創建網頁布局，以下示例顯示創建網頁布局我們也可以使用表格標簽創建網絡布局，但是表格標簽修改布局非常複雜div標簽在創建Web布局時非常靈活，並且易於修改。

在下麵的示例中，將使用div標簽顯示HTML元素的分組並創建block-wiseWeb布局。

例：           gfg                 .leftdiv          {          float:left;          }          .middlediv          {          float:left;          background-color:gray          }          .rightdiv          {          float:left;          }          div{          padding:1%;          color:white;          background-color:009900;          width:30%;          border:solidblack;          }                                

GeeksforGeeks

         

Howmanytimeswereyoufrustratedwhilelookingout          foragoodcollectionofprogramming/algorithm/interview          questions?Whatdidyouexpectandwhatdidyouget?          Thisportalhasbeencreatedtoprovidewellwritten,          wellthoughtandwell-explainedsolutionsforselected          questions.       

         

GeeksforGeeks

         

GCETisanentrancetestfortheextensiveclassroom           programmebyGeeksforGeekstobuildandenhanceData           StructuresandAlgorithmconcepts,mentoredbySandeep           Jain(Founder&CEO,GeeksforGeeks).Hehas7yearsof           teachingexperienceand6yearsofindustryexperience.       

                       

GeeksforGeeks

         

Howmanytimeswereyoufrustratedwhilelookingout          foragoodcollectionofprogramming/algorithm/interview          questions?Whatdidyouexpectandwhatdidyouget?          Thisportalhasbeencreatedtoprovidewellwritten,          wellthoughtandwell-explainedsolutionsforselected          questions.          

         

GeeksforGeeks

         

GCETisanentrancetestfortheextensiveclassroom           programmebyGeeksforGeekstobuildandenhanceData           StructuresandAlgorithmconcepts,mentoredbySandeep           Jain(Founder&CEO,GeeksforGeeks).Hehas7yearsof           teachingexperienceand6yearsofindustryexperience.          

                       

GeeksforGeeks

         

Howmanytimeswereyoufrustratedwhilelookingout          foragoodcollectionofprogramming/algorithm/interview          questions?Whatdidyouexpectandwhatdidyouget?          Thisportalhasbeencreatedtoprovidewellwritten,          wellthoughtandwell-explainedsolutionsforselected          questions.          

         

GeeksforGeeks

         

Howmanytimeswereyoufrustratedwhilelookingout          foragoodcollectionofprogramming/algorithm/interview          questions?Whatdidyouexpectandwhatdidyouget?          Thisportalhasbeencreatedtoprovidewellwritten,          wellthoughtandwell-explainedsolutionsforselected          questions.               

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

輸出： 我們可以使用以下方法在任何部門使用CSS： 1.使用類：我們可以在內部CSS或外部CSS的特定div上使用Class 如果是內部CSS：我們需要在                         
divtag  
      
divtag  
      
divtag  
      
divtag  
                      span-tag       span-tag       span-tag       span-tag    

輸出： 支持的瀏覽器：

標簽支持的瀏覽器如下： 穀歌瀏覽器 IE瀏覽器 Firefox Opera Safari 相關用法 HTMLDOMDiv用法及代碼示例 HTML
align屬性用法及代碼示例 HTMLDivalign用法及代碼示例 HTML用法及代碼示例 注：本文由純淨天空篩選整理自AkashRawat大神的英文原創作品 HTML|DivTag。

非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。

請為這篇文章評分？

延伸文章資訊