331
技術社區[雲棲]
學習筆記（1）HTML5
（1）前言
HTML5本身其實很簡單，就是一些標簽，沒有什麼複雜的。找個教程或手冊，把用法搞清楚，一天應該就差不多能掌握了。其實HTML5最難的還是和JS的整合，首先必須熟悉和了解JavaScript的語法結構和基礎，必要時還要學習一些JS庫，方便開發。然後才能深入的學習一些基於HTML5的擴展知識，比如Canvas2D在瀏覽器中畫圖，可以用於遊戲開發等等場合。WebSocket 瀏覽器可以與服務器間雙向通信；而Socket方式能夠大大提高瀏覽器與服務器間的通信效率，可以用於瀏覽器與服務器間通信頻繁的場合，比如實時聊天。
（2）革新
對於 HTML 5 的革新，按我的理解，可以總結為語義明確的標簽體係、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的 API 支持。
（3）標簽
所有的HTML5結構標簽本質上都是一個div標簽，隻不過有意義。
（4）文檔聲明類型
<!doctype html>
在編寫HTML5文檔時，要求指定文檔類型。以確保瀏覽器在HTML5正確的模式下渲染。
（5）新增元素
目前，我們定義結構隻能通過一個“萬能”的div, 試圖通過設置它的特性id的值如header, footer, sidebar等來分別表達頭部，底部或者側欄等。
有了它們，代碼編寫者不再需要為id的命名費盡心思，對於手機、閱讀器等設備更有語義的好處。
HTML 5增加了新的結構元素來表達這些最常用的結構：
section: 這可以表達書本的一部分或一章，或者一章內的一節
header: 頁麵主體上的頭部。並非head元素
footer: 頁麵的底部（頁腳），可以是一封郵件簽名的所在
nav: 到其他頁麵的鏈接集合
article: 諸如blog, 雜誌，綱要等之中的一條獨立記錄。
有了它們，代碼編寫者不再需要為id的命名費盡心思，對於手機、閱讀器等設備更有語義的好處。
HTML 5增加了新的結構元素來表達這些最常用的結構：
section: 這可以表達書本的一部分或一章，或者一章內的一節
header: 頁麵主體上的頭部。並非head元素
footer: 頁麵的底部（頁腳），可以是一封郵件簽名的所在
nav: 到其他頁麵的鏈接集合
article: 諸如blog, 雜誌，綱要等之中的一條獨立記錄。
<!doctype html> <html> <head></head> <body> <header> <nav></nav> </header> <div> <section> <article></article> </section> <aside></aside> </div> <footer></footer> </body> </html>
傳統的布局方式
HTML5布局方式
最後更新：2017-04-03 16:48:54