頁(yè)設(shè)計(jì)是把顏色、圖片和字體等等要素進(jìn)行組合調(diào)整，達(dá)到網(wǎng)頁(yè)頁(yè)面美化的目的，在給用戶帶來(lái)完美的視覺(jué)體驗(yàn)的同時(shí)，也為用戶提供更好的使用體驗(yàn)。因此，網(wǎng)頁(yè)設(shè)計(jì)需要考慮的設(shè)計(jì)因素有很多，絕不僅僅只是為了美觀。本文千鋒武漢Web前端培訓(xùn)小編將推薦十款好用的HTML生成工具，幫助大家更高效率的完成網(wǎng)頁(yè)設(shè)計(jì)。

1、Bootstrap Studio

這是一款桌面應(yīng)用程序，旨在幫助web開(kāi)發(fā)人員和設(shè)計(jì)人員創(chuàng)建一個(gè)相應(yīng)迅速的網(wǎng)頁(yè)。一般是用Bootstrap Studio來(lái)架構(gòu)、設(shè)計(jì)頁(yè)面效果圖和最初的修飾，然后幾乎不用導(dǎo)出功能，而是直接在單元上右鍵，復(fù)制html。可以說(shuō)Bootstrap Studio是在Chrome瀏覽器代碼和 Node.js 基礎(chǔ)之上重組和整理出的一套很規(guī)范的基于Bootstrap框架的網(wǎng)頁(yè)前端設(shè)計(jì)工具。

2、Template Stash

這款軟件幾乎集合了所有類(lèi)型網(wǎng)頁(yè)的模板，你可以通過(guò)關(guān)鍵詞檢索來(lái)找到你想要的主題風(fēng)格。可以說(shuō)Template Stash 是一個(gè)提供高品質(zhì)，完全免費(fèi)的響應(yīng)式網(wǎng)頁(yè)模板，幫助設(shè)計(jì)師們找到完美的響應(yīng)式網(wǎng)站主題或模版，根據(jù)網(wǎng)站分類(lèi)來(lái)提高不同的模版樣式，所有的模版都是來(lái)源于Kickstart項(xiàng)目。

3、Carrd

這款軟件是免費(fèi)的，可以幫助初學(xué)者制作一個(gè)簡(jiǎn)單、響應(yīng)快捷的網(wǎng)頁(yè)，只要幾個(gè)簡(jiǎn)單步驟就能快速設(shè)計(jì)出美觀特色的響應(yīng)式網(wǎng)站。

4、Bubble

Bubble的優(yōu)勢(shì)在于使用者不用掌握任何編程技巧就可以制作網(wǎng)頁(yè)，它獨(dú)特的拖拉界面可以讓使用者在網(wǎng)頁(yè)上添加視頻、地圖、音頻等等功能。

5、Tilda Publishing

這款軟件可以幫助使用者制作一個(gè)內(nèi)容導(dǎo)向型的網(wǎng)頁(yè)，這款軟件非常適合那些喜歡設(shè)計(jì)博客頁(yè)面的人。Tilda Publishing的最大優(yōu)勢(shì)在于可以會(huì)將不同內(nèi)容形態(tài)切割成blocks，如果把網(wǎng)站想象成堆積木，內(nèi)容就好比一塊塊不同花色的積木，利用拖拽方式進(jìn)行排列組合，網(wǎng)站設(shè)計(jì)更加獨(dú)特，操作上也更加簡(jiǎn)單。

6、XPRS

如果你曾經(jīng)因?yàn)樵O(shè)計(jì)網(wǎng)頁(yè)太過(guò)復(fù)雜和繁瑣而感到沮喪，那么這款軟件無(wú)疑是你的福音。這款軟件會(huì)提供一個(gè)非常簡(jiǎn)單的編輯環(huán)境，讓網(wǎng)頁(yè)設(shè)計(jì)變得非常簡(jiǎn)單，因此對(duì)于新手小白來(lái)講嗎，是一款十分好用的HTML生成工具。

7、Hype 3.0

