从Frontpage、Dreamweaver、UE，到SublimeText和JetBrains的WebStorm，Web编程的IDE已经更换了几批。HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。
“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。”问到HBuilder的优势时，DCloudCEO王安表示。
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。[1]HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。
快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
在hbuilder中友一个插件是nodeclipse这个插件，我们点击安装，把这个插件安装好。
然后我们点击新建的话会多出很多
下边就是控制台显示，怎么样，很好用吧，这样我们写js的时候就不用依赖浏览器了，也不用打开什么cmd，只要在编辑软件中就可以测试了。
<script src="里的js文件"></script>类似上面格式，把你js文件路径写进去就可以引用了，下面是我的引用例子：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript"></script>
</head>
<body>
<!--整体居中显示开始-->
<div class="site-center">
<!--最顶部导航-->
<div class="top-nav">
<div id="top-nav-left" >
<a href="#">华为官网</a>
<a href="#">华为社区</a>
<a href="#">软件应用</a>
<a href="#">Select Region</a>
</div>
<div id="top-nav-right">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">我的订单</a>
<a href="#">L码(优购码)</a>
<a href="#">手机版</a>
<a href="#">网站导航</a>
</div>
</div>
<!--最顶部导航结束-->
<!--清除浮动-->
<div class="clear"></div>
<!--搜索框开始-->
<div class="top-search">
<div id="top-search-logo">
<img src="img/logo.png" />
</div>
<div id="top-search-box">
<form>
<input type="text" class="text" maxlength="100" id="search-kw" />
<input type="submit" class="search-btn" id="search-btn" value="搜索" >
</form>
</div>
<div id="top-search-ORcode">
<img src="img/orcode.png" />
</div>
</div>
<!--搜索框结束-->
<!--清除浮动-->
<div class="clear"></div>
<!--主导航开始-->
<div class="nav">
<div id="nav-left">
<h2>全部商品</h2>
</div>
<div id="nav-right">
<ul>
<li><a href="#">首 页</a> </li>
<li><a href="#">华为专区</a> </li>
<li><a href="#">荣耀专区</a> </li>
<li><a href="#">荣耀NOTE8</a> </li>
<li><a href="#">荣耀8</a> </li>
<li><a href="#">P9</a> </li>
<li><a href="#">配件特惠</a> </li>
<li><a href="#">精彩频道</a> </li>
</ul>
</div>
</div>
<!--主导航结束-->
<!--清除浮动-->
<div class="clear"></div>
<!--商品导航开始-->
<div class="products-menu">
<div id="products-category">
<!--第一块导航-->
<div id="products-category-1">
<div class="products-category-big"><a href="#">手机</a></div>
<span><a href="#">荣耀</a></span>
<span><a href="#">荣耀2</a></span>
<span><a href="#">荣耀3</a></span>
<!--右滑动显示信息-->
<div id="products-category-hide1">
<ol>
<li><a href="#">荣耀</a></li>
<li><a href="#">荣耀</a></li>
<li><a href="#">荣耀</a></li>
<li><a href="#">荣耀</a></li>
<li><a href="#">荣耀</a></li>
</ol>
</div>
<!--右滑动显示结束-->
</ol>
</div>
<!--第一块导航结束-->
</div>
<!--商品幻灯片开始-->
<div id="products-show">
<img src="img/xiaoyao.jpg" />
</div>
<!--商品幻灯片结束-->
</div>
<!--商品导航结束-->
<!--清除浮动-->
<div class="clear"></div>
<!--热卖商品开始-->
<div class="products-sellWell">
</div>
<!--热卖商品开始-->
<!--整体居中显示结束-->
</div>
</body>
</html>
