HTML 中的 div 标签-html教程-PHP中文网

在本文中，我们将了解 HTML 中的 div 标签。 HTML 有两个重要的标签，用于一组许多其他 HTML 标签和内容，一个是

。另一个标签是标签。 span标签用于一行中的一组内容和标签。与样式和不同标签的垂直分组是通过span标签进行的。 div 标签是一种划分标签，用于许多 HTML 标签，例如网页上的表格、列表和段落。大多数 div 标签使用一个空网页来分区或为内容或 HTML 标签创建一个部分。为某些特殊内容的 div 标签进行特定的设计很有用，因为它不会影响 div 布局和任何 CSS 设计。

语法：

各种 HTML 标签都有开始和结束标签，例如：

;
;

div 标签必须打开

并关闭

标签。必需的 HTML 标签和内容放在 div 标签内。

<div>
Content of Div tag in HTML
</div>

登录后复制

为了制作所需数据或内容的部分，在容器中使用多个 div 标签。例如：页眉、页脚、导航栏、表格、图像、文本等。我们可以使用 CSS 设计不同的 div 标签，并使用 JavaScript 轻松应用条件。

如何

标签可以在 HTML 中使用吗？

div标签可以将各种HTML标签和文本保存在一起。

您可以看到使用 div 标签和不使用 div 标签的示例。

a.使用

HTML 中的标签

代码：

<html>
<head>
<title>how to work div</title>
<style type=text/css>
.one{
background-color:orange;
}
.two{
background-color:yellow;
}
</style>
</head>
<body>
<div class="one" >
<h1> Content1 of div tag in Html </h1>
<p>   Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
</div>
<div class="two">
<h1> Content2 of div tag in Html </h1>
<p>   To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc. </p>
</div>
</body>
</html>

登录后复制

输出：

HTML 中的 div 标签

说明：

上面的考试是在 HTML 中使用 div 标签。第一个 div 为橙色，第二个 div 为黄色。
Div 包含标题标签和段落。两个div标签划分了不同内容的容器。

b.不使用

; HTML 中的标签

代码：

<html>
<head>
<title>how to work div</title>
<style type=text/css>
p{
background-color:orange;
}
h1{
background-color:yellow;
}
</style>
</head>
<body>
<h1> Content1 of div tag in Html </h1>
<p>   Div tag is used for a group many HTML tags like table, list, a paragraph on a web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
<h1> Content2 of div tag in Html </h1>
<p>   To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc.</p>
</body>
</html>

登录后复制

输出：

HTML 中的 div 标签

说明：

上面的示例没有在 HTML 中使用 div 标签。标题及其段落位于不同的部分。
标题为黄色，段落为橙色。所有标题及其内容段落都有不同的大小。

div 标签的用途

以下是div标签的用途和需求：

div 标签主要用于对标签和图像及其描述等元素进行分组。在网页中使用许多 HTML 标签来创建内容。所有 HTML 标签都是不同的，具有特定的含义。 div 标签组合了所有必需的 HTML 标签。
div 标签表示分区标签。在网页中，页眉、页脚、导航栏等许多实体，div 标签将许多部分放在一个容器中，使所有部分都变得优雅。
它可以轻松地使用 CSS 进行样式设置并使用 JavaScript 进行操作。它不会影响上下文和布局。使用 div 标签的 Steady 样式很简单。
div 标签对于网页来说非常有用，它看起来很有吸引力并且可以让用户理解内容。
消除 Web 开发人员程序的复杂性； div 标签很有用。

div 标签 HTML 示例

下面给出了提到的示例：

示例#1

这个例子是一个带有类的div标签。例如，左、中、右阶层。 div 是垂直放置的容器。但是我们可以在一个节中放置不同的div作为右侧、左侧或中间；这对于内容的位置管理很有用。

代码：

<html>
<head>
<title> Example1 </title>
<style type=text/css>
.leftdiv
{
float: left;
background-color:blue;
}
.middlediv
{
float: left;
background-color:green;
}
.rightdiv
{
float: left;
background-color:black;
}
div{
padding : 1%;
color: white;
background-color:grey;
width: 28%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h2> Left Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make a particular design for some special content div tag is useful because it does not
affect the div layout and any CSS design.
</p>
</div>
<div class="middlediv">
<h2> Middle Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</div>
<div class="rightdiv">
<h2> Right Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</p>
</div>
</body>
</html>

登录后复制

输出：

HTML 中的 div 标签

示例#2

表格的 div 标签。

在此示例中，我们为表格使用了 div 标签。有时表格布局会发生变化，但表格放入 div 标签后不会影响布局。

代码：

<html>
<head>
<title> Example2 </title>
<style type=text/css>
div{
color:white;
background-color:grey;
border:solid black;
}
tr, td{
border: 1px solid grey;
padding-top: 10px;
padding-bottom: 10px;
}
th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<div>
<h2> Student Information </h2>
<table>
<tr>
<th>student name</th>
<th>specialisation</th>
<th>city</th>
</tr>
<tr>
<td>vishu</td>
<td>computer and IT </td>
<td>kolkatta</td>
</tr>
<tr>
<td>john</td>
<td> graphics design</td>
<td> delhi</td>
</tr>
<tr>
<td>nagma</td>
<td> mechatronics</td>
<td>nagpur</td>
</tr>
<tr>
<td>erfan </td>
<td>animation video </td>
<td>mumbai</td>
</tr>
<tr>
<td> swadut </td>
<td> electronics</td>
<td> pune</td>
</tr>
<tr>
<td> manasi </td>
<td> CS </td>
<td> pune</td>
</tr>
</table>
</div>
</body>
</html>

登录后复制

输出：

HTML 中的 div 标签

示例 #3

带样式的 div 示例。

这是一个使用 CSS 样式的简单示例。

代码：

<html>
<head>
<title> Example3 </title>
<style>
div{
height:300px;
width:500px;
color:white;
border:1px solid;
background-color:grey;
}
</style>
</head>
<body>
<center>
<div>
<caption>
<h2> div tags in HTML</h3>
</caption>
<h3>
Div tag is division tag used for group many HTML tag like table, list, paragraph in web page.
</h3>
</div>
</center>
</body>
</html>

登录后复制

输出：

HTML 中的 div 标签