前言
在【HTML、CSS、JavaScript 的角色分工與入門認識】這篇文章中，我們了解了網頁開發的 HTML、CSS、Javascript 概念，今天就來單獨為建立網頁的內容與架構的 HTML 寫一篇文章！
當開始學 HTML 時，很多人可能會遇到一個問題，就是看到一堆不同的標籤，除了前一篇文章介紹的<html></html>、<head></head>、<body></body>之外，還有像是 <div>、<span>、<p>、<button> 各式各樣的標籤，卻不知道用途與差別，希望這篇文章可以用簡單的方式，幫助大家快速建立基礎觀念~什麼是 HTML 標籤 (Tag)
複習一下，HTML 利用標籤 (Tag) 來描述網頁內容。
基本語法像是：
<標籤>內容</標籤>
範例：
<h1>我是大標題</h1>
這裡的 <h1> 是開始標籤、</h1> 是結束標籤、中間的文字則是內容，瀏覽器看到這段 HTML 後，就會知道被標籤包住的內容是一個網頁的大標題。
常見 HTML 標籤
1. 標題標籤：<h1> ~ <h6>
HTML 提供六種不同層級的標題，<h1> 最大，<h6> 最小
<h1>最大標題</h1>
<h2>第二層標題</h2>
...
<h6>第六層標題</h6>
HTML <h1> 到 <h6> 效果展示
2. 段落標籤：<p>
<p> 是 paragraph 的縮寫，用來放置一般文字內容，通常網頁中的介紹文字、說明文字，幾乎都會用 <p>。
<p>段落一</p>
<p>段落二</p>
當連續寫兩個 <p></p> 標籤，瀏覽器會自動幫我們把內容拆成兩塊，即使文字只有一點點，瀏覽器還是會讓這個標籤獨佔一整行，這樣可以獨佔一行的元素叫「區塊元素 (block)」。
HTML <p> 段落標籤效果展示
3. 超連結標籤：<a>
<a> 是 anchor 的縮寫，用來建立超連結。
<a href="https://google.com">前往 Google</a>
這裡的 href 是 HTML 屬性，用來指定要前往的網址，讓使用者可以從這個頁面跳到另一個頁面。
HTML <a> 超連結標籤效果展示
4. 圖片標籤：<img>
<img> 用來顯示圖片。
<img src="cat.jpg" alt="一隻貓咪">
src 用來標示圖片位置，alt 則是替代文字，當瀏覽器無法從 src 設定的路徑找到圖片時，就會用 alt 設定的文字替代。
另外，眼尖的你一定也有發現，這個 <img> 沒有 </img>，我們稱呼這種特殊的標籤叫做「空標籤」，因為這個標籤不需要包住內容，自然也就不需要收尾啦。
5. 按鈕標籤： <button>
<button> 用來建立按鈕，讓使用者可以點擊互動。
<button>點我</button>
上面範例的按鈕沒任何作用，但一般來說 button 都會搭配 Javascript 做出更多互動效果，例如：
- 點擊送出表單
- 開啟視窗
- 切換畫面
- 跳出提示訊息
6. 區塊容器：<div>
<div> 可說是 HTML 中最最最常見的標籤，本身沒有特殊功能，通常是拿來分區塊或是排版用，預設也是區塊元素。
<div>
<h1>文章標題</h1>
<p>文章內容</p>
</div>
7. 小範圍文字容器：<span>
<span> 和 <p> 有點像，但通常用於小範圍文字，比如今天想為了幾個字設定特殊的樣式，就可以用 <span> 把文字包起來。
<p>今天的<span>天氣很好</span></p>
<span> 與 <p> 最大的差異在於，如果連續寫了兩個 <span>：
<span>Span 容器一</span>
<span>Span 容器二</span>
可以看到 <span> 元素並不會自動換行，這種元素叫做「行內元素 (inline)」。
HTML 標籤的「屬性（Attribute）」
除了標籤本身之外，HTML 還有「屬性」。
語法如下：
<標籤 屬性="值"></標籤>
<!--如果是像 <img> 這種空標籤，則不需要後面的 </標籤> -->
在前面的 <a>、<img>範例裡，其實已經悄悄劇透了：
<a href="https://google.com">前往 Google</a>
<img src="cat.jpg" alt="一隻貓咪">
像是 <a> 標籤中的 href 與 <img> 標籤中的 src 都是屬性，而 ="" 包住的內容是值。
屬性的作用是提供標籤更多資訊，不同標籤會有不同的屬性。
總結
HTML 的標籤很多，今天介紹的幾個標籤只是冰山一角~~ 雖然 HTML 標籤很多，但新手寶寶們也不用急著全部記住，寫多了自然而然就會記住啦 (菸~
今天的文章只專注在常見的 HTML 標籤，所以呈現的內容會超級陽春，但當開始搭配 CSS 與 Javascript 後，就能慢慢做出真正完整又漂亮的網頁了！
下一篇文章預計會繼續分享：HTML 常見的語意化標籤 (semantic tags)
如果有興趣歡迎繼續關注我的文章~
