RWD網頁切版(零){HTML網頁架構、常用標籤}

要開始學網頁切版的第一步不免要先瞭解網頁的構成方式,網頁前瑞(front-end)主要是由三種不同的語法完成,分別是HTMLCSS和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結構大概會長得像下面這樣:

 

標籤格式:

HTML標籤通常會有開始標籤和結束標籤

html_format

 

HTML結構:

<head> – 頁首(檔頭)標籤,基本上都放一些不是給"人"看的資訊,像是關鍵字、網頁語言之類要供搜尋引擎辨讀的資訊。

<title> – 網頁標題,顯示在瀏覽器標籤的名字 title

<body> – 網頁內容,給"人"看的資訊,接下來學的東西大部份都是寫在這裡

 

常用HTML標籤:

<p></p> – 文字段落

<br/> – 換行

<a></a> – 超連結

<img/> – 圖片

<h1></h1>~<h6></h6> – 標題文字

<div></div> – 區塊物件

Leave a Reply