1、建议新手不要使用hbuilder，这个编辑器是开发网站前台页面比较专业的集成开发环境，建议使用比较基础的editplus或者Dreamweaver等。
2、uilder 是DCloud ）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。
1、打开HBuilder，点击软件顶部的文件选项，在d出的选择中点击新建，选您要新建的文件JS，HTML，CSS等可以进行选择。2、输入完成后将文件进行保存，可使用Ctrl+s键保存文件，或点击红框标注出的位置也可保存文件。
3、保存完成后点击HBuilder软件菜单栏的运行选项，点击运行到浏览器选项，选择自己要运行的浏览器即可。
4、最后在选择的浏览器中出现运行的结果即可。
<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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）