<div> | HTML元素容器标签的定义与用法
定义与用法
- <div>标签定义 HTML 文档中的一个区块或者一部分。
- <div>标签用来组合块级元素,经常与 CSS 一起使用,用来布局网页。
- <div>标签就像一个容器单元,用于封装其他页面元素,并将HTML文档分为几部分。
提示:默认情况下,浏览器通常会在 <div> 元素前后放置一个换行符,我们您可以用 CSS 调整显示效果。
div标签和span标签的区别
div标签 | 跨度标签 |
---|---|
HTML div是一个block元素。 | HTML span是一个内联元素 |
HTML div元素用于包装大部分元素。 | HTML span元素用于包装文本,图像等一小部分元素。 |
语法格式
<div style=””>……</div>
示例代码
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>欢迎来到runoon.com,在这里您可以获得最新技术的教程。</p>
<p>HTML教程是重要的教程之一</p>
</div>
效果展示:
欢迎来到runoon.com,在这里您可以获得最新技术的教程。
HTML教程是重要的教程之一
DIV增强示例
<style>
.loginform{
padding:10px;
border:1px solid pink;
border-radius:10px;
float:left;
margin-top:20px;
}
.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;
}
</style>
<div class="loginform">
<h3 class="formheading">请登录</h3>
<form action="LoginServlet" method="post">
<table>
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr>
<tr><td>密码:</td><td><input type="password" name="password"/></td></tr>
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="登录"/></td></tr>
</table>
</form>
</div>
效果展示:
请登录
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
所有主流浏览器都支持 <div> 标签。
标签属性
属性 | 值 | 描述 |
---|---|---|
align | left right center justify | HTML5 不支持。HTML 4.01 已废弃。 规定 <div> 元素中的内容的对齐方式。 |
全局属性
<div> 标签支持 HTML 的全局属性。
事件属性
<div> 标签支持 HTML 的事件属性。