順利實作你的第一個網頁畫面

網頁開發常會聽到前端這個名詞，其實網頁就是透過前端的 HTML 去替版面排版，接著再用 CSS 去進行美化，合作的成果就變成了我們所看見的網頁畫面。
這篇文章就要揭開 HTML 的神秘面紗，讓大家對網頁畫面的排版可以更有概念。

❏ 什麼是標籤？

相信大家多少都知道網頁的畫面呈現，也就是我們所謂的排版，這跟 HTML 有很大的關係，其實 HTML 就是由標籤（tag）所組成的，最主要是希望能將內容標記成瀏覽器能懂的格式，透過將資訊標記成有架構的內容，稱為結構化。那又是要如何使用 tag 讓瀏覽器去定義網頁的文字並呈現在大家面前呢？

❏ 標籤的語法

HTML 標籤 (tag) 語法如下：

<h1>hello</h1>

從語法上，我們可以了解標籤有幾個特性：

標籤（tag）幾乎都是成對的，用 <> 前後包住要定義的區塊或文字。而結尾的標籤需要有 / ，寫成 </> 以表示結束。
標籤內的文字 hello，則是希望呈現在網頁上的內容。

在認識語法原則後，就可以知道更多不同種類的標籤，會帶來什麼樣的畫面效果，接著我們繼續往下認識更多 HTML 的標籤。

❏ 認識 - heading 標題標籤

接下來要跟大家介紹 h 標籤，而這個標籤很特別的地方則是會在 h 後面加上數字。其實這裡的 h 表示的是 heading，也就是標題的意思，而 heading 可以從 h1 分至 h6，在畫面上除了字級會越來越小，同時也是用來讓瀏覽器來判斷網頁上這段標題的重要性。

一個網頁通常只會有一個 h1，通常也是網頁的主標題，也是最重要的主概念，一個網頁可以一路標記到 h6，表示網頁內標題的重要性越來越低。

<h2>標籤</h2>

<h1>網頁菜菜子的一天</h1>

<h2>網頁菜菜子的一天</h2>

<h3>網頁菜菜子的一天</h3>

<h4>網頁菜菜子的一天</h4>

<h5>網頁菜菜子的一天</h5>

<h6>網頁菜菜子的一天</h6>

如果我們把這些文字打完存成 .html 的檔案，或放到 Codepen 上會發現字級有了些微的變化：

html- H tag 示範

因為我們時常會用字體的大小來強調標題的重要性，所以特別的 h 標籤就會使用數字 1~6 來告訴瀏覽器標題在網頁畫面上的重要性。

❏ 認識 - paragraph 段落標籤

無論是新聞網頁或是購物商城，除了標題之外，還需要搭配內文或描述文字，這個時候可以使用 <p> 標籤來標記段落。
舉個例子來說，如果我寫了一篇文章，內文一共有三段，我總不能用 <h6></h6> 來告訴大家這裡有三段文字，所以這個時候，我們可以使用 <p></p> 標籤，把我們每一段的內文的寫進去，這樣就可以清楚地告訴別人，內文裡有三段文字唷！

語法：

<p>段落內容</p>

該是時候來認識我們的 <p> 標籤了，那跟著菜菜子從下面的認識 p 標籤吧！


<p>我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段</p> 

<p>我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段</p>

<p>我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段</p>

還記得標籤的特性嗎？成對使用，並且結尾的標籤要使用 / 表示結束。而這裡的 p 指得是 paragraph 段落的意思。

可能看到剛剛的例子，有人會問，為什麼沒有 p 標籤沒有 h 標籤一樣用數字去劃分字級大小呢？

如果以字級大小來說，其實之後會學到 CSS，他可以控制畫面和字級，而 HTML 的任務是把網頁上的文字或是表格透過標記讓瀏覽器可以正確呈現給使用者知道，而數字的標記最重要是要讓瀏覽器知道，在整個網頁裡，哪一個最重要，又或是哪一個是次等重要的。

❏ 認識 - list 清單標籤

如果你想今天看衣服的購物網站，想要知道這件針織衫的特色有哪些，網頁上也許會用列表的方式呈現；又或是食譜可以依照步驟條列，這些都可以輕鬆使用清單標籤中的有序清單和無序清單來達成唷！

