Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯
相關文章
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />
iframe
<iframe src="" frameborder="0"></iframe>
form
<form action=""></form>
label
<label for=""></label>
inp
<input type="text" name="" id="" />
input:hidden 或 input[type=hidden name]
<input type="hidden" name="" />
input:h 或 input:hidden
<input type="hidden" name="" />
input:text 或 input:t 或 inp
<input type="text" name="" id="" />
input:search 或 inp[type=search]
<input type="search" name="" id="" />
input:email 或 inp[type=email]
<input type="email" name="" id="" />
input:url 或 inp[type=url]
<input type="url" name="" id="" />
input:password 或 inp[type=password]
<input type="password" name="" id="" />
input:p 或 input:password
<input type="password" name="" id="" />
input:datetime 或 inp[type=datetime]
<input type="datetime" name="" id="" />
input:date 或 inp[type=date]
<input type="date" name="" id="" />
input:datetime-local 或 inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
input:month 或 inp[type=month]
<input type="month" name="" id="" />
input:week 或 inp[type=week]
<input type="week" name="" id="" />
input:time 或 inp[type=time]
<input type="time" name="" id="" />
input:number 或 inp[type=number]
<input type="number" name="" id="" />
input:color 或 inp[type=color]
<input type="color" name="" id="" />
input:checkbox
<input type="checkbox" name="" id="" />
input:c 或 input:checkbox
<input type="checkbox" name="" id="" />
input:radio 或 inp[type=radio]
<input type="radio" name="" id="" />
input:r 或 input:radio
<input type="radio" name="" id="" />
input:range 或 inp[type=range]
<input type="range" name="" id="" />
input:file 或 inp[type=file]
<input type="file" name="" id="" />
input:f 或 input:file
<input type="file" name="" id="" />
input:submit
<input type="submit" value="" />
input:s 或 input:submit
<input type="submit" value="" />
input:image
<input type="image" src="" alt="" />
input:i 或 input:image
<input type="image" src="" alt="" />
input:button
<input type="button" value="" />
input:b 或 input:button
<input type="button" value="" />
input:reset 或 input:button[type=reset]
<input type="reset" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
btn 或 button
<button></button>
btn:b 或 button[type=button]
<button type="button"></button>
btn:r 或 button[type=reset]
<button type="reset"></button>
btn:s 或 button[type=submit]
<button type="submit"></button>
str 或 strong
<strong></strong>
點擊圖片可以放大檢視
如果還沒安裝伺服器環境，請在桌面新增一個資料夾，名稱字取（網站目錄名稱），例如 weshop ，其他動作和上述一樣...
Brackets 開啟之後應該類似這樣
點擊圖片可以放大檢視
使用鍵盤的 Ctrl+N 開新檔案， Ctrl+S 儲存檔案，然後按「Enter」
點擊圖片可以放大檢視
點擊側邊欄的 index.htm 開啟檔案，在右側的編輯區內輸入 ! （驚嘆號），然後按「Enter」，程式便自動輸入完整的 HTML5 網頁結構...
點擊圖片可以放大檢視
在右側的編輯區的 body 標籤內輸入 h1，然後按「TAB」，隨邊輸入幾個字，再按右側的「閃電」圖示開啟即時預覽（不知道是不是修正了，我用 FireFox 也能即時預覽）
點擊圖片可以放大檢視
在右側的編輯區的 head 區塊內少了關鍵字的 meta 標籤，所以需要在 <meta charset="UTF-8"> 下方增加一行，輸入 <me 之後就可發現你要的字已經提示在清單中，此時只需使用鍵盤的 ↑↓ 選擇然後按「Enter」，就會自動輸入，第六行的粉紅色標示表示有錯誤，因為第五行沒完成啊！
點擊圖片可以放大檢視
接著在 meta 標籤之後加入空格，並輸入 n 之後直接按「Enter」，就會自動輸入 name=""，此時只需使用鍵盤的 ↑↓ 選擇 keywords 然後按「Enter」，
點擊圖片可以放大檢視
接著再按一次空白鍵加入空格，並輸入 co 之後直接按「Enter」，就會自動輸入 content=""，在引號內可以加入網站的關鍵字，最後加上結束標籤即可...
點擊圖片可以放大檢視
網頁描述 description 和網站的關鍵字方法大同小異...
點擊圖片可以放大檢視
加入 CSS 的方法很簡單，輸入 link 按「TAB」
點擊圖片可以放大檢視
CSS 檔案都放在 css 目錄中，因此只需輸入 c 按「Enter」再按「Enter」 ，我的自然輸入法快速鍵衝突，造成代碼提示失靈，所以只好手動輸入路徑...
點擊圖片可以放大檢視
導入 JS 就各自發揮了，特別要注意的是：HTML的代碼都是小寫的，大寫或語法錯誤是沒有代碼提示的
點擊圖片可以放大檢視
在即時預覽時，瀏覽器會隨著編輯視窗的更動而即時更新，非常方便，但是只限於HTML靜態頁面，即時預覽視窗中標示淺藍色的區塊，就是你游標位於編輯視窗的位置， Brackets 真是一個讓人愛不釋手...
點擊圖片可以放大檢視
