- 您好！欢迎来到鲲鹏知舟
HTML <div> 标签
HTML <div>标记被用于到组大断面HTML元素一起。
我们知道每个标签都有特定的用途，例如 p 标签用于指定段落，<h1> 到 <h6> 标签用于指定标题，但 <div> 标签就像一个容器单元，用于封装其他页面元素并将 HTML 文档划分为多个部分。
Web 开发人员通常使用 div 标签将 HTML 元素组合在一起，并将 CSS 样式一次应用于许多元素。例如：如果您将一组段落元素包装到一个 div 元素中，这样您就可以利用 CSS 样式并将字体样式一次应用于所有段落，而不是为每个段落元素编码相同的样式。
<!DOCTYPE> <html> <body> <div style="border:1px solid pink;padding:20px;font-size:20px"> <p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p> <p>This is second paragraph</p> </div> </body> </html>
输出：
欢迎来到 Javatpoint.com，在这里您可以获得有关最新技术的教程。
这是第二段。
HTML div 标签和 span 标签的区别
| div 标签 | 跨度标签 |
|---|---|
| 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代码：
<!DOCTYPE>
<html>
<head>
<style>
.loginform{
padding:10px;
border:1px solid pink;
border-radius:10px;
width:300px;
margin-top:10px;
}
.formheading{
background-color:red;
color:white;
padding:4px;
text-align:center;
}
.sub{
background-color:red;
padding: 7px 40px 7px 40px;
color:white;
font-weight:bold;
margin-left:70px;
border-radius:5px;
}
</style>
</head>
<body>
<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>
</body>
</html>输出：
请登录
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <div> | Yes | Yes | Yes | Yes | Yes |
-
使用社交账号登录,本站支持
全部评论(0)