<div>：内容分隔元素

基线 广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本上运行。它已在浏览器中可用，自 2015 年 7 月.

<div> 元素是用于流内容的通用容器。在使用 HTML 时，它本身对内容或布局没有影响，直到通过某种方式使用 CSS 进行样式设置（例如，样式直接应用于它，或者在其父元素上应用某种布局模型，如 Flexbox）。

试一试

作为“纯”容器，<div> 元素本身并不代表任何特定含义。相反，它用于对内容进行分组，以便于使用 class 或 id 属性进行样式设置，标记文档的一部分是用不同的语言编写的（使用 lang 属性），等等。

属性

此元素包含 全局属性。

注意：align 属性已过时；请勿再使用它。相反，您应该使用 CSS 属性或技术（例如 CSS Grid 或 CSS Flexbox）来对齐和定位页面上的 <div> 元素。

使用说明

  • 只有在没有其他语义元素（例如 <article> 或 <nav>）适用时，才应使用 <div> 元素。

无障碍访问

<div> 元素具有 隐含的 generic 角色，而不是 none。这可能会影响某些 ARIA 组合声明，这些声明期望具有特定角色的直接后代元素才能正常工作。

示例

一个简单的示例

html
<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

结果

一个带样式的示例

此示例通过使用 CSS 将样式应用于 <div> 来创建一个阴影框。请注意，在 <div> 上使用 class 属性将名为 "shadowbox" 的样式应用于元素。

HTML

html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</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);
}

结果

技术摘要

内容类别 流内容，可感知内容。
允许的内容 流内容.
或者（在 WHATWG HTML 中）：如果父元素是 <dl> 元素：一个或多个 <dt> 元素，后跟一个或多个 <dd> 元素，可以选择性地与 <script> 和 <template> 元素混合。
标签省略 无，开始和结束标签都是必需的。
允许的父元素 任何接受 流内容 的元素。
或者（在 WHATWG HTML 中）：<dl> 元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任何
DOM 接口 HTMLDivElement

规范

规范
HTML 标准
# the-div-element

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