<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>  

效果展示:

请登录

Email:
密码:

浏览器支持

所有主流浏览器都支持 <div> 标签。


标签属性

属性描述
alignleft
right
center
justify
HTML5 不支持。HTML 4.01 已废弃。 规定 <div> 元素中的内容的对齐方式。

全局属性

<div> 标签支持 HTML 的全局属性。


事件属性

<div> 标签支持 HTML 的事件属性。


相关