Day09 【前端入門，入門前端】區塊標籤

2023 iThome 鐵人賽

DAY 9

Modern Web

15th鐵人賽

overcast3579

2023-09-24 01:53:52

437 瀏覽

分享至

前端入門，入門前端。學前端，如標題簡單。

嗨，大家好
我們從 Day06 開始認識了許多標籤，有只要在中間加文字的標籤、還有父子層級關係的標籤、也有需要添加屬性的標籤......(當然還有一些沒有講到的)。
這些標籤組合在一起，會形成像這樣的網頁基本架構。

下圖截自yahoo首頁

如果我們仔細去看每個頁面，會發現其實頁面都是由一個區塊一個區塊組合而成的(每個紅框都是一個獨立的區塊，針對同一個頁面每個人畫出的區塊不一定會一樣)。

所以頁面的組成會是像這樣：
區塊1 -> 區塊裡面有很多標籤
區塊2 -> 區塊裡面有很多標籤
區塊3 -> 區塊裡面有很多標籤
區塊4 -> 區塊裡面有很多標籤

把區塊1.2.3.4都各自處理好以後，再放進 <body> </body> (忘記為什麼是body請看Day04)。
當然區塊1底下可能還會分成「區塊1-1」、「區塊1-2」、「區塊1-3」，然後才個別用標籤組出「區塊1-1」、「區塊1-2」、「區塊1-3」，也可能「區塊1-1」底下還有「區塊1-1-1」......以此類推。
簡單來說網頁就是以標籤為最小單位，組合出一個一個區塊，再將區塊互相組合再組合再組合，最終變成我們看到的頁面。

所以我們需要一個「區塊標籤」，用來包覆這區塊所有的標籤(直白的說就是，區塊標籤是父，屬於這區塊的標籤是子)。

區塊標籤 `<div> </div>`

區塊標籤用的是 <div> </div> 英文的 division，使用方法很簡單，就是包住同一個區塊的內容。
舉例來說，假設我的網頁現在有一個表格、標題+內文+圖片 (這個組合有三組)、一個有序清單、一個無序清單，我的程式碼可能會像這樣：

    <table> 
        <tr>
            <th>標題一</th>
            <th>標題二</th>
            <th>標題三</th>
        </tr> 
        <tr>
            <td>第一列第一欄</td>
            <td>第一列第二欄</td>
            <td>第一列第三欄</td>
        </tr> 
        <tr>
            <td>第二列第一欄</td>
            <td>第二列第二欄</td>
            <td>第二列第三欄</td>
        </tr> 
    </table>
    <h3>標題</h3>
    <img src="https://fakeimg.pl/300x200/900">
    <p>內容</p>
    <h3>標題</h3>
    <img src="https://fakeimg.pl/300x200/900">
    <p>內容</p>
    <h3>標題</h3>
    <img src="https://fakeimg.pl/300x200/900">
    <p>內容</p>
    <ul>
        <li>香腸</li>
        <li>肉片</li>
        <li>蛤蠣</li>
    </ul>
    <ol>
        <li>登入</li>
        <li>選擇</li>
        <li>付款</li>
    </ol>

因為所有的標籤都是兄弟關係，我們也沒有辦法分辨哪些屬於一起的。
這時我們就可以透過區塊標籤 <div> </div> ，把屬於一個區塊的標籤包在一起，看起來會很清楚明瞭。

    <div>
        <table> 
            <tr>
                <th>標題一</th>
                <th>標題二</th>
                <th>標題三</th>
            </tr> 
            <tr>
                <td>第一列第一欄</td>
                <td>第一列第二欄</td>
                <td>第一列第三欄</td>
            </tr> 
            <tr>
                <td>第二列第一欄</td>
                <td>第二列第二欄</td>
                <td>第二列第三欄</td>
            </tr> 
        </table>
    </div>
    <div>
        <h3>標題</h3>
        <img src="https://fakeimg.pl/300x200/900">
        <p>內容</p>
    </div>
    <div>
        <h3>標題</h3>
        <img src="https://fakeimg.pl/300x200/900">
        <p>內容</p>
    </div>
    <div>
        <h3>標題</h3>
        <img src="https://fakeimg.pl/300x200/900">
        <p>內容</p>
    </div>
    <div>
        <ul>
            <li>香腸</li>
            <li>肉片</li>
            <li>蛤蠣</li>
        </ul>
        <ol>
            <li>登入</li>
            <li>選擇</li>
            <li>付款</li>
        </ol>
    </div>

這樣就清楚知道原來表格是一個區塊、每組標題+內文+圖片是一個區塊、清單是一個區塊。
這樣有什麼好處呢？
最直接的就是當我們要進行排版的時候 (排版就是把東西排列到他該放的位置，通常這會由CSS去控制，將來講CSS時會提到)，只要搬動最外面的div，裡面的內容就會跟著一起搬移了。
舉個例子，
今天我們要整理房間，發現房間裡有100樣小雜物，我們有兩種方法處理：
1.可以把這100樣東西一個一個搬到某個地方，房間清理完畢後再一樣一樣搬回來。
2.把這100樣東西進行分類 (假設分成5類)，每類裝成一個盒子，這樣我們就只要搬5個盒子就好了，因為裡面的東西會跟著盒子一起被搬移。

相信第二種會是比較有效率的做法。
放進盒子就像把程式碼包成一個區塊，只要控制外面的盒子 (<div> </div>)，裡面的內容自然跟著移動了。除此之外這樣整個網頁的架構也會更清晰更明確。

HTML5的區塊標籤

雖然說包成區塊讓整體架構更清晰，但其實仍有改善空間。怎麼說呢？還記得在Day07講表格時我們說過，全部都是<tr></tr>，瀏覽器沒有辦法分辨哪一行是表頭，哪裡是內容，哪裡是表尾。
現在也面臨到一樣的問題，讓我們再看一次剛剛切割後的yahoo首頁。

用人類的語言來說，這些區塊其實是會有名稱的，例如：導覽列、側邊欄、文章區塊、主要區塊、頁尾......
同樣的，我們也可以更明確的告訴瀏覽器每個區塊是什麼，讓我們看看吧。

<header></header>：頁首，通常包含標題、logo、導覽列、搜尋......。
<footer></footer>：頁尾，通常包含版權、作者信息、聯繫方式.....。
<nav></nav>：導覽列。
<main></main>：主內容區塊，一個頁面只可以出現一次(跟 <h1></h1> 一樣)
<article></article>：這一區塊的內容是獨立且完整的(你把<article></article>以外的東西都刪除，也可以知道他在表達什麼，例如像是一篇文章或是一則留言)
<section></section>：每一個 <section> 應該是網頁主題的一個相對獨立的部分。
兩個section的主題應該會是不同的，兩個article的主題有可能相同。
<aside></aside>: 用來表示和頁面主要內容不直接相關，但可能對讀者有用的信息，比如側邊欄。