HBuilder教程

HBuilder是由DCloud（数字天堂）推出的Web开发IDE，支持HTML5. HBuilder用Java，C，Web和Ruby编写. HBuilder的主体是用基于Eclipse的Java编写的，因此它自然与Eclipse插件兼容. 快速是HBuilder的最大优势. 通过完整的语法提示，代码输入方法，代码块等，大大提高了HTML，js和css的开发效率.

HBuilder的下载地址: 在HBuilder的官方网站上单击“免费下载”以下载最新版本的HBuilder.

HBuilder当前有两个版本，一个是Windows版本，另一个是mac版本. 下载时，请根据您的计算机选择适合您的版本.

单击文件→新建→依次选择Web项目（按Ctrl + Nc builder添加类，W可以触发快速新建（MacOS请使用Command + N，然后在Web项目上单击鼠标左键））

如上所示，请在A处填写新项目的名称，在B处填写（或选择）项目保存路径（更改此路径将由HBuilder记录，下一次更改默认路径） ，C可以选择使用模板（单击自定义模板，请参阅打开目录中的readme.txt自定义模板）

在项目资源管理器中选择新创建的项目，单击文件→新建→选择HTML文件（按Ctrl + N，W可以触发快速新建（MacOS请使用Command + N，然后在HTML文件上单击鼠标左键）），然后选择一个空白文件模板，如下所示

Win系统按Ctrl + P（MacOS是Command + P）进入并排模式. 在这种模式下，如果HTML文件当前处于打开状态，则每次保存时都会自动刷新以显示当前页面效果（如果是JS，CSS文件，并且与当前打开的页面存在引用关系浏览器视图，它也会刷新）

在打开的getstart.html中输入H，如下所示

然后按8，将自动生成HTML的基本代码，如下所示

代码块是一种常用的代码组合. 例如，如果在js中输入$并按Enter，则可以自动输入document.getElementById（id）.

查看和编辑代码块，您可以在工具自定义代码块中选择相应的代码块进行查看和编辑. 您还可以在代码助手中单击详细信息右下角的修改图标，以激活代码块进行修改和查看.

效果如下图

进入div#页面> div.logo + ul#导航> li * 2> a，按Tab键生成如下所示的代码

HBuilder集成了Emmet函数，您可以通过CSS选择器语法快速开发HTML和CSSc builder添加类，如果您想了解有关Emmet的更多信息，请移动

JS不仅可以通过ID，标记名，css类名获取HTML元素，还可以准确地分析其元素类型并准确地提示其属性. 如上图所示，它可以提示列表[0] .type

按Alt键并左键单击引用的方法名称，ID，CSS类，文件（链接，图片），可以跳到引用的位置，也可以使用跨文件引用

跳转到CSS类定义，如下所示

跳转到ID定义位置，如下所示

跳到如下所示的文件

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-164408-1.html