<div>：內容分隔元素

基線 廣泛可用

此功能已得到良好建立，可在許多裝置和瀏覽器版本上執行。它已在瀏覽器中可用，自 2015 年 7 月.

<div> 元素是用於流內容的通用容器。在使用 HTML 時，它本身對內容或佈局沒有影響，直到透過某種方式使用 CSS 進行樣式設定（例如，樣式直接應用於它，或者在其父元素上應用某種佈局模型，如 Flexbox）。

試一試

作為“純”容器，<div> 元素本身並不代表任何特定含義。相反，它用於對內容進行分組，以便於使用 class 或 id 屬性進行樣式設定，標記文件的一部分是用不同的語言編寫的（使用 lang 屬性），等等。

屬性

此元素包含 全域性屬性。

注意：align 屬性已過時；請勿再使用它。相反，您應該使用 CSS 屬性或技術（例如 CSS Grid 或 CSS Flexbox）來對齊和定位頁面上的 <div> 元素。

使用說明

  • 只有在沒有其他語義元素（例如 <article> 或 <nav>）適用時，才應使用 <div> 元素。

無障礙訪問

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

示例

一個簡單的示例

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

結果

技術摘要

內容類別 流內容，可感知內容。
允許的內容 流內容.
或者（在 WHATWG HTML 中）：如果父元素是 <dl> 元素：一個或多個 <dt> 元素，後跟一個或多個 <dd> 元素，可以選擇性地與 <script> 和 <template> 元素混合。
標籤省略 無，開始和結束標籤都是必需的。
允許的父元素 任何接受 流內容 的元素。
或者（在 WHATWG HTML 中）：<dl> 元素。
隱式 ARIA 角色 generic
允許的 ARIA 角色 任何
DOM 介面 HTMLDivElement

規範

規範
HTML 標準
# the-div-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