Leave a commentJA Anything

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

要開始學網頁切版的第一步不免要先瞭解網頁的構成方式，網頁前瑞(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結構大概會長得像下面這樣：

 

標籤格式：

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

html_format

 

HTML結構：

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

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

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

 

常用HTML標籤：

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

<br/> – 換行

<a></a> – 超連結

<img/> – 圖片

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

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

Leave a Reply