div 标签被称为 Division 标签。 div 标签在 HTML 中用于划分网页中的内容,如(文本、图像、页眉、页脚、导航栏等)。 Div 标签有打开(
- Div 标签是块级标签
- 这是一个通用的容器标签
- 它用于对 HTML 的各种标签进行分组,以便可以创建部分并对其应用样式。
众所周知,在这个例子中,div 标签是块级标签,div 标签包含整个宽度。每次都会在新行上显示 div 标签,而不是在同一行上。
示例 1:
gfg
div tag
div tag
div tag
div tag
输出:
我们知道 div 标签用于将 HTML 元素组合在一起,并在它们上应用 CSS 和 web 布局让我们看看下面的例子,不使用 div 标签。我们需要为每个标签应用 CSS(在使用H1 H2和两个段落p标签的示例中)
示例 2:
gfg
GeeksforGeeks
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.
GeeksforGeeks
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.
输出:
使用 Div 标签创建 Web 布局
div 标签是 div 标签内的一个容器标签,我们可以放置多个 HTML 元素,可以组合在一起,可以为它们应用 CSS。
div 标签可用于创建网页布局,以下示例显示了创建网页布局
我们也可以使用表格标签创建网页布局,但表格标签修改布局非常复杂
div 标签在创建网页布局方面非常灵活,并且易于修改。在下面的示例中,将显示使用 div 标签对 HTML 元素进行分组并创建块式 Web 布局。
例子:
gfg
GeeksforGeeks
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.
GeeksforGeeks
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.
GeeksforGeeks
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.
GeeksforGeeks
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.
GeeksforGeeks
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.
GeeksforGeeks
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.
使用 Div 标签我们可以覆盖标题标签和段落标签之间的间隙,在这个例子中将显示三个块的网页布局。
输出:
我们可以使用以下方法在任何部门使用 CSS:
1.使用类:
我们可以在内部 CSS 或外部 CSS 中对该特定 div 使用 Class
- 在内部 CSS 的情况下:我们需要在元素内的 HTML 的部分定义 Class。
- 对于外部 CSS:我们需要创建一个单独的 .css 文件,并使用元素将其包含在部分的 HTML 代码中。
类名应该与其他div中的其他类名不同,否则一个div中使用的CSS会影响另一个div。
- 代码:
gfg GEEKSFORGEEKS
Inline CSS is not USED in THIS method.
- 颜色类的 CSS:文件名color.css
.color { height:400px; width:600px; border:1px solid; background-color: 009900; }
在这个例子中,我们对那个特定的 Div 使用了一个类。名称为 color.css 的 div 属性。它是一个单独的文件,由此 HTML 代码中的链接标记链接
- 输出:
2. 内联 CSS:
我们可以直接在 div 中使用 CSS,这种方法也不需要 CLASS。 HTML 编码中的 Div 用作容器标签也是因为它可以包含所有其他标签。
- 代码:
gfg GEEKSFORGEEKS
Inline CSS is USED in THIS method. In this div no class is used.
在这个方法中,我们在 div 标签中应用内联 CSS。通过使用 style 属性,此样式将应用于该特定 div。
- 输出:
Div标签和span标签的区别
div 和 span 标签是使用 HTML 创建页面并对其执行不同功能时的两个常见标签
而 div 标签是块级元素,span 是内联元素 div 标签创建一个换行符,默认情况下在标签之后的文本之间创建一个分隔,直到标签以
Properties | Div Tag | Span Tag |
---|---|---|
Elements Types | Block-Level | Inline |
Space/Width | Contain Whole Width Available | Takes only required Width |
Examples | Headings, Paragraph, form | Attribute, image |
Uses | Web-layout | container for soome text |
Attributes | Not required,with common css, class | Not required,with common css, class |
span 标签不会创建类似于 div 标签的换行符,而是允许用户在同一行内的页面上将事物与它们周围的其他元素分开。避免换行,结果只改变选定的文本,保持它们周围的所有其他元素相同。
下面的示例将显示 span 和 div 标签之间的区别,而 div 标签包含整个宽度,span 标签仅包含所需的宽度,其余部分可用于另一个元素。
代码:
gfg
div tag
div tag
div tag
div tag
span-tag
span-tag
span-tag
span-tag
输出:
支持的浏览器:
- 谷歌浏览器
- IE浏览器
- 火狐
- 歌剧
- 苹果浏览器
HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。
CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。