HTML Div标签

本文概述

• HTML div标签和span标签之间的区别
• HTML div示例：登录表单
• 支持的浏览器

HTML <div>标记用于将大部分HTML元素组合在一起。

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

Web开发人员通常使用div标签将HTML元素组合在一起, 并将CSS样式一次应用于多个元素。例如：如果将一组段落元素包装到div元素中, 则可以利用CSS样式的优势并将字体样式立即应用于所有段落, 而不是为每个段落元素编码相同的样式。

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

立即测试

输出：

HTML div标签和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>

立即测试

输出：

支持的浏览器