Html5开发工具安装及使用

开发工具

Html5的开发工具有很多，本文介绍Hbuilder、WebStorm。

Hbuilder

• 简介
  HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。
• 安装
  直接从Hbuilder官网下载进行安装即可。
  

• 使用
  新建项目
  1、文件 → 新建 → 选择Web项目或者直接点击右侧新建Web项目
  
  2、填写项目名称，存储位置，点击完成。
  
  3、左边栏介绍
  
  index.html 是入口文件，css 是样式表目录，img是图片资源目录，js 是 javascript目录。
  4、接下来就可以开始编写代码了
  
  5、调试
  1）PC端，选择合适的浏览器运行。
  
  2）手机端调试
  首先需要手机和电脑在同一局域网内，点击运行→设置Web服务器→设置Web服务器→选择当前IP地址→应用
  将网页地址复制到手机浏览器打开。（地址类似http://ip:8082/目录/html文件）
  
  
  

• 快捷键
  创建文件 command + N
  注释 command + /
  匹配括号 option + [
  跳转到上/下一个可编辑区 option + ↑ / ↓
  删除光标所在行 command + D
  删除当前标签 Control + Shift + T
  删除光标至行首 Shift + delete
  整理代码格式 command + shift + F
  光标移动至文件开头 command + ↑
  光标移动至文件结尾 command + ↓
  选中当前行 command + L
  复制上一行 command + shift + R
  切换文件 command + Fn + F6
  快速插入
  (在html中) Shift + return
  快速插入\n(在css或js中) Shift + return
  搜索 command + F
  查找文件 command + T
  运行 command + R
  边看边改视图 command + P
  全部折叠/展开 command + option + - / +
  显示行号菜单 command + Fn + F10

WebStorm

• 简介
  WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具，需要付费。
• 安装
  下载地址(http://www.jetbrains.com/webstorm/download)
  
  下载之后进行安装，一路next。
  
  将***填写到对话框中，点击OK，webstorm就已经安装好了
• 使用
  快速创建一个HTML项目
  1、打开WebStorm → Creat New Project → Empty Project → 给项目命名 → Creat
  
  
  2、进入编辑界面
  在左侧右键，创建新的html、js文件等，创建完成后就可以开始编辑代码了。
  
  3、手机调试
  Deployment -> Debugger 面板中将 Can accept external connections选项打上勾
  手机测试地址：http: //本机IP:9090/….
  
• 快捷键
  单行注释 Command + /
  多行注释 Command + option + /
  向右缩进 tab
  向左缩进 shift + tab
  删除光标所在行代码 Command + delete
  快速换行 shift + return
  大小写转换 Command + shift + U
  文件选项卡快速切换 Command + shift + [ / ]
  收缩/展开代码块 Command + shift + -/ +
  打开断点列表 Command + option + fn + F8
  跳转到某个类 Command + O
  文件中搜索 Command + F
  全局搜索 Command + shift + F 或者双击shift
  文件中替换 Command + R
  全局替换 Command + shift + R
  查找下一个 Command+G