這款軟件可以幫助你讓網(wǎng)頁(yè)的內(nèi)容“動(dòng)”起來(lái)，使用者可以設(shè)計(jì)每一幀動(dòng)畫(huà)并且進(jìn)行排序，也可以手動(dòng)添加或者刪除動(dòng)畫(huà)效果，如果你想讓自己的網(wǎng)頁(yè)更加生動(dòng)，那么這款軟件絕對(duì)是你的首選。這是一款強(qiáng)大的Mac OS平臺(tái)HTML5創(chuàng)作工具，它可以在網(wǎng)頁(yè)上做出賞心悅目的動(dòng)畫(huà)效果，無(wú)需 Flash 插件。更重要的是這款強(qiáng)的html5開(kāi)發(fā)工具竟然還有中文版！現(xiàn)在你幾乎不需要任何的編碼知識(shí)，只需要簡(jiǎn)單的拖拽就可以制作出好玩的動(dòng)畫(huà)，基于時(shí)間軸的制作方式非常的方便，最新的3.0版本具有全新的 UI和24 種全新的定時(shí)功能等新功能，非常強(qiáng)大！

8、OnePager

Onepager 是一個(gè)提供使用者建置小型網(wǎng)站網(wǎng)站的網(wǎng)絡(luò)服務(wù)，透過(guò)視覺(jué)化的操作介面，無(wú)須下載、安裝任何軟體，也不用苦苦尋找虛擬主機(jī)，只要申請(qǐng)帳戶，就能夠快速建立自己公司的網(wǎng)站。作為一款好用的HTML生成工具，它可以幫助使用者快速編輯所有類(lèi)型的網(wǎng)頁(yè)。使用者可以輕松建立一個(gè)響應(yīng)迅速的網(wǎng)站，這款軟件內(nèi)置的預(yù)設(shè)系統(tǒng)使得網(wǎng)頁(yè)的一切都是可定制的，使用者甚至可以自己設(shè)計(jì)網(wǎng)頁(yè)的主題風(fēng)格。總之，Onepaper 讓制作網(wǎng)頁(yè)變得非常簡(jiǎn)單。內(nèi)建多種佈景主題可以切換、使用，你甚至不用具備網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)，直接透過(guò)線上工具就能變更設(shè)計(jì)。

9、Grav

Grav是一個(gè)簡(jiǎn)單可擴(kuò)展的CMS平臺(tái)。因?yàn)槭羌兾募到y(tǒng)，所以它無(wú)需安裝，并且它有著完善的后臺(tái)界面和完整的官方文檔。又因?yàn)榭蓴U(kuò)展型號(hào)，可以通過(guò)有插件控制幾乎每個(gè)環(huán)節(jié)。不過(guò)這也是一款較為復(fù)雜的HTML生成工具，需要使用者掌握一些編程的技巧。

10、HTML to WordPress

這個(gè)軟件可以將靜態(tài)的HTML網(wǎng)站轉(zhuǎn)換成WordPress，如果你想轉(zhuǎn)換你的網(wǎng)站格式，這款軟件將幫助你節(jié)省大量的時(shí)間，因此推薦大家使用。

以上就是千鋒武漢Web前端培訓(xùn)小編推薦的十款好用的HTML生成工具，大家都用過(guò)了嗎？如果你現(xiàn)在還在尋找一款HTML生成工具，不妨試試以上的推薦工具，相信總有一款適合你。關(guān)注“武漢千鋒”微信公眾號(hào)，會(huì)定期為大家分享最新Web前端發(fā)展趨勢(shì)、學(xué)習(xí)資料，助力大家學(xué)好Web前端。

月13日，“互聯(lián)網(wǎng)+智能硬件”研討會(huì)在北京召開(kāi)。會(huì)上，中國(guó)信息通信研究院聯(lián)合百度、華為、京東等企業(yè)共同倡議發(fā)起眾創(chuàng)空間聯(lián)合實(shí)驗(yàn)室，以整合智能硬件芯片、互聯(lián)網(wǎng)開(kāi)放平臺(tái)、大數(shù)據(jù)分析等物聯(lián)網(wǎng)生態(tài)的建設(shè)和標(biāo)準(zhǔn)的研究。云適配作為一家優(yōu)秀創(chuàng)業(yè)公司受邀參與了本次研討會(huì)，并分享了如何“基于HTML5技術(shù)幫助智能硬件開(kāi)發(fā)更高效”的議題。

