前端工程師一定都認識的標籤們,今天就雙手奉上了!(上)

前端工程師一定都認識的標籤們,今天就雙手奉上了!(上)

前端工程師一定都認識的標籤們,今天就雙手奉上了!(上)
前端工程師一定都認識的標籤們,今天就雙手奉上了!(上)

在今日不管你是不是前端工程師,都可以把這兩個標籤學起來,絕對會是未來的利器!

 

不管是前端工程師,或其他業餘或初學者,在撰寫 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; }

要如何使用 <div> 來套用其 CSS 樣式,其 HTML 碼如下所示:

<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特性

讓你對前端工程師具備的技巧游刃有餘!(中)Class選擇器

從零開始,Python課程帶你成為進擊的IT巨人!

張忠謀”很多工作將被AI取代”,但有python課程,我不怕!

 

網路行銷課程爆紅APP-打造屬於你的超Q人偶,一起跟好友互動!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *