当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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