<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="warning"> <img src="/shared-assets/images/examples/leopard.jpg" alt="An intimidating leopard." /> <p>Beware of the leopard</p> </div> 
.warning { border: 10px ridge #f00; background-color: #ff0; padding: 0.5rem; display: flex; flex-direction: column; } .warning img { width: 100%; } .warning p { font: small-caps bold 1.2rem sans-serif; text-align: center; }

作为一个“纯粹的”容器，<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
# the-div-element

浏览器兼容性

参见