HTML 是什麼？HTML基礎教學認識常用元素

接下來讓我們熟悉一些常見的 HTML 元素，在這個單元我們會認識和內容整理直接相關的 HTML 標籤。在這裡主要是讓大家試著玩一下 CodePen，快速認識常用的標籤，熟悉開發環境。可能無法一口氣消化 HTML 的細節，請放心，之後我們實作「我的履歷切版」時，都會複習關於每個標籤的細節說明。

現在，請準備好你的 CodePen，準備試玩！

文字

首先在 CodePen 的 HTML 編輯區裡輸入一段文字，並且刻意換行。這段文字內容出現在顯示區裡，但卻沒有跟著換行。

段落文字：p

如果我們想強調「一段文字」，需要使用 <p> 標籤，被包起來的內容就自動換行了：

<p> 標籤的意思很直白，就是一段文字，paragraph 的意思。

斷行：br

如果不打算強調「文字段落」的感覺，只是很單純想換行，可以使用 <br> 標籤，這個標籤是 break 的意思：

文字換行了，而且行與行之間的距離比 <p> 標籤小。

標題

在 HTML 規格裡為你準備了六級標籤，分別用 <h1> 到 <h6> 依序表示：

不同層級的標題大小不同，很明顯 h1 最大，然後依序變小。

愈有意義的資訊，就應該使用愈高的標題層級。

項目清單

除了標題與內文以外，有時候還會需要舉例，列出幾點類似的觀點整理在一塊，在網頁語言中當然也有相對應的存在：

這個 <ol> 跟辦公室辦公的 OL 是完全不ㄧ樣的概念，<ol> 是 ordered list 的縮寫，而 <li> 就是 list。工程師為了讓程式語言兼具可讀性和短小精悍，因此電腦語言中往往存在許多「縮寫」。

當你使用 <ol> 標籤的時候，它會自動幫你在每個內文的前面加上數字索引！

如果你今天不想要數字，你也可以使用另一個叫做 <ul> 的標籤：

原本的數字就會變成小黑點！

超連結

我們可以使用 <a> 在文件中加上超連結，超連結 (hyperlink) 就是會連到另一個網頁的入口，它需要和 href 屬性搭配使用：

<a> 是 anchor 的縮寫，也就是「錨點」，剛問世時都叫他「超連結」。網頁上的內容可以互相連來連去，這種互相串聯的特質叫做 hyper，超文字、超連結等用語裡的「超」都是在對譯這個 hyper。現代人對這種功能沒那麼驚奇了，叫他「連結」就好。

<a> 需要和 href 屬性搭配使用，href 是 hyper reference 的縮寫，代表「超連結的參照位址」，這都是正經八百的用語，總之我們需要用 href 屬性設定目標網址。

圖片

插入圖片

有了連結還不夠，我想加點圖片，讓畫面好看一點，這對網頁而言也是小菜一碟：

<img> 就是 image。這個標籤要搭配 src 屬性，代表來源 (source)，這裡我們準備好一張書桌圖片給你試玩：https://bit.ly/2OHjuJJ

alt 屬性用來設定圖片的替代內容 (alternative)，當瀏覽器無法成功顯示圖片時，就會直接提供這種替代內容。平常可以空白沒關係，但如果是專業的網站就需要考慮無障礙使用，當使用者用語音撥放網站內容時，就會把圖片的 alt 屬性內容念出來。

沒有結尾標籤

雖然說 <img> 是不用寫結尾標籤的！雖然就算你寫了，瀏覽器也不會說你錯：

瀏覽器相當博愛的一視同仁，它不會硬要你修正，畫面也是正常秀出，不過這算是好事嗎？很難說，因為開發者難免會在無意間犯下一些顯而易見的錯誤，加上 <img> 標籤官方也表明是不需要結束標籤的，網頁結構越照著規則走，瀏覽器自然也越能正確解讀你所撰寫的 HTML。

圖片不預設換行

最後我們來注意一個小細節，請在 img 標籤下方隨意輸入內容，看看新的文字出現在哪裡：

新文字會接在圖片旁邊，這表示瀏覽器沒有把「圖片」當成一個「段落」，對瀏覽器來說，圖片像文字一樣都是互相黏在一起的元素。

分割區塊：div

如果想要讓圖片獨立佔用一行的話，常見作法是在外層包一個 <div> 元素：

<div> 代表 division，也就是一個分割區塊。這個標籤本身沒有暗示「裡面放了什麼內容」，但我們常常用 <div> 把元素「打包」在一起。

做為一個「區塊」，被 <div> 會佔滿一整行，所以被打包成獨立區塊的圖片就和後面的文字分開了。

這個 <div> 是一個超級常用的標籤，這裡我們先簡單介紹一下，大概有個印象就好，之後還會一直出現。

註解

想要在 .html 文件裡寫點筆記，但又不想干擾程式碼時，就可以使用註解 (comment)，HTML 的註解是用 <!-- 和 --> 來包圍一段內容：

被註解包圍的內容會被瀏覽器忽略。