<div>:內容分區元素
嘗試一下
作為「純粹」的容器,<div>
元素本身並不具有代表性。相反,它用於將內容分組,以便可以輕鬆地使用 class
(en-US) 或 id
(en-US) 屬性進行樣式化,標記文件的某一部分為使用不同語言編寫(使用 lang
(en-US) 屬性),等等。
屬性
此元素包括全域屬性 (en-US)。
備註: align
屬性已廢棄;請不要再使用。取而代之應該使用 CSS 屬性或技術,例如 CSS Grid 或 CSS Flexbox (en-US) 來對頁面上的 <div>
元素進行對齊和定位。
使用注意事項
範例
簡單範例
html
<div>
<p>
Any kind of content here. Such as <p>, <table>. You name it!
</p>
</div>
結果
帶樣式的範例
此範例通過使用 CSS 對 <div>
應用樣式來創建一個陰影框。請注意,在 <div>
上使用 class
(en-US) 屬性來將名為 "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 (en-US) HTML 中):如果父元素是 <dl> 元素:一個或多個
<dt> 元素,後跟一個或多個
<dd> 元素,可選地與
<script> 和
<template> 元素交錯。
|
標籤省略 | 不允許,開始和結束標籤都是必須的。 |
允許的父元素 |
任何接受流內容的元素。 或(在 WHATWG (en-US) HTML 中): <dl> 元素。
|
隱含的 ARIA 角色 | generic (en-US) |
允許的 ARIA 角色 | 任何 |
DOM 介面 | HTMLDivElement (en-US) |
規範
Specification |
---|
HTML Standard # the-div-element |
瀏覽器相容性
BCD tables only load in the browser