<div>: The Content Division element

<div> HTML 元素是流内容的通用容器。它对内容或布局没有影响，直到使用 CSS 以某种方式设置样式（例如，直接将样式应用于它，或者将某种布局模型（如 弹性盒）应用于其父元素）。

¥The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

Try it

作为 "pure" 容器，<div> 元素本质上并不代表任何东西。相反，它用于对内容进行分组，以便可以使用 class 或 id 属性轻松设置样式，将文档的一部分标记为以不同语言编写（使用 lang 属性），等等。

¥As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

属性

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

注意：align 属性已过时；不要再使用它了。相反，你应该使用 CSS 属性或技术（例如 CSS 网格 或 CSS 弹性盒）来对齐和定位页面上的 <div> 元素。

¥Note: The align attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position <div> elements on the page.

使用说明

¥Usage notes

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

无障碍

¥Accessibility

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

¥The <div> element has an implicit role of generic, and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.

示例

¥Examples

一个简单的例子

¥A simple example

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

结果

¥Result

一个样式化的例子

¥A styled example

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

¥This example creates a shadowed box by applying a style to the <div> using CSS. Note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element.

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

结果

¥Result

技术总结

¥Technical summary

内容类别 流量内容, 可触知的内容.
允许的内容 流量内容.
或者（在 WHATWG HTML 中）：如果父元素是 <dl> 元素：一种或多种 <dt> 元素，随后是一种或多种 <dd> 元素，任选地与 <script> 和 <template> 元素混合。
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 流动内容 的元素。
或者（在 WHATWG HTML 中）：<dl> 元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任何
DOM 接口 HTMLDivElement

规范

Specification
HTML Standard
# the-div-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also