<div>:内容划分元素
<div>
HTML 元素是流式内容的通用容器。它对内容或布局没有影响。除非以某种方式使用 CSS 对其进行样式设置(例如,直接应用样式,或者对其父元素应用某种布局模型,如弹性盒子),否则它对内容或布局没有影响。
尝试一下
属性
使用说明
示例
一个简单示例
html
<div>
<p>这里可以是任何内容。例如 <p>、<table>。你说什么就是什么!</p>
</div>
结果
一个样式化示例
此示例通过使用 CSS 将样式应用于 <div>
来创建一个阴影盒子。注意在 <div>
上使用 class
属性将名为 "shadowbox"
的样式应用于元素中。
HTML
html
<div class="shadowbox">
<p>这是一张非常有趣的说明,陈列在一个可爱的影盒里。</p>
</div>
CSS
css
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
结果
无障碍考虑
<div>
元素具有一个隐含角色 generic
,而不是 none。这可能会影响某些 ARIA 组合声明,这些声明希望具有特定角色的直接后代元素能正常运行。
技术概要
内容分类 | 流式内容、可感知内容。 |
---|---|
允许的内容 | 流式内容。 或者(在 WHATWG HTML 中):如果父级是 <dl> 元素:一个或多个 <dt> 元素,后面跟一个或多个 <dd> 元素,可选择与 <script> 和 <template> 元素混合使用。 |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | 任何接受流式内容的元素。 或者(在 WHATWG HTML 中): <dl> 元素。 |
隐含的 ARIA 角色 | generic (en-US) |
允许的 ARIA 角色 | 任意 |
DOM 接口 | HTMLDivElement |
规范
Specification |
---|
HTML Standard # the-div-element |
浏览器兼容性
BCD tables only load in the browser