認識 HTML
HTML 是所有網頁的基礎,不論是透過軟體設計網頁,還是直接撰寫程式碼,甚至是透過後端伺服器產生網頁,最後都一定是透過 HTML 來呈現,而且因為 HTML 屬於「標記語言」,只要熟悉規則,就可以非常快速的做出一個簡單的網頁。
快速導覽:
HTML 是什麼?
HTML 又稱作超文本標記語言 ( HyperText Markup Language ),從字面上來看是一種「透過文字進行標記的語言」,意思是指「透過不同的元素標記出整個網頁架構」,不同的元素在網頁中擁有各自不同的意義,例如標記表格的元素負責呈現表格結構,標記清單的元素負責呈現清單的長相,標記圖片或影片的元素則可以在網頁裡顯示圖片或影片。
HTML 是所有網頁的基礎,不論用何種程式開發網頁,最終輸出的結果一律使用 HTML 呈現,只要是網頁裡可以看到的任何東西,例如圖片、影片、音樂、地圖、圖表...等,都是使用 HTML 呈現,但有些元素需要額外搭配 CSS 或 JavaScript 輔助,才能達到更理想的效果。
HTML5 又是什麼?
HTML5 是 2014 年 10 月所推出的 HTML 最新修訂版本,廣義的 HTML5 時,指的是涵蓋 HTML、CSS 和 JavaScript 的一套技術組合,HTML5 加入了許多新的語法,其中包括 video、audio 和 canvas 元素,搭配 SVG 內容之後,使得許多影音圖形效果,能夠更完美的在網頁中呈現。此外,HTML5 也加入許多新的標籤,例如 section、main、header、nav...等,透過標籤文字的提示,讓網頁更具結構性與可讀性。
目前所有的主流瀏覽器都支援 HTML5,大多數的網站也都使用 HTML5 的規範進行網頁的開發,也因為 HTML5 的出現,原本像是透過 flash 等動畫軟體所設計的網頁也都逐漸淘汰,網頁 HTML 也變成了目前主流的學習項目之一。
查看 HTML 檔案
單純的 HTML 網頁編輯完成後 ( 不是後端動態產生的網頁 ),透過任何一個瀏覽器 ( Chrome、Firefox、Safari...等 ),都可以開啟 HTML 檔案,通常只要用滑鼠在該檔案上方連點兩下,電腦就會使用預設的瀏覽器開啟。
但如果要使用不同的電腦或行動裝置瀏覽,就必須將 HTML 上傳到「網頁空間」,過去在網頁剛起步的年代,網頁空間非常盛行,隨著時空環境移轉,各個網頁空間開始逐漸凋零,因此除了自己架設在本機網頁環境,免費網頁空間可能要參考 Google Blogger、WordPress.com、Github...等服務,或是使用付費的網頁空間服務。
HTML 和 CSS、JavaScript 的關係
雖然 HTML 可以獨立建構出一個網頁,但通常需要搭配 CSS 與 JavaScript,才能完整建構出一個視覺與功能兼具的網頁。如果將整個網頁看作是一個「人」,HTML 和 CSS、JavaScript 的關係如下表所示:
- HTML:靜止的「全裸人體」( 純粹網頁架構和內容 )。
- CSS:替全裸的人體加上「膚色、髮色、化妝、衣物...等」裝扮 ( 增加顏色、樣式、動畫效果...等 ),CSS 教學參考:CSS 教學。
- JavaScript:賦予「認知能力、社交能力、互動能力...等」超能力 ( 互動程式、各種服務串接、後端串接、...等 )。
小結
HTML 雖然看起來是程式語言,但實際上卻是「標記語言」的一種,只要熟悉規則,就可以很快速的掌握其開發技巧,而且所有的網頁都是由 HTML 構成,只要熟悉 HTML,就可以更輕鬆的跨入網頁設計或網頁開發的領域!
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~