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

2013-09-17

2896
0
HTML

摘要:[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為主)，為什麼會有這樣的選擇我們來看一下瀏覽器的市佔率就知道了