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>
输出:
众所周知,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>
输出:
使用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布局。
输出:
我们可以使用以下方法在任何部门使用CSS:
1.使用类:
我们可以在内部CSS或外部CSS的特定div上使用Class
- 如果是内部CSS:我们需要在<style>元素的HTML的<head>部分中定义Class。
- 如果是外部CSS:我们需要创建一个单独的.css文件,并使用<link>元素将其包含在<head>部分的HTML代码中。
- 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; }
- Output:
该类名应与其他div中的其他类名不同,否则一个div中使用的CSS可能会影响另一划分。
在此示例中,我们对该特定Div使用了一个类。名称为color.css的div属性。这是一个单独的文件,该文件通过此HTML代码中的链接标记链接
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>
- Output:
在这种方法中,我们在div标签中应用了内联CSS。通过使用样式属性,此样式将应用于该特定div。
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>
输出:
支持的浏览器:<div>标签支持的浏览器如下:
- 谷歌浏览器
- IE浏览器
- Firefox
- Opera
- Safari
相关用法
注:本文由纯净天空筛选整理自AkashRawat大神的英文原创作品 HTML | Div Tag。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。