三分鐘帶你掌握 html5 網站 設計基礎知識

三分鐘帶你掌握 html5 網站 設計基礎知識

想成為工程師、html5 網站 設計是你必須掌握的技能,本篇帶你從功能面了解建構網站需要使用的架構,讓你學習歷程不迷路
三分鐘帶你掌握 html5 網站 設計基礎知識
html5 網站 設計

文章索引

想成為工程師、html5 網站 設計是你必須掌握的技能,本篇帶你從功能面了解建構網站需要使用的架構、各架構又有哪些基礎知識,相信架設網站沒有你想得那麼難!

前端與後端的差異、各語言負責哪些部分

大家都知道網頁由前端與後端組成,當中的界線簡單來說,我們平時開啟網頁所看到的結果屬於前端,負責擷取輸入的資訊,後端則負責資訊處理,也就是後台管理系統。今天我們所要討論的範圍僅於前端,設計主要使用HTML5分別由:HTML(網站內容語言)、CSS(網站外觀語言)、JavaScript(網頁動態效果語言)構建而成。

HTML5如何定義網頁架構?當中又是怎麼組成的?

如果把HTML5比喻為人體,HTML相當於基因,確保器官能夠完整、CSS則是外貌、而Javascript如同思考擔當,負責指令的部分。

  • HTML:構建網頁的主架構
    HTML是Hypertext Markup Language的縮寫,序列包含標籤與內容,我們將利用標籤控制內容的呈現,例如字體大小、底線或粗體、表格或圖片等等,告訴瀏覽器如何呈現頁面。從出版到現在,HTML5經歷5次修改,說明它在網頁架構中的重要性,取代C語言成為一種規範。
  • CSS:描述網站外貌
    CSS是Cascading Style Sheets的簡寫,當中由多個規則構成,每個規則從選擇器、屬性與值設定構成,作用在於分隔HTML檔案的內容與顯現,讓HTML檔案只包含內容與架構資訊、CSS檔案則只包含樣式資訊。
  • JavaScript:負責指令碼語言
    JavaScript是以物件導向的腳本語言,隨網站下載至電腦中、透過瀏覽器翻譯、並與HTML混合,讓網站除了靜態內容外,也可以實現複雜的交互功能,例如3D圖形、控制影片播放、即時更新內容等等。

如何判斷網頁屬於 HTML5 網站 設計 ?

使用Chrome,並在網頁Ctrl+U可以看到網頁原始碼,只要第一行能看到<!DOCTYPE html>,瀏覽器就會照著HTML5標準構建網站。

電商網站 銷售頁設計

HTML5可以做什麼?

HTML5讓網頁直接播放影音、並提供事件觸碰的功能,實現雙向通訊的WebSocket,更可以獲取使用者地理資訊的Geolocation,並且讓瀏覽器能在背景運行其他的程式。

HTML5的功能一览
html5功能一覽(圖片來源:開源智造

HTML基礎標籤

稍早有提到HTML是Hypertext Markup Language的縮寫,而當中的Markup說明了HTML是一種標注語言,因HTML的作用是告訴瀏覽器應該具備哪些元素,進而堆疊出完整的頁面。以下列舉常見標籤的形式,更進一步了解使用的邏輯。

延伸閱讀:What is HTTP? 從生活中的故事一次看懂HTTP

獨立標籤:通常指的是網站的特定元素,不會改變到其他區域的內容

標籤簡述
<LI>項目
<br>分隔線
<hr>斷行

成對標籤:標註開始與結束之間的內容,也就是套用的範圍

標籤簡述
<h1></h1>標題(大小分為h1~h6)
<p></p>段落
<strong></strong>強調文字
<i></i>字體傾斜
<b></b>字體加粗

CSS選擇器簡介

CSS是一種階層樣式,負責定義版面設計,需要定義一個選擇器與聲明塊就可以搭建規則集,選擇器負責設定所選擇的HTML元素範圍外貌,聲明塊負責描述外觀樣式,每個聲明包含一個屬性名稱與值,並以冒號區隔、多個聲明會以分號區隔,便於閱讀及除錯。以下列舉三種常見選擇器用以說明。

選擇器簡述
類別選擇器「.」作為開頭的屬性值,能夠套用在多處地方
型態選擇器定義HTML裡的標籤、將套用網頁裡所有相同名稱的標籤
ID選擇器「#」作為開頭的屬性值,同一ID屬性值只可以套用一個地方
CSS 選取器
選擇器樣式(圖片來源:wordpress

Javascript的變數與常數

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

學習Javascript首先要認識變數、變數(Variable)就像空箱,可以先給箱子一個值(Value)、或是先宣告這裡有個空箱可以用,而當中的值可以被改變,也就是可以更改箱子的內容物,而常數就相當於是一個上鎖的箱子,放入的內容不能被修改,透過邏輯一步步構築規則、進而達到我們想要完成的指令功能。

參考文章:網頁上的設計戰爭|從0學起HTML5的基礎語法

相關文章