要開始學網頁切版的第一步不免要先瞭解網頁的構成方式,網頁前瑞(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> – 頁首(檔頭)標籤,基本上都放一些不是給"人"看的資訊,像是關鍵字、網頁語言之類要供搜尋引擎辨讀的資訊。
<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> |