【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤

它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。

什麼是HTML標籤？

而HTML的語法，主要是由HTML標籤（HTML Tag）所組成，一個標籤通常會由一組小括弧及在小括弧裡頭放入一小段語意單字。

最常用的這四種標籤

1. h1
2. p
3. a
4. img

使用h1建立網頁標題

建立網站的內容，就跟寫作一樣，需要有起承轉合，也需要能幫助讀者釐清閱讀內容的「標題」。

在HTML中，有一系列專門建立標題的HTML標籤，他們通常以h開頭，從文字大小由大至小分別為h1h2h3h4h5h6

20210607-h1-h6

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

在建立一個標題時，我們可以使用該標籤的起始標籤及結尾標籤將文字包住，就可以建立出我們想要大小的標題了。

使用p建立網頁段落

建立好標題後，我們可以使用p標籤來建立文章段落，一組p/p就代表完整的一個段落，如果想要另起新的段落的話，我們就會使用第二組的p/p標籤：

20210607-p

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

使用a建立超連結

說完了h1及p標籤，大家現在對於HTML標籤就有了初步的認識，但要靠著這兩個標籤就想要排版出一段文章是不可能，所以接下來我就要介紹另外一個常常在網頁中看到的HTML標籤：a連結。

a連結與h1及p標籤一樣，都是成對的出現，並在其中放入我們想要的內容，但我們常見的超連結，除了會顯示連結的名稱外，點擊後來會連到其他網頁，這是怎麼做到的呢？

20210607-a

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

透過程式碼，我們可以看到a標籤與h1及p標籤有些不同，在a起始標籤的部分多了一段href="www.google.com"的文字。

在這裡只要先知道，在href=” ”的引號中，填入我們想要連結的網址，並一樣將顯呈現的文字內容填入成對的標籤內，就可以打造出超連結的效果。

通常我們並不會單一個a標籤自己存在使用，而是有可能與p段落混用，在一些特定的文字上加入連結，創造一些行銷的網頁效果。

從範例程式碼當中，我們可以了解到HTML標籤是可以被堆疊的，在一組標籤中，還可以建立出例外一組標籤，但使用時必須注意，這些標籤必須成對出現，不然就會出錯。

20210607-p&a

正確示範 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, sint! Corrupti asperiores sunt blanditiis, inventore cupiditate distinctio google dolores ratione id non dignissimos fugit perferendis, eligendi officiis, rerum suscipit consequuntur quaerat. 錯誤示範：沒有加上href Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, sint!

使用img建立圖片

學習a連結標籤後，我們接著要了解一個少數在HTML這個語言中，不成對的HTML標籤img。

20210607-img

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

透過img標籤我們可以很輕鬆的建立出一張圖片，從範例中我們可以看到，它只需要自己一個獨立標籤就能創造出效果，而不需要結尾標籤。

img除了是不成對的標籤外，他也有與文字標籤或是a標籤不同的屬性，分別為src及alt，兩個的意思分別為sourcs及alternative description，代表著圖片的來源及替代敘述。

我們可以在src=” ”中填入圖片網址，或是圖片在本機電腦的位置，就可以在瀏覽器當中呈現圖片了。

而alt=” ”的作用在於，圖片有時候可能會因為各種原因，像是網路不好、圖片連結失效而導致圖片失效，這時候在alt=” ”中填入替代文字，就可以在文字失效時帶入替代圖片出現的文字。

另外一個alt的作用在於，世界上有許多因視障而不良於使用網站的用戶，這些用戶可以使用特別的軟體，將網站內的內容讀出來，但因為圖片並不是文字，沒有辦法被讀取到，我們就必須加上alt裡的替代文字，創造無障礙的網站環境。

在初學網頁開發時，很多人都會偷懶不填alt裡的值，但其實這是網頁開發的大忌，因為沒有人可以完全保證這張圖片可以被另外一端的使用者看到，甚至可能會帶有歧視視障者的意味。

在今天章節當中，主要是要讓大家對於HTML標籤有初步的認識，後續會跟大家分享更多有關HTML標籤的基礎知識，請大家敬請期待！

關於網頁技術的問題，歡迎你下方留言跟我討論與交流：）

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

也許你會對這個有興趣：

【網頁開發】什麼是RWD？不只有工程師要懂的響應式網站設計 | Vivian Yeh - vocus

那段時間手機app還沒有那麼盛行，主要的網路行為都還是在網頁上，然而一個網頁的尺寸通常都是固定的，依照電腦的寬度通常都是設定在1000px上下， 小小的智慧型手機寬度也不過3、400px，要怎麼看這麼大的網頁？ 響應式設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。 ...

關於我：

2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com