[MAN鐵人賽]Day 02-[課前準備]淺談HTML5

摘要:[MAN鐵人賽]Day 02-[課前準備]淺談HTML5

[課前準備]淺談HTML5

HTML5

前言

在開始MAN架構的開發前需要先向大家介紹幾個目前前端開發上面會使用到的技術,這邊不會有太深的琢磨,因為小弟目前也在學習這些技術,所以有更好的見解也麻煩指導我一下讓我們一起進步~

網頁的架構

A web page (or webpage) is a web document that is suitable for the World Wide Web and the web browser.

上文引用字Wiki對網頁的定應,字面上來看就一份文件可以符合www的格式並且透過瀏覽器來觀看就可以稱為網頁(Webpage)

HTML5介紹

而在目前一個基本的網頁是以HTML為主題建構出來的(人的身體),在呈現上透過CSS來再搭配(像衣服的概念)作出不一樣的風格,而JS就是我們各部分溝通與邏輯思考的地方(神經或大腦)。

相較於傳統的HTML,HTML5提供了更多的元素(Element)還新增了繪圖功能與儲存等多樣化的API,讓你再不用使用其他外掛(plugin)的情況下就已完成你想呈現的功能,減少使用者操作上的預先動作。

簡單地使用如下:線上實例請看

<!DOCTYPE html><!--宣告它為HTML5-->
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
</head>
<body>
    <!--新的影片標簽-->
    <video width="320" height="240" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.movie.ogg" type="video/ogg">Your browser does not support the video tag.
    </video>
</body>
</html>

使用這就一行<!DOCTYPE html>就可以了,下面的video的tag就是HTML5的新元素,如此簡單就可以使用,在使用上大大降低了原本HTML的多餘的屬性與語法。

詳細的內容請參考

  • 新元素
  • 新屬性
  • HTML5 Canvas
  • HTML5 SVG
  • HTML5 Drag/Drop
  • HTML5 Geolocation
  • HTML5 Video
  • HTML5 Audio
  • HTML5 Input Types
  • HTML5 Form Elements
  • HTML5 Form Attributes
  • HTML5 Semantic
  • HTML5 Web Storage
  • HTML5 App Cache
  • HTML5 Web Workers
  • HTML5 SSE

其他更多新的功能請上W3C HTML5這邊看

好的教學網站

因為本系列文章不是以此為主,所以這邊提供一些我覺得不錯的介紹讓大家自行先去準備跟瞭解HTML5

MAN架構下HTML5的定位

from

html5在MAN的重要性圖

上圖其實是一個Web APP的完整架構,而MAN的架構其實大致上與此相同,MAN架構下的網頁HTMl5是一個很重要的骨架,主要幫我們呈現絕大多數的控制項,而我們在開發上也會盡量使用這些新元素,屬性或API功能來幫我們把想法給實作出來,但有些新的API如果相容性不好的話我們就會轉到JS上面找解決辦法,透過js來處理與決定哪些控制項要出現在畫面上並提供哪些功能。

相容性與支援程度

目前瀏覽器對於HTML5的各項功能與支援程度可以看,這邊很詳細地整理HTML5與CSS在各瀏覽器使用限制,而使用HTML5的一些注意事項可以看,畢竟有些只是說能用不代表不是一個洞給你跳...。

其實可以看到HTML5有很多陷阱..所以不是說新的技術絕對是好的,但如果是新的開發案而且在你服務的客戶瀏覽器絕大多數都支援的情況下還是建議你使用HTML5,畢竟優點還是蠻多的,而本系列的教學也是基於支持HTML5的情況下作開發(web以chrome為主,mobile 以iOS上的chrome與safari為主),為什麼會有這樣的選擇我們來看一下瀏覽器的市佔率就知道了

瀏覽器市佔率W3C

瀏覽器市佔率Statista

如果覺得上面的分析太細太麻煩,想知道目前瀏覽器是否有好好地支援HTML5的格式,可以用html5test這個幫你打分數一下,以下是我MAC上的Chrome與Safari,Windows 7上的Chrome跟IE10的還有iphone上的chrome跟Safari分數

  • Mac:Chrome

分數圖1

  • Mac:Safari

分數圖2

  • PC:Chrome

分數圖3

  • PC:IE10

分數圖4

  • iPhone:Chrome

分數圖5

  • iPhone:Safari

分數圖6

結語

HTML5是我們在MAN架構下一定要必備的技術之一,就好比超人的手腳一般,所以一定要對他有一定的認識才能利用他的特性透過javascript來控制它,而下一章我們會大概介紹一下CSS,Day-2 over!


如果覺得文章還不錯麻煩請在文章最上面給予推薦,你的支持是小弟繼續努力產出的動力!