开发工具
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
