認識 HTML

花了一些時間整理這份資料，除了當作我製作網頁時的筆記，也希望對所有網頁設計的初學者有所幫助。

大部分的初學者都會使用網頁編輯軟體來製作網頁，既方便又快速就能完成頁面，也因此對網頁僅存於圖文拼湊的概念。當你需要接觸到原始碼的時候，是否會為密密麻麻的標籤感到困惑，究竟這樣的堆疊會產生怎樣的化學變化，事實上要透視它並不難，而且了解網頁HTML，除了可以幫助你作出更乾淨清楚的網頁，當你逛網時看到有趣的頁面編排，就能透過原始碼了解這個網頁的構成。

首先，介紹 HTML網頁 的構成。

基本架構	1	<html>	html 起始標籤
	2	<head>	表頭起始標籤
	3	<title> 網頁標題 </title>	標題起始標籤├網頁標題┤標題起始標籤
	4	</head>	表頭結束標籤
	5	<body>	內文起始標籤
	6	這是內文	內文
	7	</body>	內文結束標籤
	8	</html>	html 結束標籤

一個基本的HTML網頁架構如圖，除了宣告此為html文件的標籤外，主要包含表頭和內文部份。這樣的原始碼編輯儲存成html檔後，上傳至網頁空間，瀏覽器即可辨識此為一HTML網頁，就形成可以瀏覽的網頁了。

HTML網頁是由許多的標籤構成，標籤會用 < > 符號包起來(例如： <head> )，而大部分的標籤會有起始標籤和結束標籤 ，中間包著內容，結束標籤會像這樣 </ > 表示(例如： </head> )，以 <指令> 開始，以 </指令> 結束。有些起始標籤裡會包含相關屬性內容，屬性宣告方式：屬性="數值"。
如圖最外層第一行和第八行分別是 <html> 和 </html> ，經由這兩個標籤瀏覽器可辨識此為一HTML網頁，而中間夾的就是此網頁的內容。標籤的順序會決定瀏覽器辨識的順序，所以表頭標籤會在內文標籤前面。
表頭標籤 <head> 和 </head> 包裹著 <title> 網頁標題 </title> ，這裡的網頁標題就是瀏覽器視窗最上頭的標題。表頭標籤裡還會放置一些關於該網頁的相關資訊、語言編碼、css樣式、Javascript...等的編寫。
<body> 和 </body> 裡包裹的就是網頁的主要呈現內容。