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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。