HTML <div> 標簽

定義和用法

<div> 標簽定義 HTML 文檔中的分割或部分（分區或小節，division/section）。

<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

任何類型的內容都可以放在 <div> 標簽內！<div> 標簽可用作 HTML 元素的容器，然后使用 CSS 設置樣式或使用 JavaScript 進行操作。

如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。通過使用 class 或 id 屬性，可以輕松地對 <div> 標簽設置樣式。

注意：默認情況下，瀏覽器總是在 <div> 元素前后放置一個換行符。

用法

<div> 是塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。

不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。

可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。

另請參閱：

HTML 教程：HTML 塊元素和行內元素

HTML 教程：HTML 布局

HTML DOM 參考手冊：Div 對象

實例

文檔中使用 CSS 設置樣式的 <div> 部分：

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>這是 div 元素中的標題</h2>
  <p>這是 div 元素中的一些文本。</p>
</div>
</body>
</html>

親自試一試

案例分析

<body>
 <h1>新的網站</h1>
  <p>一些文字。一些文字。一些文字...</p>
  ...
 <div class="news">
  <h2>新聞頭條 1</h2>
  <p>一些文字。一些文字。一些文字...</p>
  ...
</div>
 <div class="news">
  <h2>新聞頭條 2</h2>
  <p>一些文字。一些文字。一些文字...</p>
  ...
 </div>
 ...
</body>

例子解釋

正如您看到的，上面這段 HTML 模擬了新聞網站的結構。其中的每個 div 把每條新聞的標題和摘要組合在一起，也就是說，div 為文檔添加了額外的結構。同時，由于這些 div 屬于同一類元素，所以可以使用 class="news" 對這些 div 進行標識，這么做不僅為 div 添加了合適的語義，而且便于進一步使用樣式對 div 進行格式化，可謂一舉兩得。

提示：如需更深入地學習 class 和 id 的用法，請閱《W3school 的結構化標記》這一章中 div、id 和其他幫手 這一節。

全局屬性

<div> 標簽還支持 HTML 中的全局屬性。

事件屬性

<div> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <div> 元素：

div {
  display: block;
}

親自試一試

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持