在開始MAN架構的開發前需要先向大家介紹幾個目前前端開發上面會使用到的技術，這邊不會有太深的琢磨，因為小弟目前也在學習這些技術，所以有更好的見解也麻煩指導我一下讓我們一起進步～
用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列文章
用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列文章
前言
在開始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)的情況下就已完成你想呈現的功能，減少使用者操作上的預先動作。
簡單地使用如下：線上實例請看此
blackie1019i
Title of the document
Your browser does not support the video tag.
使用這就一行就可以了，下面的video的tag就是HTML5的新元素，如此簡單就可以使用，在使用上大大降低了原本HTML的多餘的屬性與語法。
詳細的內容請參考
其他更多新的功能請上W3C HTML5這邊看
好的教學網站
因為本系列文章不是以此為主，所以這邊提供一些我覺得不錯的介紹讓大家自行先去準備跟瞭解HTML5
MAN架構下HTML5的定位
from
上圖其實是一個Web APP的完整架構，而MAN的架構其實大致上與此相同，MAN架構下的網頁HTMl5是一個很重要的骨架，主要幫我們呈現絕大多數的控制項，而我們在開發上也會盡量使用這些新元素,屬性或API功能來幫我們把想法給實作出來，但有些新的API如果相容性不好的話我們就會轉到JS上面找解決辦法，透過js來處理與決定哪些控制項要出現在畫面上並提供哪些功能。
相容性與支援程度
目前瀏覽器對於HTML5的各項功能與支援程度可以看此)，這邊很詳細地整理HTML5與CSS在各瀏覽器使用限制，而使用HTML5的一些注意事項可以看此，畢竟有些只是說能用不代表不是一個洞給你跳...。
其實可以看到HTML5有很多陷阱..所以不是說新的技術絕對是好的，但如果是新的開發案而且在你服務的客戶瀏覽器絕大多數都支援的情況下還是建議你使用HTML5，畢竟優點還是蠻多的，而本系列的教學也是基於支持HTML5的情況下作開發(web以chrome為主，mobile 以iOS上的chrome與safari為主)，為什麼會有這樣的選擇我們來看一下瀏覽器的市佔率就知道了
如果覺得上面的分析太細太麻煩，想知道目前瀏覽器是否有好好地支援HTML5的格式，可以用html5test這個幫你打分數一下，以下是我MAC上的Chrome與Safari,Windows 7上的Chrome跟IE10的還有iphone上的chrome跟Safari分數
結語
HTML5是我們在MAN架構下一定要必備的技術之一，就好比超人的手腳一般，所以一定要對他有一定的認識才能利用他的特性透過javascript來控制它，而下一章我們會大概介紹一下CSS，Day-2 over!
iThome鐵人賽
看影片追技術