開發工具

Html5的開發工具有很多，本文介紹Hbuilder、WebStorm。

Hbuilder

• 簡介
  HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE。

• 使用
  新建專案
  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 開發工具，需要付費。
• 使用
  快速建立一個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