HTML5应用在线开发工具

浏览数：30 / 时间：2015年06月09日

1.Web 动画开发工具-Adobe Edge Animate

网页动画格式一直是 Flash 的天下，但 Flash 动画是封闭格式而且有明显的问题，最主要是占用大量 CPU，浪费电脑资源。随着 HTML5 标准的出现与普及，Flash 的优点不再，而缺点却日益凸显，就连 Adobe 公司也宣布停止开发个人电脑平台以外的 Flash，而专注于开发 HTML5。

Adobe 认为 HTML5 对公司来说是一个机会，并且 Flash 并非没有机会，两者是互补关系，比如在 3D 游戏方面 Flash 仍是不可或缺的工具（如 Flash CS6）。在这种情势下，Adobe 公司决定开发一个全新的网页多媒体创作工具：Adobe Edge Animate，目的是在浏览器互动媒体领域取代 Flash 平台。

Adobe Edge Animate 主要是通过 HTML5、JavaScript、jQuery 和 CSS3 制作跨平台、跨浏览器的网页动画，其生成的基于 HTML5 的互动媒体能更方便的通过互联网传输，特别是更兼容移动互联网。

作为一套完整的 Web 动画开发工具，Adobe Edge Animate 拥有直观的用户界面，强大的时间轴能够轻松制作关键帧动画，网页设计人员制作网页动画甚至简单游戏将变得极其方便。

使用说明：已经做成绿色免安装版，解压后直接运行 EdgeAnimate.exe 即可，2013/3/12 更新版本为 Adobe Edge Animate 1.5，目前 Adobe Edge Animate 还是免费软件，没有任何使用限制，如果运行提示错误，请先安装 VC 2010 运行库，注意 Edge Animate 不支持 Windows XP 系统。

Adobe Edge Animate 下载信息

官方网站：html.adobe.com
解压密码：www.portablesoft.org
压缩包MD5：ABC38E7F34187F2F34FE8B22AAFA433C

「Adobe Edge Animate 1.5 绿色版」的所有下载地址：

下载地址 #1：http://www.400gb.com/file/18013853
下载地址 #2：http://vdisk.weibo.com/s/tqt38
下载地址 #3：http://pan.baidu.com/share/link?shareid=441657&uk=587538758
官方原版：http://www.brothersoft.com/adobe-edge-animate-509895.html

2.HTML KickStart

这是一套集合了各种CSS、HTML5和jQuery模块的插件工具，不仅可以帮助你节省开发时间，还可以帮助你获取HTML5开发的灵感。

该工具包中包含了大量预配置、预格式化的功能块，你可以非常快地实现一些特定的功能，如幻灯、按钮、选项卡等。

3.HTML5 Reset

HTML5 Reset包含了一组HTML、CSS相关的文件，帮助你在开始新项目的时候节省时间，并提供了基于HTML5的空白WordPress模板。

4.Liveweave - 推荐使用

这是一个HTML5、JavaScript和CSS3代码在线测试工具，你可以直观地看到你的代码的运行情况。此外，该工具还具备代码自动完成功能，你也可以将其作为一个在线IDE来使用。

5.Video.js

Video.js是一个基于JavaScript的HTML5视频播放器，可以帮你更加简单的构建HTML5视频。Video.js提供了一个通用控件，内置的HTML/CSS皮肤，修复了跨浏览器的兼容性问题，还扩展了许多附加功能，例如全屏、字幕等。如果用户浏览器不支持HTML5视频，还可以退回到Flash或其他播放技术。

6.Modernizr

Modernizr是一个开源的JS库，它使得基于访客浏览器的不同而开发不同级别体验的设计工作变得简单。当你在网页中嵌入Modernizr脚本时，它会检测用户当前浏览器是否支持CSS3和HTML5的特性，然后你可以决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。

TopStyle 是一款 CSS 开发辅助工具，即 HTML5 / CSS3 编辑器，它专注于 HTML CSS 设计辅助，提供比较多的功能，如 CSS 代码检查等，据称 TopStyle 的帮助文件非常好，有详细的 CSS 指令，适于初次接触 CSS 的学习之用。

不过如果你想对 CSS 了如指掌，对 CSS 网页布局非常熟练，还是扔掉一切辅助软件，用记事本开发，而熟练 CSS 之后，再使用此类辅助软件，可以提高工作效率和开发速度。

使用说明：已经做成绿色免安装版，使用前先运行 !)TopStyle5Portable.exe 完成初始化安装，然后直接运行主程序 TopStyle5.exe 即可，2012.12.3 更新版本为 TopStyle 5.0.0.58，TopStyle 5 主要是对 HTML5、CSS3 提供了完全支持。

TopStyle 5 在 CSS3 / HTML5 方面的增强：

*  CSS3 for Inspector, Insight and Style Checker
*  Prefixr
*  CSS3 Media Queries
*  CSS Gradient Generator
*  Text Shadow Generator
*  Improved options for Preview Files (CSS-only)
*  HTML5 for Inspector and Insight
*  HTML5-only Validator
*  HTML Structure Panel
*  Wrap HTML Tag
*  Image Map Editor (HTML-only)