<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 進行樣式化(例如直接應用樣式或應用某種佈局模型,如 Flexbox 到其父元素上),否則它對內容或佈局沒有影響。

嘗試一下

作為「純粹」的容器,<div> 元素本身並不具有代表性。相反,它用於將內容分組,以便可以輕鬆地使用 classid 屬性進行樣式化,標記文件的某一部分為使用不同語言編寫(使用 lang 屬性),等等。

屬性

此元素包括全域屬性

備註: align 屬性已廢棄;請不要再使用。取而代之應該使用 CSS 屬性或技術,例如 CSS GridCSS Flexbox 來對頁面上的 <div> 元素進行對齊和定位。

使用注意事項

  • 只有在沒有其他語義元素(例如 <article><nav>)適用時,應使用 <div> 元素。

範例

簡單範例

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

結果

帶樣式的範例

此範例通過使用 CSS 對 <div> 應用樣式來創建一個陰影框。請注意,在 <div> 上使用 class 屬性來將名為 "shadowbox" 的樣式應用於該元素。

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

結果

無障礙議題

<div> 元素具有隱含的 generic 角色,而不是沒有。這可能會影響某些 ARIA 組合聲明,這些聲明期望具有特定角色的直接後代元素才能正常運作。

技術摘要

內容類型 流內容捫及內容
允許的內容 流內容
或(在 WHATWG HTML 中):如果父元素是 <dl> 元素:一個或多個 <dt> 元素,後跟一個或多個 <dd> 元素,可選地與 <script><template> 元素交錯。
標籤省略 不允許,開始和結束標籤都是必須的。
允許的父元素 任何接受流內容的元素。
或(在 WHATWG HTML 中): <dl> 元素。
隱含的 ARIA 角色 generic
允許的 ARIA 角色 任何
DOM 介面 HTMLDivElement

規範

Specification
HTML
# the-div-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
div
align
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

參見