Html5開發工具安裝及使用
開發工具
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地址→應用
將網頁地址複製到手機瀏覽器開啟。(地址類似
快捷鍵
建立檔案 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