HTML | Div标记

div标签被称为Division标签。div标签在HTML中用于对网页中的内容进行划分,例如(文本、图像、页眉、页脚、导航栏等)。Div标签既有open(

null
)标签,也有closing(

)标签,必须关闭标签。Div是web开发中最有用的标记,因为它帮助我们分离网页中的数据,我们可以为网页中的特定数据或功能创建特定的部分。

  • Div标签是块级标签
  • 它是一个通用的容器标签
  • 它用于HTML的各种标记组,以便可以创建节并对其应用样式。

正如我们所知,Div tag是块级标记,在本例中,Div tag包含整个宽度。每次都会在新行上显示div tag,而不是在同一行上。 例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(在示例中使用 H1H2 和两段 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标记可用于创建网页布局,下面的示例显示如何创建网页布局 我们也可以使用tables标签创建web布局,但是table标签修改布局非常复杂 div标签在创建网页布局时非常灵活,易于修改。在下面的示例中,我们将使用div标记对HTML元素进行分组,并创建分块的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使用类

  • 如果是内部CSS: 我们需要在 内的HTML部分

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享