要開始學網頁切版的第一步不免要先瞭解網頁的構成方式，網頁前瑞(front-end)主要是由三種不同的語法完成，分別是HTML、CSS和JavaScript，三種語法各別的功能如下：
- HTML > 網頁結構
- CSS > 網頁視覺
- JavaScript >網頁動態
大家一定覺得為什麼其中沒有jQuery語法，這裡先簡單介紹一下jQuery和JavaScript的關係。jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作，由約翰·雷西格（John Resig）在2006年1月的BarCamp NYC上釋出第一個版本。簡單說就是簡化過的JavaScript，所以相對好學，但功能就不像原生的JavaScript那樣強大。(維基百科)
介紹完組成網頁的三種語法後，接下來要先關心的就是網頁的核心語法HTML，所有的網頁都是從這個語法開始的，先來看看維基百科怎麼說好了~
超文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。(維基百科)
HTML結構大概會長得像下面這樣：
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>這是網頁標題</title> </head> <body> 這裡放網頁內容 </body> </html> |
標籤格式：
HTML標籤通常會有開始標籤和結束標籤
HTML結構：
<head> – 頁首(檔頭)標籤，基本上都放一些不是給"人"看的資訊，像是關鍵字、網頁語言之類要供搜尋引擎辨讀的資訊。
<title> – 網頁標題，顯示在瀏覽器標籤的名字 
<body> – 網頁內容，給"人"看的資訊，接下來學的東西大部份都是寫在這裡
常用HTML標籤：
<p></p> – 文字段落
|
1 |
<p>文字段落</p> |
<br/> – 換行
|
1 |
文字<br/>換行 |
<a></a> – 超連結
|
1 |
<a href="連結網址">按鈕</a> |
<img/> – 圖片
|
1 |
<img src="圖片位置"> |
<h1></h1>~<h6></h6> – 標題文字
|
1 2 3 4 5 6 |
<h1>最大</h1> <h2>標題文字</h2> <h3>標題文字</h3> <h4>標題文字</h4> <h5>標題文字</h5> <h6>最小</h6> |
<div></div> – 區塊物件
|
1 |
<div>區壞內容</div> |
