整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5最近一次集中爆發是在微信推出小程序的時候。然而很多人還是不太了解HTML5可以干什么，下面HTML5培訓專家來為大家介紹一下。
1、制作時尚的表單
表單是Web設計的重要組成部分，常見的有注冊表單、聯系表單以及反饋表單，表單設計應該在不影響用戶體驗和可用性的前提下盡量美觀，以吸引用戶填寫內容。也為大家在編程的工作中提供了很多的便利。
2、構建實用的HTML5框架
框架幫助我們更快速、更容易實現功能，讓你集中精力于更重要的方面，而不會浪費時間做重復的任務。他可以幫我們實現想要的功能，讓你更加的重點。也可以讓用戶更直觀的找到重點、發現重點。
3、開發豐富多彩的游戲
盡管HTML5標準還在不斷完善過程中，一些游戲開發者已經使用HTML5開發出了非常有趣的戲。
4、以更直觀的方式讓數據可視化呈現
有的時候，你需要在網站中以更直觀的可視化方式呈現大量的數據或者信息，這個時候就需要圖表解決方法幫助你實現。
5、HTML5的未來-驚艷的HTML5示例和實驗
HTML5并非僅僅用來表示Web內容，它的使命是將Web帶入一個成熟的應用平臺，盡管HTML5的實現還有很長的路要走，但HTML5正在改變Web。
渥瑞達培訓機構提供良好的教學學員，良好的師資以及行業資源使得渥瑞達培訓機構的教學永遠都是跟隨行業進步的步伐。說了這么多，其實就是想讓你更加了解HTML5開發。如此優秀的資源和別人望眼欲穿的實習機會，再不行動就要被后來居上的技術人員拍死在沙灘上了。
面我們介紹四款比較常用的前端開發工具，具體哪一款最好用，因人而異，大家可以根據自己的情況，選擇一款個人認為最好用的web前端開發工具。
Sublime Text憑借其漂亮的用戶界面和極其強大的功能，被譽為“神級”代碼開發工具。
Sublime Text 支持多種編程語言的語法高亮，擁有優秀的代碼自動完成功能。此外，它還擁有代碼片段(Snippet)的功能，可以將常用的代碼片段保存起來，在需要時隨時調用。Sublime Text 支持 VIM 模式，可以使用VIM模式下的多數命令。
Sublime Text 還具有良好的擴展能力和完全開放的用戶自定義配置與神奇實用的編輯狀態恢復功能，支持強大的多行選擇和多行編輯。
該編輯器在界面上比較有特色的是支持多種布局和代碼縮略圖。利用右側的文件縮略圖滑動條，可以方便地觀察當前窗口在文件的哪個位置。
如果你已經有一定的前端基礎，我相信Sublime Text更加適合你。Sublime Text可以讓你快速地進行開發，強力推薦!
Microsoft Visual Studio，簡稱VS，是微軟公司的開發工具包系列產品，是目前最流行的Windows平臺應用程序的集成開發環境(IDE)。所謂的集成開發環境，就是指用于提供程序開發環境的應用程序，一般包括代碼編輯器、編譯器、調試器和圖形用戶界面工具。這么復雜，誰看得懂呀?哎，簡單來說，Visual Studio是一個具有很多用途的開發工具，它可以用來開發功能很強大的網站。這下懂了嗎?
Visual Studio是筆者推薦的三款開發工具中功能最強大的，但是使用起來也相對復雜。不過用習慣了之后，開發效率還是非常高的。Visual Studio不僅可以開發靜態網頁，還非常有利于開發動態網頁。在開發動態網頁方面，可以說Visual Studio比Dreamweaver更勝一籌。前面我們說過，靜態網頁一般是沒有交互性的，用戶能做的也僅僅是瀏覽網頁。而在動態網頁中，作為用戶，我們可以參與評論交流、上傳文件，以及使用與服務器交互。
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。相比Dreamweaver很不智能的智能提示來看，WebStorm對html特別是HTML5和JS的智能提示簡直堪稱大神，很值得去使用。不過WebStorm不像Dreamweaver一樣支持拖拽或者插入代碼的方式來做HTML，如果你是初級入門者，需要拉表格完成布局的話，WebStorm完全不合適你的使用。WebStorm只適合手寫代碼的前端開發者使用。
相比VS 2010這樣的工具來說，WebStorm足夠的輕量級，下載只有幾十M，安裝快速方便，對機器性能要求低，占有足夠少的內存，而且支持跨平臺的使用，非常方便。而且對js的提示也足夠的先進。還帶js調試功能。
Dreamweaver，簡稱DW，是Adobe公司的一款非常優秀的網頁開發工具，并且深受廣大用戶(特別是初學者)的喜愛。現在最新的版本是Dreamweaver CC。
對于初學者來說，Dreamweaver是最理想的開發工具，是廣大前端入門者的首選。但是要強調一下，如果選擇了Dreamweaver作為開發工具，我們一定不要使用Dreamweaver那種傳統的、使用操作界面的方式來開發網頁。這種開發方式已經被摒棄很久了。筆者當初剛剛接觸前端開發的時候，也是深受其害。當時跟著一個視頻學，第一步點擊哪里，第二步點擊哪里……點點點，全部是用鼠標來點，點到我頭都暈了。
大家不要覺得Dreamweaver用鼠標操作的方式來制作網頁既簡單又方便。學了一段時間你會發現，你學到的根本不是知識，而只是開發網頁時你應該點哪里!還有，當你用Dreamweaver鼠標操作的方式來制作網頁時，你會發現弊端何其多!特別是冗余的代碼，一堆一堆的，讓開發出來的網站難以在后期進行維護。
當然，Dreamweaver還是挺不錯的一個開發工具，我并非反對大家使用Dreamweaver，而是反對大家使用Dreamweaver界面操作的方式來制作網頁。對于剛剛接觸前端開發的新手來說，可以使用Dreamweaver作為開發工具，不過本人強烈建議你一定要用代碼去寫網頁，別用鼠標點擊的方式進行。還有，我可以很清楚地告訴你，現在大部分網站都不用鼠標操作實現的，而是靠編寫代碼。哪怕人家用Dreamweaver開發，都不會單純采用鼠標點擊的方式。
不過話說回來，Dreamweaver依然是初學者的首選開發工具，簡單方便。但是我們一定不要使用“點點點”方式來開發網頁，切記。
改造一個項目上 Google Play 與 App Store 時候，選擇了 H5+，就是數字天堂、UniAPP、HBuilder 那家的技術方案。
這里總結下原因分享給大家做個參考，同時把相關的坑也跟大家說下，希望可以在某個時候幫到各位。
選擇這個方案原因后來想想其實很簡單，就是這個應用是先有了 H5 版本，即移動端瀏覽器版本，然后想要復刻到 APP 端，在應用市場售賣。
請注意，“先有 H5 版本”，然后想要轉成APP，不是從零開始哦。
其實參考的技術方案有很多，比如 React Native（Taro），Vue（UniAPP），甚至是 ionic、NativeScript 都簡單試過，當然還有類似的 Cordova。
其實像 React Native（Taro）、Vue（UniAPP）以及 NativeScript 被砍掉其實很簡單，背景就決定除非完全重構，否則這幾個方案就是浪費生命，幾乎等于重寫一遍。這么說的原因有二：
1、H5 版本有的情況下，不論是 DOM 寫法，還是虛擬 DOM 的組件，都是不通用的，比如你無法把 div 直接當做 view 來用，同時也不能將 button 當做 button 用……
2、H5 的 API 與移動端不通用，比如 video 的 API，在 H5 與移動端根本就是兩個東西。
然后就是 ionic 與 Cordova 的排除原因，很簡單：文檔與環境。
1、ionic 與 Cordova 的文檔在國內網絡環境下不好找，出問題很難搞，尤其大概率我這個玩意兒要寫插件……我都寫插件了，那干脆上 OC 和 Java 算了。
2、再就是環境，沒錯，這倆都需要 XCode 與 Android Studio 在你的設備上。雖說我是都有，但是我的目的很單純，就是把 H5 套殼啊，費那么大勁干嘛？一點都不環保。
剩下我還知道且用過的就是 html5plus 與 apicloud 了，后者已經賣身就算了，只剩下 html5plus。
其實吧，這個“土土”的，還是意外的好用的。
這玩意兒怎么用就不介紹了，基本有手就能用。
下載——創建5+項目——把 H5 代碼整進去——運行即可。
這里著重說說遇到的坑。
對了，先看下原來的 H5 效果，避免不知道是干嘛的。
簡單來說，就是通過瀏覽器（或 APP 內置瀏覽器）加載 3D 模型，同時調用攝像頭的圖像，將 3D 模型與攝像頭的拍攝一起繪制出一張圖片，用來演示用。比如做工程的工程模型，在現場比劃比劃就可以大概看出來效果，不需要把場景也建模了。嗯，大概就這么個東西。
H5 端的技術就是 three.js + video + 攝像頭，比較簡單，安卓瀏覽器兼容性良好，蘋果腎8沒問題，其他劉海設備沒測（后面打包成 APP 發現有點問題）。
好了，可以說問題了：
1、瀏覽器可以直接從 a 標簽下載圖片，APP 不行，需要解決授權問題。
2、蘋果設備默認的 video 層級問題。
3、iOS 設備在 APP 內 video 自動播放權限問題。
4、iOS 設備加載本地路徑文件問題。
上面幾個是比較坑的，就是那種想不到卻發生的……
問題1，這個需要把原本 a 標簽下載的 base64 內容，通過原生的 bitmap 進行轉換，最終再將 bitmap 存到相冊。
問題2，先說問題是啥樣的，就是 iOS 會把 video 全屏，且層級賊高，與上面圖完全不同，就只能看到一個帶有“直播”字樣的 video。解決方案很簡單，給 video 標簽添加“webkit-playsinline playsinline”屬性，即可要求同層渲染。
問題3，這個就是老生常談的問題了，屬于想不到，但是遇到有會“果然如此”的問題。沒啥好辦法，不用原生化處理，就只能產品層面變更，所以給加上了“播放”與“停止”的按鈕……
問題4，這個最粗暴，直接把本地地址全部換成遠程 URL 就好了，因為本來就是讓用戶自己傳遠程 URL 的，之前是想要本地演示加載快，所以用了本地地址。
還有就是一些具體的代碼怎么寫，比如如何獲取 Android 與 iOS 的權限狀態與申請權限，這種百度搜下就有了。
請注意，還真得用百度……“土土”的，國內還得是百度。
其實現在用 H5 開發一些東西還是很簡單，畢竟很多功能 H5 基本都能實現了（不考慮兼容性的話），可以看下這個網站，我比較喜歡去，可以定期學習新東西，強烈推薦收藏：What Web Can Do Today
別的沒了，歡迎大家溝通方案，我是被坑的挺難受的，尤其是 iOS……
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
