TOP
首頁 > Brackets使用教學 > Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

2015-08-10 339

相關文章

先列出一些可能在編輯網頁時會用到的 Emmet 語法, Brackets 本身也都有自動提示和自動完成,所以不需要去特別記他...

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>

這篇教學主要是針對HTML的語法,從空白網頁開始建立,在過程中需要留意其他的程式快速鍵是否和 Brackets 內建快速鍵衝突,例如:Ctrl+空白鍵 會導致自動提示和自動完成失效... HTML只是靜態頁面,因此不需架設伺服器環境如果你已經有伺服器環境,請先在www目錄新增一個資料夾,名稱字取(網站目錄名稱),例如 weshop ,然後再該目錄下新增 css(裡面新增 style.css) 、 images(裡面放張圖片) 、 js(裡面放個 js) 三個資料夾,然後在 weshop 上面按滑鼠右鍵,選擇「Open with Brackets 」,使用 Brackets 開啟:
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

如果還沒安裝伺服器環境,請在桌面新增一個資料夾,名稱字取(網站目錄名稱),例如 weshop ,其他動作和上述一樣...
Brackets 開啟之後應該類似這樣
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

使用鍵盤的 Ctrl+N 開新檔案, Ctrl+S 儲存檔案,然後按「Enter」
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

點擊側邊欄的 index.htm 開啟檔案,在右側的編輯區內輸入 ! (驚嘆號),然後按「Enter」,程式便自動輸入完整的 HTML5 網頁結構...
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

在右側的編輯區的 body 標籤內輸入 h1,然後按「TAB」,隨邊輸入幾個字,再按右側的「閃電」圖示開啟即時預覽(不知道是不是修正了,我用 FireFox 也能即時預覽)
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

在右側的編輯區的 head 區塊內少了關鍵字的 meta 標籤,所以需要在 <meta charset="UTF-8"> 下方增加一行,輸入 <me 之後就可發現你要的字已經提示在清單中,此時只需使用鍵盤的 ↑↓ 選擇然後按「Enter」,就會自動輸入,第六行的粉紅色標示表示有錯誤,因為第五行沒完成啊!
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

接著在 meta 標籤之後加入空格,並輸入 n 之後直接按「Enter」,就會自動輸入 name="",此時只需使用鍵盤的 ↑↓ 選擇 keywords 然後按「Enter」,
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

接著再按一次空白鍵加入空格,並輸入 co 之後直接按「Enter」,就會自動輸入 content="",在引號內可以加入網站的關鍵字,最後加上結束標籤即可...
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

網頁描述 description 和網站的關鍵字方法大同小異...
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

加入 CSS 的方法很簡單,輸入 link 按「TAB」
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

CSS 檔案都放在 css 目錄中,因此只需輸入 c 按「Enter」再按「Enter」 ,我的自然輸入法快速鍵衝突,造成代碼提示失靈,所以只好手動輸入路徑...
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

導入 JS 就各自發揮了,特別要注意的是:HTML的代碼都是小寫的,大寫或語法錯誤是沒有代碼提示的
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯

在即時預覽時,瀏覽器會隨著編輯視窗的更動而即時更新,非常方便,但是只限於HTML靜態頁面,即時預覽視窗中標示淺藍色的區塊,就是你游標位於編輯視窗的位置, Brackets 真是一個讓人愛不釋手...
Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯
如果你對Brackets-HTML代碼快速輸入編輯器_網頁結構快速編輯有任何問題請到討論區發帖。