智能硬件市場(chǎng)前景看好，發(fā)展存在瓶頸

智能硬件的火爆超出很多人包括業(yè)內(nèi)人士的預(yù)期。隨后，也攪動(dòng)了所有的科技公司、硬件制造廠商和創(chuàng)業(yè)者的心。當(dāng)前的智能硬件行業(yè)呈現(xiàn)多極化的發(fā)展趨勢(shì)。一方面，由于智能硬件創(chuàng)業(yè)門(mén)檻較高，因此，各企業(yè)紛紛結(jié)成產(chǎn)業(yè)聯(lián)盟，以求優(yōu)勢(shì)互補(bǔ)，謀求突破;另一方面，智能硬件產(chǎn)品種類(lèi)多、技術(shù)多樣化，標(biāo)準(zhǔn)不統(tǒng)一，各聯(lián)盟均致力于建立能夠兼容更多智能設(shè)備的硬件管理服務(wù)平臺(tái)，以求吸引更多的設(shè)備和服務(wù)加入。

在這樣的整體環(huán)境下，首要問(wèn)題是解決統(tǒng)一的標(biāo)準(zhǔn)，在可接受的范圍內(nèi)，盡可能將硬件設(shè)計(jì)、通信協(xié)議、服務(wù)接口等進(jìn)行規(guī)范化，以減少重復(fù)開(kāi)發(fā)等不必要的資源消耗。

在標(biāo)準(zhǔn)難以統(tǒng)一的領(lǐng)域，需要尋求應(yīng)用層解決方案，通過(guò)服務(wù)的統(tǒng)一化接入，屏蔽智能設(shè)備在硬件層面的異構(gòu)性，使服務(wù)與設(shè)備解耦和，從而更大程度上整合資源，提供高質(zhì)量服務(wù)。

眾所周知，智能硬件已經(jīng)不再是智能手環(huán)、手表等便攜設(shè)備那么簡(jiǎn)單，更是包括了智能電視、智能家居、智能汽車(chē)、醫(yī)療健康、智能玩具，甚至是機(jī)器人等。但智能硬件的多樣性發(fā)展同時(shí)也面臨另外一個(gè)問(wèn)題，如何解決在信息碎片化的情況下，在不同屏幕上有統(tǒng)一的信息展示。

智能硬件的發(fā)展很大一塊程度上依賴于其軟件的開(kāi)發(fā)，而高效實(shí)現(xiàn)信息展示和用戶體驗(yàn)優(yōu)化則更是體現(xiàn)其智能所在。但如今，僅移動(dòng)端系統(tǒng)就千差萬(wàn)別，要實(shí)現(xiàn)不同系統(tǒng)和終端屏幕的獨(dú)立開(kāi)發(fā)，無(wú)論是對(duì)于企業(yè)還是開(kāi)發(fā)者，成本都十分高昂，難度非常大。

組件化應(yīng)用優(yōu)化前端開(kāi)發(fā)， 為智能硬件產(chǎn)業(yè)鏈發(fā)展提速

針對(duì)在智能硬件開(kāi)發(fā)過(guò)程中的跨系統(tǒng)、跨平臺(tái)和不同屏幕的適配問(wèn)題，如果有一種開(kāi)發(fā)方式解決上述問(wèn)題，則智能硬件的發(fā)展速度便能提上另一個(gè)階段。據(jù)云適配首席布道官吳育瑞表示，Amaze UI 是為開(kāi)發(fā)者定制的基于HTML5標(biāo)準(zhǔn)的前端開(kāi)發(fā)工具，它遵循的HTML5標(biāo)準(zhǔn)具備天然的跨屏性，可以滿足跨屏、跨平臺(tái)的應(yīng)用開(kāi)發(fā)。此外，Amaze UI 遵循組件式開(kāi)發(fā)理念，通過(guò)拆分、封裝了一些常用的網(wǎng)頁(yè)組件，開(kāi)發(fā)者只需復(fù)制代碼便可將這些跨屏組件寫(xiě)入到自己的應(yīng)用中。

