iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
自我挑戰組

迷路的前端工程系列 第 2

第二日:請說明 HTML5 的特徵

  • 分享至 

  • xImage
  •  

在學習之前,我們不了解一個網頁是怎麼產生的沒關係,但既然都踏上路了就先看一下吧~

HTML(HyperText Markup Language,超文本標記語言)是打造網頁的基石。它表述並定義網頁的內容。伴隨 HTML 而來的技術還有描述網頁外觀(CSS)及功能性的程式語言(JavaScript)。

取自MDN

簡單來說呢,你蓋一棟小木屋, HTML 就是建材,而 CSS 負責雕刻、刷色,而 JavaScript 負責水電管理,你可以不架設水管電線,也可以不幫木頭裝飾,但你看到的就會是一個由木頭堆起來的房子。
不過呢,基本架構還是要先出來才能進行後續動作,因此今天就先來介紹 HTML 以及 HTML5 吧。

HTML 首次公開由最早提姆·柏內茲-李於1991年底提及,不過這在當時只是個草案而已,直到在1995年完成"HTML 2.0",這是第一個旨在成為對其後續實現標準的依據的HTML規範,在歷經了多個版本以及更改後到了2014年10月 HTML5 正式成為現在全球資訊網協會(World Wide Web Consortium,縮寫:W3C)所認定標準。

而 HTML5 與 HTML4 有著些許的區別,其中個人覺得比較有意思的在這裡提出:
HTML4 當初在發行時提供了三個變化,透過標頭來宣告,分別為

  • 嚴格:過時的標籤無法使用。
  • 過度:過時的標籤被允許。
  • 框架集:大多只與框架的標籤額外被允許。

以嚴格標準模式宣告為例,在當時需要這樣宣告:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

而現在 HTML5 的宣告方法非常的簡單:

<!DOCTYPE html>

講完了宣告方式,再來講講 HTML5 的特性
1.語義特性
HTML5 提供了比 HTML4 非常多的語意化標籤,當你在進行爬蟲要去找資料時你只要根據你所需要的內容去搜尋相對印的標籤名稱即可。
2.本地存儲特性
在HTML5 出來之前,這個特性代表作為 Http Cookie,不過只支援 4KB,而 HTML5 的本地存儲特性提供了 5MB 的空間讓使用者不用每次都需要讀取重複的資源。
3.設備兼容特性
HTML5 提供了許多數據接口,讓外部設備也可以讀取網路的資料來進行作業。
4.網頁多媒體特性
HTML5 新增了 Audio 與 Video 音效及影片標籤,減輕了 JavaScript 的使用。
5.3D,圖形及特效特性
基於可縮放向量圖形(SVG)、Canvas 標籤、WebGL、CSS3 的 3D 功能,提升了在瀏覽器的視覺效果。
6.連接特性
Server-Sent Event 以及 WebSockets 技術降低了 Http Request 的次數,以WebSockets 舉例:在以往,即時聊天室透過間格時間短的不斷請求讓你獲得最新資訊,而現在,只需伺服器與瀏覽器通過一個握手動作,建立 TCP 通道,就可以雙向接收資訊。
7.性能與集成特性
HTML5 透過 XMLHttpRequest2 等技術來使 web 應用程式以及網站在多樣化環境更快的進行工作。

好啦~今天有關於 HTML5 的介紹就到這裡,接下來幾天會快速的介紹一些基本的標籤,讓我們明天見!

小抱怨專區:
忽然想去把以前在筆試過程中只在 HTML5 新特性填寫語意化標籤的自己宰了,學藝不精啊。


上一篇
第一日:手中的道具及技能
下一篇
第三日:再一次的向世界問好
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言