<div>:内容划分元素

HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响。

作为一个“纯粹的”容器,<div> 元素在语义上不表示任何特定类型的内容。然而,其可以将内容分组,从而可以使用class或是id属性方便的定义内容的格式,也可以在一段文档中划分标记出使用另一种语言书写的内容(使用lang 属性)等等。

所属内容分类Content categories Flow content, palpable content.
允许的子元素 Flow content.
Or (in WHATWG HTML): If the parent is a <dl> element: one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
Tag omission 不允许,开始标签和结束标签都不能省略。
允许的父元素 Any element that accepts flow content.
Or (in WHATWG HTML): <dl> element.
Permitted ARIA roles Any
所使用的DOM API 接口 HTMLDivElement

属性

该元素支持所有全局属性

注意: align 属性已废弃;不要再使用它了。你应当使用 CSS GridCSS Flexbox 来对齐、定位页面上的 <div> 元素。

使用备注

  • <div> 元素应当仅在没有任何其它语义元素(比如 <article><nav>)可用时使用。

示例

一个简单的例子

<div>
  <p>这里可以是任何内容,比如 &lt;p&gt;,
  &lt;table&gt;,一切由你作主!</p>
</div>

结果看起来像这样:

这里可以是任何内容,比如 <p>, <table>,一切由你作主!

实例:

样式实例

本例使用CSS将样式应用于<div>,从而创建一个阴影框。注意使用<div>上的 class属性将名为“shadowbox”的样式应用于元素。

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</p>
</div>

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);
}

结果

规范

规范 状态 备注
HTML Living Standard
<div>
Living Standard No changes since the latest snapshot
HTML5
<div>
Recommendation Obsoleted align
HTML 4.01 Specification
<div>
Recommendation

浏览器兼容性

BCD tables only load in the browser

参见