HTML Div 标签

2025 年 3 月 25 日 | 阅读 2 分钟

HTML <div> 标签用于将大量的 HTML 元素组合在一起。

我们知道每个标签都有特定的用途，例如 p 标签用于指定段落，<h1> 到 <h6> 标签用于指定标题，但 <div> 标签就像一个容器单元，用于封装其他页面元素并将 HTML 文档划分为多个部分。

div 标签通常被 Web 开发人员用来将 HTML 元素组合在一起，并一次性将 CSS 样式应用于多个元素。例如：如果你将一组段落元素包装在一个 div 元素中，那么你就可以利用 CSS 样式，一次性将字体样式应用于所有段落，而无需为每个段落元素编写相同的样式。

<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to tpointtech.com, Here you get tutorials on latest technologies.</p>
<p>This is second paragraph</p>
</div>

输出

欢迎来到 tpointtech.com，在这里您可以获得最新技术教程。

这是第二个段落。

HTML div 标签和 span 标签的区别

div 标签	span 标签
HTML div 是一个块级元素。	HTML span 是一个行内元素
HTML div 元素用于包装大块的元素。	HTML span 元素用于包装小部分文本、图像等。

HTML div 示例：登录表单

在此示例中，我们使用 div 标签创建一个框。框内有一个登录表单。让我们看看 CSS 和 HTML 代码。

CSS 代码

.loginform{
	padding:10px;
	border:1px solid pink;
	border-radius:10px;
	float:right;
	margin-top:10px;
}
.formheading{
	background-color:red;
	color:white;
	padding:4px;
	text-align:center;
}
.sub{
background-color:blue;
padding: 7px 40px 7px 40px;
color:white;
font-weight:bold;
margin-left:70px;
border-radius:5px;
}

HTML 代码

<div class="loginform">
<h3 class="formheading">Please Login</h3>
<form action="LoginServlet" method="post">
<table>
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td></tr>
</table>
</form>
</div>

输出