前端工程師密技大公開(一)-Div標籤怎麼用?
當前端工程師要撰寫網頁的時候,Div跟Span標籤就扮演重要角色,但你分的清它們的不同嗎?
撰寫 HTML 網頁時，可以用 <div> 或 <span> 標籤包住多種圖文、表格等元素，則這些被包起來的元素就被視為一個區塊。
<div> 與 <span> 的用法很相似，都能將 HTML 的內容分為不同的區域。差別是被 <span> 標籤包起來的元素，被瀏覽器視為一行；而被 <div> 包起來的元素，則被視為一個區塊。
<div> 或 <span> 的元素沒有特定的含意，如果與 CSS 一同使用， <div> 可針對較大的區塊內容定義其樣式；<span> 則是為行內部分內容或細節設定樣式。
| 目錄 1. 概述 2. Div 與 Span 標籤概述 2-1. Div 標籤概述 2-2. Span 標籤概述 |
Div 這個標籤可以解釋為區塊，目的是將內容分為不同的區塊 (block)，而每一個 Div 區塊可以根據 CSS 中宣告的樣式而定義其外觀。用 DIV 標籤包起來 (格式大致上是這樣<div>...</div>) 的元素，會被瀏覽器會視為一塊物件。你可以用 div 將網頁內容的各元素 (圖、文、表格等等) 包起來，再針對各區塊，去做 CSS 的排板。Div 是一個區塊級容器 (block-level container)，這代表在<div>與</div> 標籤後會換行。
如何將 CSS 樣式套用至 <div> 區塊?
一般來說要讓 <div> 區塊都會加個 「class 選擇器」 或是 「id 選擇器」 來套用 CSS 樣式，其語法格式會是 「 <div class="CSS 的 class 名稱">...</div> 」 或是 「 <div id="CSS 的 id 名稱">...</div> 」。「class 選擇器」 以及 「id 選擇器」 的說明，請見此兩篇： <CSS 的 ID 選擇器宣告法>、<CSS 的 Class 選擇器宣告法>舉例來說，前端工程師會用以下方式來定義 CSS 樣式
.block-1 {
color: blue;
font-family:微軟正黑體;
font-size: 20pt;
}
.block-2 {
color: red;
font-family:新細明體;
font-size: 16pt;
}
.block-3 {
color: green;
font-family: 標楷體;
font-size: 18pt;
}
<body>
<div class="block-1">這裡是網頁<h1>第一個區塊</h1>的內容</div>
<div class="block-2">這裡是網頁<span class="block-3">第二</span>個
<span class="block-1">區</span>塊的內容</div>
<div class="block-3">這裡是網頁<h3>第三個區塊</h3>的內容</div>
</doby>
則結果如下所示(左邊為 HTML、右邊為顯示結果)：在以上的例子中，我們可以了解到前端工程師所在意的三點：
1. <div> 是一個獨立的區塊容器 (block-level container)，所以會獨自占用一行。如以上的例子中，左邊的 HTML 碼沒有使用 <br> 來斷行，而是讓三個 <div> 藉由其區塊的特性而自動分行
2. 每個 DIV 包起來的區塊裡面都可以各自加入 <h1>、 <h3> 或 <span> 等標籤做規劃。如以上的例子中，第一個區塊 (<div class=".block-1">) 中就包含了 <h1> 標籤；第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤、第三個區塊 (<div class=".block-3">) 中就包含了 <h3> 標籤
3. SPAN 包起來元素，有別於 DIV 區塊，被瀏覽器視為一行。如以上的例子中，第二個區塊 ( <div class=".block-2"> ) 中就包含了兩個 <span> 標籤，但都在同一行內
更多閱讀:
想成為專業的前端工程師?千萬別錯過這篇CSS教學!
自從有前端工程師推薦的常用顏色懶人包,網頁變得超水的!
前端工程師常用的CSS竟然有父與子標籤?繼承關係怎麼看?
達內課程先就業再付款- 中時電子報
守住傳統但穩定的網路行銷課程-白帽SEO
人工智慧導入漁業;為消費者帶來品質優良的好蝦
SEO優化小撇步:執行robots meta和robots.txt的最佳時機
