首頁 » 網站設計 » 網頁上的設計戰爭|從0學起HTML5的基礎語法

網頁上的設計戰爭|從0學起HTML5的基礎語法

網頁上的設計戰爭

網頁上的設計戰爭|從0學起HTML5的基礎語法

  HTML5在智慧型手機與平板電腦盛行的今日,成功取代Flash成為瀏覽器的主流,彙集了所有的前端網頁設計語言,包含HTML、CSS,以及JavaScrip,以及歷代的優勢,有效的縮短網頁與應用程式之間的差距,讓使用者願意接受,連帶也讓瀏覽器與應用程式開發人員更願意採用HTML5。

如何使用HTML5定義網頁的架構及內容呢?

  先以人體來比擬整個網頁架構,HTML負責的就是整體的架構,也就是保證器官的完整性不會缺手缺腳,CSS的話就是負責視覺外觀,決定樣貌的呈現,大腦神經的部分就是由JavaScript組成,主要負責將靜態網頁轉換成動態網頁。

  下面我們會帶大家快速攻略HTML5基本的語法,以及了解新的HTML5到底更新了什麼新的標籤:

HTML

  在英文全名中Hypertext Markup Language.的「Markup」帶有用螢光筆標註文字的意涵,也相當指出為何HTML是一種標記語言而不是程式語言,HTML將文字標記,賦予某種屬性,負責告訴瀏覽器應該要有哪些元素,例如頭、身體、腳……等,層層堆疊出一個完整的網頁。

而元素的組成如下:

元素(element)=標籤(tags)+內容(content)

  HTML的元素是屬於「巢狀元素」,每個元素都有自己的起始與結束標籤,我們可以利用標籤控制內容呈現的樣子,例如字體大小、粗細、顏色……等。

認識標籤

  HTML中的標籤指的是用<>框住可以控制屬性的文字,通常又可以分為「獨立標籤」與「成對標籤」。

獨立標籤

通常是網頁上的一個特定元素,不會改變其他區域的內容。

常用標籤說明
<br>分隔線
<hr>斷行
<LI>表單項目

成對標籤

起始標籤與結束標籤之間的内容,就是標籤標註套用的範圍,且起始標籤加上斜線/即為結束標籤。

常用標籤說明
<p></p>段落
<h1></h1>標題,最小可以到h6
<strong></strong>加強文字
<b></b>粗體
<i></i>斜體

成對標籤原則

程式執行的時候,成對標籤必須滿足下列三個原則,才能讓結果順利顯示,否則就會產生不明的錯誤:

  • 順序原則 – 先有起始標籤,才會有結束標籤。

<起始標籤>龐果設計 </結束標籤>

  • 對應原則 – 有起始標籤就一定要有結束標籤,成雙成對的出現。

<起始標籤1>

<起始標籤2>龐果設計 </結束標籤2>

</結束標籤1>

  • 巢狀原則 – 如果標籤範圍裡面有其他的標籤就必須遵守以上兩項原則。

<div>

<h1>龐果設計</h1>

</div>

HTML5完整架構

  在HTML的改版下,新增了新的内容元素,比如 article、footer、header、nav、section,只要善用標籤,便可以讓搜尋引擎精準搜索到標籤頁面,進而提升SEO的搜索分數。

CSS

  CSS為階層樣式表,負責定義WEB的版面設計,語法的運用也不複雜,只需要定義一個選擇器與聲明塊就可以組成規則集。CSS選擇器負責設定所要選擇的HTML元素外觀,聲明塊在花括號的內容則是在描寫外觀樣式的敘述,每個聲明皆包含一個屬性名稱和一個值,並且以冒號隔開,多個聲明則會用分號分隔,以便於區隔以及除錯。

CSS選擇器

常見的選擇器有下列三種:

選擇器說明
型態選擇器定義在HTML上的標籤,會套用於網頁上所有名稱相同的標籤。
ID選擇器「#」開頭的屬性值,同一個ID屬性值只能套用在一個地方。
類別選擇器「.」開頭的屬性值,可以套用在多個地方。

  CSS時常被人們提到的「階層」關係,其實就是在相同的HTML元素中套用不一樣的樣式,這些樣式會按照優先級順序,也就是選擇器優先順序顯示。

