學習正確的撰寫HTML5文件並透過HTML標籤來設計你的網頁。
開始撰寫HTML
在Day3，我們建立了一個index.html，並透過瀏覽器呈現My First Website。 但這只是單純的顯示文字內容而已，若要讓HTML更佳豐富，我們就得認識HTML標籤。
HTML標籤
HTML標籤，通常以成對的標籤表示。
少數的標籤是不需要成對出現的，比如
<br>、<img>等。英文稱作empty elements。
<tag>要呈現的內容</tag>
注意第2個tag前面多了一個斜線
讓我們來看看同樣的內容，使用tag的前後差異。
有沒有發現不同標籤字體大小及粗體都不相同。這是HTML賦予這幾個標籤的基本的樣式。
| 標籤 | 意思 |
|---|---|
| h1 | 標題1 ，通常一個網站只會使用一個h1標籤代表最重要的標題 |
| h2 | 標題2 |
| h3 | 標題3 |
| p | 段落 |
你可以把標籤想成Word裡的樣式。不同樣式，都會讓內容產生不同效果。
除了上述幾個的標籤外，還有很多實用的標籤。可以參考此網站 。 雖然有很多標籤，但大家也不用緊張，隨著實作練習越來越多，慢慢的就會知道要使用哪些標籤了。
建立HTML環境
雖然我們可以直接將內容就寫在html檔案，但HTML的撰寫是有基本格式。要照著基本格式寫，網頁才不會出錯。
以下為基本的HTML格式，
主要由<html>、<head>及<body>三個標籤組成。
<!DOCTYPE html>
<html>
<head>
<title>Brady的網頁</title>
</head>
<body>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<p>段落</p>
</body>
</html>
-
<!DOCTYPE html>主要是告訴瀏覽器此文件是由HTML5撰寫。 -
<html>每個HTML都是由此標籤開始，裡面在放<head>、<body>兩個標籤。 -
<head>主要是儲存網頁的重要資訊。像是範例裡的<title>主要是顯示瀏覽器頁籤上的標題。
-
<body>主要是放網站的要呈現的內容。像先前我們介紹的<h1>、<p>等標籤。
總結
今天我們學到了HTML正確的格式，也學到了HTML標籤的使用。 下一次會在介紹更多常用的HTML標籤唷。