HTML 内容划分元素
(
<div>
) 是用于流式内容的一般容器。它对内容 (或布局) 不起作用，直到样式使用
CSS
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
| 内容类别 | 流内容 ，可触及内容。 |
|---|---|
| 准许内容 |
流内容
.
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>
元素。
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts
flow content
.
Or (in WHATWG HTML):
<dl>
元素。
|
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLDivElement
|
此元素包括 全局属性 .
注意：
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.
<div>
element should be used only when no other semantic element (such as
<article>
or
<nav>
) is appropriate.
<div> <p>Any kind of content here. Such as <p>, <table>. You name it!</p> </div>
结果看起来像这样:
This example creates a shadowed box by applying a style to the
<div>
using CSS. Note the use of the
class
属性在
<div>
to apply the style named
"shadowbox"
to the element.
<div class="shadowbox"> <p>Here's a very interesting note displayed in a lovely shadowed box.</p> </div>
.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 实时标准
The definition of '<div>' in that specification. |
实时标准 | No changes since the latest snapshot |
|
HTML5
The definition of '<div>' in that specification. |
推荐 |
Obsoleted
align
|
|
HTML 4.01 Specification
The definition of '<div>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
div
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
align
弃用
非标
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
<section>
,
<article>
,
<nav>
,
<header>
,
<footer>
<span>
element for styling of phrasing content