清單的標籤語法如下：

<li>內容</li>

首先我們已經使用 <li>內容</li> 告訴瀏覽器說這個網頁裡有個清單，接下來我們就要告知，這份清單是需要使用編號按照順序排序下去，這時就可以再內容的地方加上 有序清單 ol（order list） 的標籤來完成。

<ol>
 <li>打開冰箱</li>
 <li>拿出啤酒</li>
 <li>大口喝下</li>
</ol>

而加入有序清單的寫法，為 ol 標籤裡再包個 li 標籤。從上面的語法我們可以知道，一個標籤裡還可以在第二個標籤，這樣的寫法我們可以稱之為巢狀結構，像鳥巢一樣，一層層地包裹。

無序清單的使用時機，例如我們要陳列一堆條件，但沒有排序的需求，就可以使用 ul（unorder list) :

<ul>
 <li>打開冰箱</li>
 <li>拿出啤酒</li>
 <li>大口喝下</li>
</ul>

❏ 認識 - img 圖片標籤

如果你想在網頁置入一張圖片，就可以使用：

<img src="https://fakeimg.pl/300/" >

圖片標簽的來源如果從網路上的公開資訊取得，就可以直接帶入網址，我們稱這種方式為絕對路徑。

有沒有一種可能，是你自己的手繪插圖，並沒有發佈到網路上，僅存在你的本機端，如果是你在這個專案底下開了一個資料叫做 photos，專門放要製作網頁的圖片，裡面其中一張叫做 pic1，這時候我們要怎麼把這張圖片放上我們的網頁呢？這時候，只要使用相對路徑即可。

<img src="https://fakeimg.pl/300/" >

另外，我們引用圖片的時候，可能會發生圖片無法正常讀取的時候，這時候我們會加上圖片說明，讓搜尋引擎在圖片破圖時，可以顯示出你命名的文字，讓使用者可以更快解讀出這張無法顯示的圖片。

<img src="https://fakeimg.pl/300/" alt="這是我的圖片">

假設今天圖片失效，維護者也可以從 alt 的屬性中，了解原先要配置的圖片內容。

Google 也會對 alt 來判斷這張照片資訊，同時也可以讓無法看到圖片的使用者來理解圖片，所以 alt 盡量已簡短好理解的關鍵字來寫，留下正確的圖片資訊也是 SEO 優化很重要的要素。

❏ 認識 - 區塊標籤

div 可以解釋為區塊，用 div 標籤包起來的東西，瀏覽器會將包起來的地方視為一個區塊，我們可以將畫面分成很多區塊，並讚每個區塊放入放入排版的 HTML 標籤。

<div></div>

這樣子就是在網頁畫一個區塊，一個畫面可以切成很多區塊，每個區塊裡面都可以做些變化。

但問題來了，如果我們想在網頁裡面畫成上下兩個區塊，我們要各別給這兩個區塊名字，給他們一個值，這樣網頁才會知道這些變化分別在哪些區塊裡，所以值的表示可以這樣寫：

<div class="top">內容</div>

<div class="down">內容</div>`

這就是要告訴網頁，用 class 去告訴網頁：「這個網頁有用 HTML 分成兩個區塊唷」，用等於 ＝ 這個符號去告訴網頁我所分類的區塊，它的名字叫做 top ，另外一個容器叫 down 唷！

另外如果你僅僅只是貼上 div 標籤，裡面沒放內容物，那麼很有可能會顯示不來他的效果，因為就像我剛剛講的 div 是一個容器，裡面可放入你想要的文字或是清單標籤。若你寫了 div 標籤卻沒給他內容，就會看不出變化唷。

❏ 小結

網頁開發新手們可以試著把剛剛學會標籤，放到 Codepen 或是任何編輯器裡，存成 .html 的檔案，就會看到預期的變化效果！

而 HTML 的標籤不僅止於以上的介紹，網路上也有很多資源可以尋找，如果你想了解更多的標籤，也可以從 W3C 網站上的 HTML Tags 去知道其他標籤的使用方式。