認識 div 標簽

大部分的 HTML 標簽都是有默認樣式的，如果我們不想使用標簽自帶的默認樣式，那么我們就需要借助 CSS 來清除這些默認樣式。那有沒有哪一個標簽是沒有默認樣式的呢？答案是肯定的，就是我們的 div 標簽。因為 div 標簽是沒有默認樣式的，所以在網頁布局時，我們更推薦使用 div 標簽去搭建我們網頁的結構，這樣我們所有的樣式都可以自定義了。

1. div 標簽的作用

div 標簽，稱為區(qū)隔標記。作用是設定字、畫、表格等的擺放位置。可定義文檔中的分區(qū)或節(jié)。div 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯(lián)。如果用 id 或 class 來標記 div，那么該標簽的作用會變得更加有效。div 就相當于一個區(qū)域，我們把我們網頁內容的都放在這個區(qū)域里面。

div 元素，是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。div 的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由 div 標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

2. div 標簽的用法

DIV 標簽為雙標簽，所以必須有首尾標簽。區(qū)域內的內容既為 div 標簽的內容。例如：

<div>
  我是一個div標簽  
</div>

那么在頁面上就會程序一下效果：

3. div 標簽的特點

1. div 標簽是塊級元素，默認占一整行，可以設置寬高。
如我們寫兩個 div 標簽，會呈現以下效果：

2. div 沒有任何的默認樣式，所以它不會像 P 標簽和 H 標簽一樣，有上下間距。
3. div 標簽里面可以嵌套其他任意標簽，例如：

<div>
  <p>我是div標簽里面的p標簽</p>
</div>

4. 我們可以給 div 設置任意的樣式。

4. 經驗分享

1. 因為 div 標簽沒有任何的默認樣式，所以我們推薦網頁時，使用 div 標簽。
2. 我們可以給某些單獨的標簽外層包裹一個 div，比如 img 標簽，a 標簽，這樣方便我們后續(xù)為其設置樣式。
3. div 為塊級元素，默認占一整行，如果想讓 div 在同一行排列，可以為其設置 CSS display 屬性，或者使用 flex（彈性盒模型）布局。
4. div 可以嵌套任意標簽，所以我們可以讓其他標簽和 div 標簽任意組合，來構成我們的網頁。

5. 真實案例分享

慕課網官網首頁（部分）

<div>
   <h4>慕課網APP - 隨時隨地學編程</h4>
   <div>
        <a> App Store下載 </a>
        <a >Android下載 </a>
        <p> 掃描下載慕課網APP </p>
     </div> 
 </div>

京東首頁（部分）

<div>
    <a >京東，多快好省</a>
</div>
<div><a> 京東會員 </a></div>
<div><a> 企業(yè)采購 </a></div>

6. 小結

1. div 標簽為雙標簽，它總是成對出現的，需要首標簽尾標簽。
2. div 標簽用來定義文檔中的分區(qū)或節(jié)。
3. div 標簽可以把文檔分割為獨立的、不同的部分。
4. 可以使用 div 元素來組合元素，這樣就可以使用樣式對它們進行格式化。
5. div 默認占一整行，而且沒有任何默認樣式。