div标签被称为Division标签。div标签在HTML中用于对网页中的内容进行划分,例如(文本、图像、页眉、页脚、导航栏等)。Div标签既有open(
)标签,必须关闭标签。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 > |
输出:
正如我们所知,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 > |
输出:
使用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布局。
输出:
我们可以使用以下方法在任何部门使用CSS:
1.使用类: 我们可以在内部CSS或外部CSS中对特定的div使用类
- 如果是内部CSS: 我们需要在 内的HTML部分