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

你可能感兴趣的:(H5)