<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> 元素本身并不表示任何内容。相反，它用于组织内容，以便通过使用 class 或 id 属性轻松应用样式，标记文档中以不同语言编写的部分（使用 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 Standard
# the-div-element

浏览器兼容性

BCD tables only load in the browser

参见