<div>:内容划分元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<div> HTML 元素是流式内容的通用容器。它对内容或布局没有影响。除非以某种方式使用 CSS 对其进行样式设置(例如,直接应用样式,或者对其父元素应用某种布局模型,如弹性盒子),否则它对内容或布局没有影响。

尝试一下

作为一个“纯粹的”容器,<div> 元素本身并不表示任何内容。相反,它用于组织内容,以便通过使用 classid 属性轻松应用样式,标记文档中以不同语言编写的部分(使用 lang 属性)等等。

属性

这个元素包含全局属性

备注: 请勿再使用已过时的 align 属性;相反,你应该使用 CSS 属性或技术,例如 CSS 网格布局CSS 弹性盒子来对齐和定位页面上的 <div> 元素。

使用说明

  • 只有当没有其他合适的语义元素(例如 <article><nav>)时,才应使用 <div> 元素。

示例

一个简单示例

html
<div>
  <p>这里可以是任何内容。例如 &lt;p&gt;&lt;table&gt;。你说什么就是什么!</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
允许的 ARIA 角色 任意
DOM 接口 HTMLDivElement

规范

Specification
HTML
# the-div-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
div
align
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

参见