據(jù)悉，Web組件化(Web Components)理念，自Google在2013年的I/O大會(huì)上提及起，直至去年HTML5規(guī)范的正式定稿，Web開(kāi)發(fā)也隨之異常火爆，讓W(xué)eb組件化的關(guān)注度也隨之水漲船高。Web組件化其實(shí)一直都被國(guó)外互聯(lián)網(wǎng)公司看好，因?yàn)閺能浖軜?gòu)上、開(kāi)發(fā)效率上、代碼可維護(hù)性上都是一個(gè)更好的選擇。

在談到有關(guān)Amaze UI 的使用時(shí)，云適配吳育瑞表示， Amaze UI并遵循React所推崇的“一切皆組件” 的組件化理念，它以開(kāi)源的形式提供了包含 25個(gè) CSS 組件、26個(gè) JS 組件，更有21款包含近 60 個(gè)主題的 Web 組件, 使開(kāi)發(fā)者不需要再花費(fèi)時(shí)間精力去編寫(xiě)日歷等的代碼，便可以直接引用組件。 此外，Amaze UI 將在后續(xù)的開(kāi)發(fā)工作中，還將陸續(xù)推出Amaze UI for App、Amaze UI組件市場(chǎng)等更多提高開(kāi)發(fā)效率的工具。

互聯(lián)網(wǎng)+智能硬件的發(fā)展為“大眾創(chuàng)新、萬(wàn)眾創(chuàng)業(yè)”開(kāi)辟了一個(gè)新的藍(lán)海市場(chǎng)，但是也正因?yàn)榛ヂ?lián)網(wǎng)的介入使信息流轉(zhuǎn)效率更高，只有更快更高效的開(kāi)發(fā)才能為領(lǐng)先市場(chǎng)和占領(lǐng)市場(chǎng)創(chuàng)造優(yōu)勢(shì)條件。有了專(zhuān)注做最高效的開(kāi)發(fā)，滿足開(kāi)發(fā)者與時(shí)俱進(jìn)的需求的開(kāi)發(fā)工具，整個(gè)智能產(chǎn)業(yè)鏈高速發(fā)展指日可待。

原文出自【比特網(wǎng)】，轉(zhuǎn)載請(qǐng)保留原文鏈接：http://net.chinabyte.com/82/13509582.shtml

一、ymm-tech/gods-pen

star: 1.7k

watch: 270

fork: 557

碼良是一個(gè)在線生成H5頁(yè)面并提供頁(yè)面管理和頁(yè)面編輯的平臺(tái)，用于快速制作H5頁(yè)面。用戶無(wú)需掌握復(fù)雜的編程技術(shù)，通過(guò)簡(jiǎn)單拖拽、少量配置即可制作精美的頁(yè)面，可用于營(yíng)銷(xiāo)場(chǎng)景下的頁(yè)面制作。同時(shí)，也為開(kāi)發(fā)者提供了完備的編程接入能力，通過(guò)腳本和組件的形式獲得強(qiáng)大的組件行為和交互控制能力。

支持功能

1.編輯器

• 面向不同角色切換工作臺(tái)，并可以自行拖拽
• 組件，以及組合組件
• 實(shí)時(shí)預(yù)覽的動(dòng)畫(huà)編輯
• 實(shí)時(shí)預(yù)覽，并可按幀拖動(dòng)預(yù)覽的動(dòng)畫(huà)編輯
• 腳本功能，靈活的擴(kuò)展編輯器面板的屬性（非常容易給組件額外添加自定義的屬性和方法，完全自己代碼控制）
• 樣式編輯，基礎(chǔ)模式，代碼模式。方便開(kāi)發(fā)和運(yùn)營(yíng)不同角色使用
• 在線預(yù)覽
• 二維碼預(yù)覽
• 可導(dǎo)入psd
• 支持pc端和移動(dòng)端

2.組件商城

• 25+組件,也歡迎開(kāi)發(fā)者貢獻(xiàn)自己的組件，查看所有組件
• 可上傳，下載自己或別人的組件
• 可出售自己開(kāi)發(fā)的組件
• 可購(gòu)買(mǎi)別人的組件

3.后臺(tái)管理與數(shù)據(jù)