CSS單位量詞

  如果你有仔細觀察會發現,CSS在文字設定的部分是有單位量詞的,其中大家最熟悉的莫過px,與電腦螢幕的解析度px都是相同的概念。

 單位說明
px絕對單位螢幕最小的一點
em相對單位透過倍數乘以父元素的 px 值,簡單來說1em=20px。
rem相對單位透過倍數乘以根元素的 px 值,簡單來說1rem=16px。
vw相對單位相對於視窗的寬

  不管是哪個單位其實都有適合他們使用的時刻,例如px在需要彈性的部分就不太適合使用,所以CSS的規則都是參考居多,沒有所謂的標準,只要能更彈性便捷就是好方法。

HTMLCSS的關係

  在網頁設計中HTML與CSS同為標記語言,而他們的分工合作的模式又被稱為「內容與呈現的分工(Separation of presentation and content)」,現代網路開發的設計原則之一,主要的重點就是讓網頁的原始碼回歸乾淨俐落,讓設計師與工程師可以同步進行網頁設計。

JavaScript

  JavaScript身為HTML5互動思考的擔當,它所使用的語法基本都是受JAVA、C,以及C++等程式語言的影響,JavaScript特別的點在於,它是沒有輸入或輸出的觀念,必須在瀏覽器下才能執行的腳本語言,透過程式碼的運行可以讓靜態網頁動起來。

  在程式碼當中,每行指令都必須用分號「;」作為結尾,如果忘記使用分號也不用擔心,在ECMAScript的規範中,在解讀程式碼時會自動將分號補上進行解讀,但是在大多時候分號的缺漏很容易成為找不到的BUG,因此在每行程式的結尾補上分號會大大減少需要除錯的可能。

變數宣告

JavaScript與其它程式語言不同有多達三種宣告方式,其中較常從原始碼中看見端倪的就是以var,var是用來宣告一個可隨意更改其內容的變數,關鍵字則必須遵循字母、底線及錢字號「$」為開頭的前提。

var x = 1;

這裡要強調一件事在JavaScript中大小寫是無法混用的,var / VAR / Var對JavaScript來說就是三種不同的變量,因此在撰寫程式時,請務必注意這點,另外如果想宣告一個可以隨便改變內容的區塊變數,那就必須使用let的宣告方式。

If (true){

  let y = 13;

}

這邊的結果顯示會出現錯誤,因為let定義的數值只能在區域裡使用。

常數宣告

通常是透過const來宣告一個不可改變的常數,並且命名的規則與變數相同都必須遵循著以字母、底線及錢字號「$」作為開頭。程式執行之時,就不能改變常數的值,所以常數的值通常會有下列兩中須注意的部分:

  1. 數字可以允許有小數點標誌

與其他程式語言不同,JavaScript不會定義不同類型的數值,例如整數、浮點數……等,根據國際IEEE 754標準,JavaScript的數值是以雙精浮點數來存取。

const p = 3.14 ;

  • 文字必須以雙引號(” ”)、單引號( ‘ ’)標示

如果沒有使用引號標示,那它將會成為無效字串。

const x =”龐果設計”;

HTML5新增標籤

  HTML5簡化了以往在HTML處理影音多媒體資料的型態,不需要再把影片上傳到像 Youtube 等第三方影音平台,再用嵌入的方式來播放影片,可以直接使用<標籤>,在自己的網站上完成所有動作。

新媒體標籤說明
<audio>聲音檔
<video>影片檔
<embed>嵌入的多媒體動畫檔

  Canvas為HTML原生標籤之一,在更新之後透過JavaScript把網頁當成畫布,運用一些數學公式、三角函數、圓周率定理……等在上面盡情揮灑色彩,也可以用來合成圖、建立動畫,甚至是處理即時的影片播放。

新畫布標籤說明
<canvas>定義畫布區域,配合JavaScript的繪圖API程式

  HTML5新增了一些表單的屬性,能夠省去開發者寫javascript的麻煩,讓表單的擴充性得到很大的提升。

新表單標籤標籤新增屬性說明
<form>  autocomplete  定義整份表單欄位是否啟動自動完成功能
<input>  Autocomplete欄位是否啟動自動完成功能
 Placeholder欄位的提示說明內容
 Required必填的欄位
 Type欄位的類型

在〈網頁上的設計戰爭|從0學起HTML5的基礎語法〉中有 7 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top