HBuilder从下载到使用
听别人谈论这货,于是决定长长见识,见见世面,便屁颠屁颠到网上下一个,满怀好奇的研究了一下。对用过eclipse这款软件的人来说,上手非常容易。
☆ 准备工作
① 确认自己的电脑连接网络,能下载东西。
② 最好有一款主流浏览器。如谷歌,火狐,IE,Opera等(用这个工具都是做web的,浏览器很重要。)
☆ 下载HBuilder
方式一: 在浏览器的地址栏中输入 http://www.dcloud.io然后回车进入
方式二: 打开浏览器,访问百度搜索,输入HBuilder官网,然后点击进入
上面的两种方式,任选一种。访问官网后如下图所示

选择HBuilder之后,点击下载处弹出提示界面。

点击即可下载。
注:一般都是选择保存在哪,有部分会调用你的下载工具进行下载,如,迅雷,电驴等。
☆使用HBuilder
找到下载HBuilder文件,这文件时绿色解压缩版。就是说不用安装,解压后直接可以使用。因此,我们必须找到自己存放这种绿色版的工具位置,粘贴该文件,然后解压,解压后删除压缩包。
打开如上图所示的HBuilder文件夹,找一个HBuilder.exe文件,如下图所示
选中该文件,右键-弹出菜单中选择“发送到”弹出菜单中选择“桌面快捷方式”,点击他。

然后,我们在桌面就可以看到这样一个图标,将文件的名字改成HBuilder就可以。以后直接双击这个快捷方式,就可以直接打开HBuilder开发工具。

☆ 使用HBuilder
双击HBuilder这个图标,打开软件。然后你会看到这样一个界面

你可以选择注册一个用户来使用,也可以直接使用。点击暂不登录跳过这个界面,直接使用此工具。如果需要注册的可以自己注册,此处省略注册过程。

进入的这个界面是一个欢迎界面,同时下面有该工具的使用的教程。可以先浏览器一遍,然后在来使用这个工具。同时整个软件界面使用的都是简体中文,看起来也相对容易。
使用步骤:
1,建立web项目(工具帮助你构建开发和解析html环境)
2,建立web页面(这是就是我们经常说的网页)
新建页面时,注意选择html5这一项,因为时下流行的就是html,选择这个之后,软件会自动生成html5的代码结构。

注:meta标记的charset属性一般设置为utf-8
这个工具的最大优点就是快捷键使用起来舒服和方便。
☆ HBuilder快捷键
点击”帮助”菜单,在里面找到”快捷键列表”这一项,点击他,然后在整个工具布局的右边看到一个列表,这里面就是对快捷键的描述。

对于快捷键的使用,大家可以自己慢慢体验和琢磨。只有用的时间长了,快捷键就会信手而来,练得次数多了,写起代码才有飞一般的感觉。
技术分享:www.kaige123.com
HBuilder从下载到使用的更多相关文章
- hbuilder的使用
今天在群里看群友提及了hbuilder,下载试了下,发现确实会有些代码敲起来方便多了.也帮助我自己发现uft8和保存的时候选择字符重要,不然乱码,很窝心.
- HBuilder:最快的Web开发IDE
这里给大家介绍一个个人觉得最好用的web开发工具:Hbuilder. HBuilder是DCloud推出的一款支持HTML5的Web开发IDE.快,是HBuilder的最大优势,通过完整的语法提示和代 ...
- 使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP
1.开发准备HBuilder: 1.下载安装HBuilder2.创建APP项目 3.代码示例: <!doctype html> <html lang="en"&g ...
- hbuilder中的wap2app (将M站快速转换成App的开发框架)使用过程有关原生标题的关闭
首先,我最近在做有关将M站快速转换成App的项目,在网上看了很多,最终结合同学的推荐,我选择了hbuilder,有关于hbuilder的下载还有具体使用方法,官网都有详细的说明,我就不介绍了,我重点介 ...
- Hbuilder环境下配置php
XAMPP的安装 https://blog.csdn.net/qing666888/article/details/81914389 安装并配置好Xampp后,在Hbuilder中下载php插件,工具 ...
- MUI(1)
今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学 ...
- uni-app—从安装到卸载
uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-ap ...
- wap2app(一)-- 网站快速打包成app
工具:HBuilder,下载地址:http://www.dcloud.io/ 下载并安装HBuilder后,打开编辑器,选择:文件 -> 新建 -> 项目,出现如下图: 选择wap2app ...
- HTML5 Plus移动App(5+App)开发入门指南
HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...
随机推荐
- C# 操作office知识点汇总
1. C#操作Word的超详细总结
- Android-做个性化的进度条
1.案例效果图 2.准备素材 progress1.png(78*78) progress2.png(78*78) ...
- AngularJS多模块开发
angularJS中的多模块开发是指多个module模块开发,步骤为: 1. 确定主模块 var app=angular.module('myApp',[]); 2. 其他的子模块添加到主模块后 ...
- 网站开发HTML部分课堂小结
网页分为静态网页和动态网页两种 常用的是动态网页 静态网页修改数据是需要修改源代码,动态网页通过后台网页就可以修改静态网页有:HTML 内容(Hyper Text Markup Language 超文 ...
- PHP基础之POST与GET
post 与 get区别 *.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示.*.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1 ...
- Python requests模拟登录
Python requests模拟登录 #!/usr/bin/env python # encoding: UTF-8 import json import requests # 跟urllib,ur ...
- 【Java EE 学习 23】【log4j的使用】【ant的使用】【内省】
一.ant下载地址:http://ant.apache.org/bindownload.cgi 二.log4j下载地址:http://logging.apache.org/log4j/2.x/dow ...
- 字符串的replace()方法隐藏着什么不可告人秘密?
最近在做JS算法项目时发现一个令我匪夷所思的问题, 这里想记录一下问题. 首先介绍一下字符串replace()方法的基本用法. replace() 方法使用一个替换值(replacement)替换掉一 ...
- Channel
提起Channel,JDK的NIO类库的重要组成部分,就是提供了java.nio.SocketChannel和java.nio.ServerSocketChannel,用于非阻塞的I/O操作. 类似于 ...
- MemCache
MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高了网站访问的速度.Mem ...