• 可按團(tuán)隊(duì)管理頁(yè)面 類(lèi)似gitlab管理項(xiàng)目。合理的權(quán)限管理
• 表單數(shù)據(jù)收集，并有數(shù)據(jù)同居
• 支持頁(yè)面的pv uv以及自定義埋點(diǎn)信息
• 方便的資源和組件管理

二、徐小夕 / H5-Dooring

github: https://github.com/MrXujiang

star: 6.9k

fork: 1.5k

(H5編輯器)H5-Dooring是一款功能強(qiáng)大，專(zhuān)業(yè)可靠的H5可視化頁(yè)面配置解決方案，致力于提供一套簡(jiǎn)單方便、專(zhuān)業(yè)可靠、無(wú)限可能的H5落地頁(yè)最佳實(shí)踐。技術(shù)棧以react為主， 后臺(tái)采用nodejs開(kāi)發(fā).

1.編輯器界面:

2. 頁(yè)面版本管理:

3. 后臺(tái):

特點(diǎn)：

1.【編輯器】

• 參考線
• 基礎(chǔ)組件
• 可視化組件
• 媒體組件
• 商品組件
• 拖拽器
• 配置面板
• 表單設(shè)計(jì)器
• (多)頁(yè)面管理(復(fù)制,編輯, 刪除, 新建)
• 組件動(dòng)畫(huà)
• 組件交互
• 數(shù)據(jù)源管理
• 快速預(yù)覽
• 真機(jī)預(yù)覽
• 撤銷(xiāo)、重做
• 微信分享
• 快捷鍵
• 模版庫(kù)
• 桌面端軟件Dooring-electron, 支持離線使用

2.【增強(qiáng)功能】

• 上傳 json，一鍵轉(zhuǎn)換為 H5
• 圖片庫(kù)
• 出碼能力(下載源碼, 下載dist包)

3.【后端 API】

• 創(chuàng)建、保存、更新作品
• 用戶管理, 權(quán)限管理
• 一鍵智能分析
• 數(shù)據(jù)看版
• 表單數(shù)據(jù)收集
• 表單數(shù)據(jù)展示
• 表單數(shù)據(jù)分析, 一鍵導(dǎo)出excel, 表單多條件搜索
• 在線預(yù)覽
• 二維碼預(yù)覽
• 模版管理
• 出碼接口

三、mantou / H5DS

star: 478

watch: 110

fork: 165

H5DS(HTML5 Design software) 這是一款基于WEB的 H5制作工具。讓不會(huì)寫(xiě)代碼的人也能輕松快速上手制作H5頁(yè)面。

特點(diǎn)：

1.【高維護(hù)性】： 采用react+mobx模塊化開(kāi)發(fā)，源碼結(jié)構(gòu)清晰，注釋規(guī)范，高可維護(hù)，方便進(jìn)行二次開(kāi)發(fā)和迭代升級(jí)。

2.【高擴(kuò)展性】： 編輯器內(nèi)核獨(dú)立存在，官方提供了插件開(kāi)發(fā)教程以及CLI工具，可獨(dú)立開(kāi)發(fā)插件，動(dòng)態(tài)加載插件。

3.【高性能】：采用mobx統(tǒng)一管理數(shù)據(jù)，底層proxy數(shù)據(jù)監(jiān)聽(tīng)，做了大量節(jié)流和防抖優(yōu)化，插件按需加載，不占內(nèi)存。

4.【多終端支持】：支持手機(jī)頁(yè)面、PC頁(yè)面獨(dú)立制作，設(shè)計(jì)界面可自由切換，采用縮放模式兼容各種屏幕分辨率，PC/Mobile一網(wǎng)打盡。

三、ly525 / luban-h5

star: 1.1k

watch: 187

fork: 403

A mobile page builder/editor, similar with amolink.zh:類(lèi)似易企秀的H5制作、建站工具，開(kāi)源可視化搭建系統(tǒng)

特點(diǎn)：

1.【編輯器】

• 參考線/參考線
• 吸附線
• 通過(guò)拖放更改插件形狀
• 編輯元素（畫(huà)布）
• 復(fù)制元素（畫(huà)布）
• 刪除元素（畫(huà)布）
• 編輯頁(yè)面
• 復(fù)制頁(yè)面
• 刪除頁(yè)面
• 快速預(yù)覽
• 撤消、重做
• 插件系統(tǒng)

