技術文章 » html5用什麼工具開發

html5用什麼工具開發

2021-05-20 19:01:15

html5開發工具有：Dreamweaver、DevExtreme、WebStorm、Vscode、HTML5demos、HTML5 Tracker、Switch To HTML5、HTML5 Test、Lime JS等等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

Adobe Dreamweaver

Dreamweaver 是世界頂級軟體廠商 Adobe 推出的一套擁有視覺化編輯介面，用於製作並編輯網站和移動應用程式的網頁設計軟體。Dreamweaver 是集網頁製作和管理網站於一身的所見即所得的網頁程式碼編輯器，藉助其經過簡化的智慧編碼引擎，視覺輔助功能減少錯誤並提高網站開發速度，輕鬆建立、編碼和管理動態網站。還能夠通過存取程式碼提示，快速瞭解 HTML 、CSS 以及其他 Web 標準。（注：根據自身需求選擇版本）

優點：

  • 製作效率。

  • 操控能力強。

  • 網站管理迅速簡單。

  • 全面的 CSS 支援。

  • 學習資源多，如 DW 社群。

缺點：

  • 效果難以精確達到與瀏覽器一致的顯示效果。

  • 不便監控生成乾淨準確的 HTML 程式碼。

官網地址連結：https://www.adobe.com/cn/products/dreamweaver.html

DevExtreme

DevExtreme 是高效能的HTML5,CSS和Java移動開發框架，可以直接在Visual Studio整合式開發環境，構建移動應用程式。從 Angular 和 React 到 ASP.NET MVC 或 Vue ，DevExtreme 包括一系列高效能和響應式 UI 小部件，用於傳統的Web和下一代移動應用程式。目前，DevExtreme V19.1.6 全新發布，是Visual Studio開發人員開發跨平臺行動產品的首選工具。（注：根據自身需求選擇版本）

官方地址連結：https://js.devexpress.com/

JetBrains WebStorm

WebStorm 是 jetbrains 公司旗下一款 JavaScript 開發工具。被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智慧的JavaS IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

（注：根據自身需求選擇版本）

優點：

  • 智慧的程式碼補全，支援不同瀏覽器的提示。

  • 程式碼格式化，規則自定義。

  • HTML 智慧提示。

  • 聯想查詢，查詢高亮。

  • 程式碼重構。

  • 程式碼檢查，快速修復。

  • 程式碼偵錯。

  • 程式碼結構快速瀏覽和定位。

  • 程式碼摺疊。

  • 自動提示程式碼包裹或去除包裹。

官方地址連結：https://www.jetbrains.com/zh-cn/webstorm/?utm_source=baidu&utm_medium=cpc&utm_campaign=cn-bai-br-core-ex-pc&utm_content=brand-webstorm&utm_term=jetbrains%20webstorm

Visual Studio Code

Vscode 是一款十分出色的 ide 開發工具，介面美觀大方，功能強勁實用，軟體支援中文，擁有豐富的外掛，整合了所有一款現代編輯器所應該具備的特性，包括語法高亮(syntax high lighting)，可客製化的熱鍵繫結(customizable keyboard bindings)，括號匹配(bracket matching)以及程式碼片段收集(snippets)。支援 Windows，OS X 和 Linux 。內建 JavaScript、TypeScript 和 Node.js 支援。

優點：

  • 免費

  • 藉助IntelliSense超越了語法突出顯示和自動完成功能。

  • 直接從編輯器偵錯程式碼。

  • 內建 Git 命令。

  • 可延伸和可客製化。

  • 以 Microsoft Azure 輕鬆部署和託管網站。

官方連結地址：https://code.visualstudio.com/#built-in-git

Sencha Architect

Architect 在開發移動和桌面應用的工具中的定位是HTML5視覺化應用開發。開發團隊可以使用拖放功能來構建HTML5應用程式，因此您可以減少在手動編碼上的時間，並且可以對應用程式程式碼進行優化以實現高效能。Architect 消除了鍵入大多數樣板程式碼的需要，從而節省了開發人員的時間。自動程式碼生成可加速桌面和移動應用程式的開發。只需在 WYSIWYG 視窗中更改任何 Ext JS UI 元件的屬性和設定，就可以消除手動編碼時經常發生的人為錯誤。（注：根據自身需求選擇版本）

優點：

  • 拖拽元件

  • 支援模型——檢視——控制器模式。

  • 支援 Sencha Touch 和 Ext JS 4 構建移動和桌面 Web 應用。

  • 內建針對 IOS 與 Android 一鍵式原生打包功能。

官方地址連結：https://www.sencha.com/products/architect/

HTML5demos

想知道你的瀏覽器是否支援 HTML5 Canvas 嗎？想知道 Safari 是否可以執行簡單的 HTML5 聊天使用者端嗎？HTML5demos 會告訴你每一個HTML5特性在哪些瀏覽器中支援。

官方連結地址：http://html5demos.com/

HTML5 Tracker

想了解 HTML5的最新動向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂資訊。

HTML5 visual cheat sheet

想要快速超找一個標籤或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。

非官方連結地址：https://download.csdn.net/download/vick1217/4414181

Switch To HTML5

Switch To HTML5 是一個基礎而實用的模板生成工具。如果你開始一個新專案，可以到這裡獲取免費的 HTML5 網站模板。

HTML5 Test

你瀏覽器準備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支援情況的完整報告。

官方連結地址：http://html5test.com/

Lime JS

LimeJS 是一個 HTML5 遊戲開發框架，用於為所有現代觸控式螢幕和桌面瀏覽器構建快速的本機體驗遊戲。

官方連結地址：http://www.limejs.com/

更多程式設計相關知識，請存取：！！

以上就是html5用什麼工具開發的詳細內容，更多請關注TW511.COM其它相關文章！