【中培課堂】2016最新HTML5基礎指南!
參加2016HTML5培訓最新基礎指南!從HTML5的基礎出發,通過各種精彩的實例,將走進HTML5的精彩世界。各種實例精彩紛呈且通俗易懂,深入淺出,引人入勝。詳細講解HTML5技術的各個部分,深入到HTML5的核心,充分學習并體驗HTML5。 越分享越成功,想做好一件事,必須要花費一些功夫,然后是多學、多思、多練、多交流、多總結,發現自己的問題,然后一定要克服,在狀態不好的情況下,往往要及時調整。新手學習前端的話,一定要想想為什么要學習它,是出于一種什么心態,然后定位好自己,多向大牛請教,多教一些沒有自己水平高的人,那樣往往能讓自己成長的快,切勿急躁。 初學可以看一些入門視頻教程,之后可以買一些書,做一些小項目,要學會投資,分析自己的現狀及能力,實時調整,一定要有自己的想法,懂得創新。在這里一定要對自己做分析,然后找出一種適合的學習方法。 一個優秀的前端開發工程師必備的知識技能!到底有哪些知識點。在此附兩張前端知識點總結圖: 圖.1 圖.2 1)有一定web基礎的技術人員,深入學習移動HTML5新技術 2)產品、設計人員,對HTML5及周邊技術能得到很好的了解和提高 3)移動HTML5基礎Java詳解 1. Basic Java 1) HTML5頁面的層級結構剖析 2) 實例詳解:Hello World的文檔結構 2. Java變量 1) 函數中變量的使用 2) 實例詳解:Java陷阱知多少 3. 執行環境和作用域 4. 引用類型 1) Object對象 2) 日期對象 3) 實例詳解:上線時間的地雷千萬不要踩 4) Java小技巧之apply和call 5. JSON 6. 面向對象 1) Java對象簡介 2) 工廠模式 3) 原型模式 4) 構造函數 5) 面向對象實例詳解:花名冊的編寫 7. BOM 1) BOM的重要性 2) location你不知道的那些事 3) navigator行業標準 4) 實例詳解:獲取用戶的分布 8. DOM 1) 移動手機頁面層級結構的再探究 2) 實例詳解:兼容pc與移動端的任意添加塊 9. 事件處理 1) 冒泡和捕獲的歷史是與非 2) 事件監聽機制的重要 3) 實例詳解:隨手指拖拽的小方塊 10. 閉包 11. Ajax與Comet 1) Ajax的興起與Java的血淚史 2) Comet機制的引入 3) 實現Comet的兩種方式 12. Java調試與監控 1) 調試工具一覽 2) Chrome面板 3) 深度瀏覽你的頁面,各種資源盡收眼底 4) 熟悉網絡的情況 二、 移動HTML5精彩世界 1. 移動HTML5的殺手效應——新浪移動H5網站架構分析 1) HTML5到底是什么? 2) 為何H5能在這幾年快速的發展起來 2. 今日頭條:移動端H5標簽全解析 1) 新標簽與div到底有什么區別? 2) 爬蟲從此不再孤單 3. 繪圖canvas的世界 1) 從方圓開始的計算機圖形學 2) 手機財經:騰訊canvas繪制手機股票行情圖細節分析 3) canvas處理位圖 4) canvas制作動畫 5) 實例詳解:windows98屏保再回憶 6) canvas與flash的性能分析 7) 提高canvas繪圖性能的幾個秘籍 4. HTML5多媒體 1) 如此快捷的多媒體應用 2) 如何制作兼容所有瀏覽器的多媒體播放器 3) 把視頻當圖片一樣來處理?canvas的威力再現! 4) 實例詳解:九宮格大屏幕 5. 如何通過H5表單提升用戶體驗 1) 移動時代的到來 2) 從chrome瀏覽器的發展,展望H5表單的未來 6. 本地存儲Local Storage深入探討 1) 傳統cookie與H5本地存儲之間的博弈,到底該選擇誰? 2) 移動百度首頁分析:如何巧妙使用H5提升網站性能,節省帶寬 3) 動手練習:最簡單的本地存儲程序,計數器 7. HTML5離線應用 1) H5離線應用打造終極本地APP 2) HTML5 APP分析:新聞客戶端 8. HTML5跨域請求 1) 新浪與淘寶的合作:頁面之間域的限制 2) 傳統的跨域解決方法 3) 橫空出世HTML5的PostMessage 4) 實例詳解:跨瀏覽器的解決方案 9. H5手機方向感應 1) HTML5與立體三維空間的完美結合 2) 用HTML5開發微信“搖一搖”功能 10.如果你是H5規范制定者,你會如何制定地理定位的規范? 1) 如何利用手機H5地理位置,快速測量辦公室大小 2) 地理定位Geo Location深入探究 11. H5實時通訊Web Socket 1) 我們為什么需要socket? 2) 新浪網消息推送架構詳解:H5本地存儲、跨域post、socket三箭齊發的結構 12. Java的瓶頸,我們需要更高的效率 1) HTML5的多線程 2) H5線程與線程之間的通訊 13. HTML5展望 1) 微信H5分享的爆發 2) webAPP與本地APP的選擇“第三天下午 三、 CSS3與移動端HTML5布局 1. 為何移動端HTML5離不開CSS3 1) CSS3概述 2) 實例詳解:Hello World 2. CSS基礎簡述 1) 盒子模型深入解析 2) float排版你所不知道的妙用 3) 多種方法,固定寬度且居中的布局 4) position定位的性能到底怎么樣? 5) 實例詳解:手機上的一鍵換膚 6) CSS禪意花園 3. 處理移動端的瀏覽器兼容性 1) 常見的手機瀏覽器兼容性問題詳解 2) CSS Hack在移動端的使用那些事 4. CSS3與移動端HTML5媒體支持 1) 處理不同手機屏幕的排版 2) 實例詳解:ipad橫豎屏講解分析 5. 外引字體 1) 為什么需要外引字體? 2) 瀏覽器兼容性處理 3) 中文字體的困惑,裁剪字體 6. CSS3分欄 1) 用戶閱讀習慣的那點事 2) 分欄的制作方法 3) 實例詳解:華爾街日報 7. CSS3與HTML5變幻與動畫 1) 動畫的巧用 2) 實例詳解:圖片幻燈效果 8. CSS3與Java 1) CSS3與js之間的聯系 四、H5框架及基于zepto的移動HTML5設計 1. Java框架 1) 為什么我們需要Java框架 2) 框架之間的大比拼 3) 移動端上的框架詳解 2. JQuery 1) 最流行的JQuery 2) 利與弊之間的博弈 3) JQuery實例簡單分析 3. JQuery Mobile 1) JQuery Mobile簡介 2) JQuery Mobile實例簡單分析 4. Sencha Touch 1) Sencha簡介 2) Sencha與jQuery Mobile之間的區別 3) 你的選擇? 5.zepto 1) zepto的橫空出世 2) 移動端HTML5的利器 6. 框架之間的綜合比較 1) 明確你的需求 2) 選擇合適的框架 7. 基于zepto的移動HTML5設計 1) zepto中的選擇器 2) 自適應手機屏幕尺寸的解決辦法 3) zepto對DOM元素的操作 4) zepto中引入的那些移動事件 5) 觸屏手勢詳解 五、 HTML5頁面性能優化及響應式web 1. HTML5頁面性能優化 1) 頁面的時間都花在哪里? 2) HTTP請求概覽 3) 減少HTTP請求 4) 使用CDN 5) 采用Gzip技術 6) 合理放置樣式以及腳本 7) 減少DNS請求 8) 避免重定向 9) 管理您的cookie 2.性能優化實踐:新浪首頁性能全解析 3. 響應式web設計 1) 什么是響應式設計 2) 傳統的解決方案 4.如何做一個響應式設計 1) 明確你的需求 2) 找到尺寸突破點 3) 一把雙刃劍 5. 合理使用HTML5和CSS3 1) 一個HTML,多個CSS 2) 處理橫豎屏 3) 圖片的自適應選擇 6. 漸進增強 1) 什么是漸進增強 2) 163的示例 3) 如何應對高清屏幕 技術只是生活的一部分,曾經雄心斗志,如今低頭寫碼。改變能改變的,接受不能改變的。人生有限,兄爭朝夕啊。人生學習的態度是:不急不躁,不快不慢。持之以恒,相信自己。不求能改變世界,但求能改變自己的生活。不求健步如飛,但求一步一腳印。感謝磨難,他使我們內心更為堅強。 感謝挫折,他使我們不斷的成長,感謝bug,他使我們的思維更加深邃。感謝前端,他使我們更加的相信,撐起一片天空需要十八般武藝。藍鷗科技:愿你在前端的路上越走越遠!早日邁向web前端開發技術大牛!