2.【發(fā)短信】

• “正常”按鈕
• “表單”按鈕
• 表單字段
• 圖片
• 背景圖片
• 視頻（內(nèi)嵌框架格式）

3.【增強(qiáng)功能】

• 將 PSD 文件解析為 HTML 頁(yè)面
• 照片庫(kù)
• 第三方無(wú)版權(quán)圖片搜索

4.【后端接口】

• 創(chuàng)建工作
• 保存工作
• 更新工作
• 表單統(tǒng)計(jì)
• 在線預(yù)覽
• 二維碼預(yù)覽

四、猿計(jì)劃 / vite-vue3-lowcode

star: 563

watch: 59

fork: 260

vue3.x vite2.x vant element-plus H5移動(dòng)端低代碼平臺(tái)lowcode可視化拖拽 可視化編輯器visual editor類(lèi)似易企秀的H5制作、建站工具、可視化搭建工具

功能清單：

• 動(dòng)態(tài)添加頁(yè)面
• 拖拽式生成組件
• service worker + indexeddb 實(shí)現(xiàn)無(wú)服務(wù)端的前端交互
• 數(shù)據(jù)源管理(支持導(dǎo)入 swagger JSON 生成數(shù)據(jù)模型及接口)
• 提供預(yù)置函數(shù)
• 更多組件的封裝

五、huangwei9527/quark-h5

star: 345

watch: 48

fork: 134

基于vue2 + koa2的 H5制作工具。讓不會(huì)寫(xiě)代碼的人也能輕松快速上手制作H5頁(yè)面。類(lèi)似易企秀、百度H5等H5制作、建站工具

技術(shù)棧

1.前端：

• vue: 模塊化開(kāi)發(fā)少不了angular，react，vue三選一，這里選擇了vue。
• vuex: 狀態(tài)管理
• sass: css預(yù)編譯器。
• element-ui：不造輪子，有現(xiàn)成的優(yōu)秀的vue組件庫(kù)當(dāng)然要用起來(lái)。沒(méi)有的自己再封裝一些就可以了。
• loadsh：工具類(lèi)

2.服務(wù)端：

• koa：后端語(yǔ)言采用nodejs，koa文檔和學(xué)習(xí)資料也比較多，express原班人馬打造，這個(gè)正合適。
• mongodb：一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫(kù)，比較靈活。

編輯器整體設(shè)計(jì)

• 一個(gè)組件選擇區(qū)，提供使用者選擇需要的組件
• 一個(gè)編輯預(yù)覽畫(huà)板，提供使用者拖拽排序頁(yè)面預(yù)覽的功能
• 一個(gè)組件屬性編輯，提供給使用者編輯組件內(nèi)部props、公共樣式和動(dòng)畫(huà)的功能

六、眾邦科技/CRMEB-H5

star: 316

watch: 44

fork: 278

CRMEBv3.0版微信公眾號(hào)和H5前端頁(yè)面，采用VUE-CLI框架

特點(diǎn)：

1.【獨(dú)立部署】：源碼交付獨(dú)立部署，數(shù)據(jù)私有安全可靠

2.【二開(kāi)方便】：代碼開(kāi)源規(guī)范，注釋清晰，二次開(kāi)發(fā)更友好

3.【高性可靠】：使用高性能框架開(kāi)發(fā)，系統(tǒng)穩(wěn)定、支持高并發(fā)

4.【文檔齊全】：提供完善的安裝、使用文檔、接口文檔、開(kāi)發(fā)文檔

七、jaycie/makeH5Tools

star: 61

watch: 6

fork: 41

freeH5,open source html5,open source h5,免費(fèi)html5制作工具,freeH5 APP,h5營(yíng)銷(xiāo),h5頁(yè)面制作,H5在線制作工具

運(yùn)行環(huán)境

• 后端 nodejs+mysql
• 前端 seajs

更多推薦

想提高工作效率？快來(lái)看看這6個(gè)辦公神器！

推薦! 開(kāi)源即用的CMS系統(tǒng),輕松幫助企業(yè)和個(gè)人搭建知識(shí)管理系統(tǒng)