Atom - Emmet插件的使用詳解（HTML/CSS代碼自動補全）

一、Emmet的安裝與介紹

Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的工具，能夠實現 HTML、CSS 的快速編寫。

• 官網地址：http://emmet.io/
• 官方文檔：http://docs.emmet.io/cheat-sheet/
• Atom的emmet介紹頁面：https://atom.io/packages/emmet

1，使用Emmet的好處

• 通常大多數的文本編輯器都會允許我們存儲和重用一些代碼塊，我們稱之為“片段”。雖然片段能很好地推動我們的生產力，但大多數的實現都有這樣一個缺點：我們必須先定義代碼片段，並且不能再運行時進行拓展。
• 而 Emmet 把片段這個概念提高到了一個新的層次：我們可以設置 CSS 形式的能夠動態被解析的表達式，然后根據輸入的縮寫來得到相應的內容。Emmet 很成熟的並且非常適用於編寫 HTML/XML 和 CSS 代碼的前端開發人員，但也可以用於編程語言。

2，安裝Emmet

Emmet 為大部分流行的編輯器都提供了安裝插件，本文演示如何在 Atom 中使用 Emmet 插件。

（1）點擊 Atom 的“Preferences”菜單選項（Windows 下是“Settings”菜單選項）

（2）進入到 Install 頁面。

（3）搜索“Emmet”包，點擊 Install 按鈕即可安裝。

3，簡單的使用樣例

（1）我們在編輯器中輸入如下代碼：

1

ul>li*6

（2）接着按下 tab 鍵，之前的縮寫代碼就會自動擴展為完整的 html 代碼片斷。

二、基本語法

1，后代：>

縮寫：nav>ul>li

1 2 3 4 5

< nav >      < ul >          < li ></ li >      </ ul > </ nav >

 

2，兄弟：+

縮寫：div+p+bq

1 2 3

< div ></ div > < p ></ p > < blockquote ></ blockquote >

3，上級：^

（1）縮寫：div+div>p>span+em^bq

1 2 3 4 5

< div ></ div > < div >      < p >< span ></ span >< em ></ em ></ p >      < blockquote ></ blockquote > </ div >

（2）縮寫：div+div>p>span+em^^bq

1 2 3 4 5

< div ></ div > < div >      < p >< span ></ span >< em ></ em ></ p > </ div > < blockquote ></ blockquote >

4，分組：()

（1）縮寫：div>(header>ul>li*2>a)+footer>p

1 2 3 4 5 6 7 8 9 10 11

< div >      < header >          < ul >              < li >< a  href = "" ></ a ></ li >              < li >< a  href = "" ></ a ></ li >          </ ul >      </ header >      < footer >          < p ></ p >      </ footer > </ div >

（2）縮寫：(div>dl>(dt+dd)*3)+footer>p

1 2 3 4 5 6 7 8 9 10 11 12 13

< div >      < dl >          < dt ></ dt >          < dd ></ dd >          < dt ></ dt >          < dd ></ dd >          < dt ></ dt >          < dd ></ dd >      </ dl > </ div > < footer >      < p ></ p > </ footer >

5，乘法：*

縮寫：ul>li*5

1 2 3 4 5 6 7

< ul >      < li ></ li >      < li ></ li >      < li ></ li >      < li ></ li >      < li ></ li > </ ul >

6，自增符號：$

（1）縮寫：ul>li.item$*5

1 2 3 4 5 6 7

< ul >      < li  class = "item1" ></ li >      < li  class = "item2" ></ li >      < li  class = "item3" ></ li >      < li  class = "item4" ></ li >      < li  class = "item5" ></ li > </ ul >

（2）縮寫：h$[title=item$]{Header $}*3

1 2 3

< h1  title = "item1" >Header 1</ h1 > < h2  title = "item2" >Header 2</ h2 > < h3  title = "item3" >Header 3</ h3 >

（3）縮寫：ul>li.item$$$*5

1 2 3 4 5 6 7

< ul >      < li  class = "item001" ></ li >      < li  class = "item002" ></ li >      < li  class = "item003" ></ li >      < li  class = "item004" ></ li >      < li  class = "item005" ></ li > </ ul >

（4）縮寫：ul>li.item$@-*5

1 2 3 4 5 6 7

< ul >      < li  class = "item5" ></ li >      < li  class = "item4" ></ li >      < li  class = "item3" ></ li >      < li  class = "item2" ></ li >      < li  class = "item1" ></ li > </ ul >

（5）縮寫：ul>li.item$@3*5

1 2 3 4 5 6 7

< ul >      < li  class = "item3" ></ li >      < li  class = "item4" ></ li >      < li  class = "item5" ></ li >      < li  class = "item6" ></ li >      < li  class = "item7" ></ li > </ ul >

7，ID和類屬性

（1）縮寫：#header

1	< div  id = "header" ></ div >

（2）縮寫：.title

1	< div  class = "title" ></ div >

（3）縮寫：form#search.wide

1	< form  id = "search"  class = "wide" ></ form >

（4）縮寫：p.class1.class2.class3

1	< p  class = "class1 class2 class3" ></ p >

8，自定義屬性

（1）縮寫：p[title="Hello world"]

1	< p  title = "Hello world" ></ p >

（2）縮寫：td[rowspan=2 colspan=3 title]

1	< td  rowspan = "2"  colspan = "3"  title = "" ></ td >

（3）縮寫：[a='value1' b="value2"]

1	< div  a = "value1"  b = "value2" ></ div >

9，文本：{}

（1）縮寫：a{Click me}

1	< a  href = "" >Click me</ a >

（2）縮寫：p>{Click }+a{here}+{ to continue}

1	< p >Click < a  href = "" >here</ a > to continue</ p >

10，隱式標簽

（1）縮寫：.class

1	< div  class = "class" ></ div >

（2）縮寫：em>.class

1	< em >< span  class = "class" ></ span ></ em >

（3）縮寫：ul>.class

1 2 3

< ul >      < li  class = "class" ></ li > </ ul >

（4）縮寫：table>.row>.col

1 2 3 4 5

< table >      < tr  class = "row" >          < td  class = "col" ></ td >      </ tr > </ table >

 

三、HTML標簽語法

1，所有未知的縮寫都會轉換成標簽

縮寫：hangge

1	< hangge ></ hangge >

 

2，基本html標簽

（1）縮寫：!

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> < html  lang = "en" > < head >    < meta  charset = "UTF-8" >    < meta  name = "viewport"  content = "width=device-width, initial-scale=1.0" >    < meta  http-equiv = "X-UA-Compatible"  content = "ie=edge" >    < title >Document</ title > </ head > < body >     </ body > </ html >

（2）縮寫：a

1	< a  href = "" ></ a >

（3）縮寫：a:link

1	< a  href = "http://" ></ a >

（4）縮寫：a:mail

1	< a  href = "mailto:" ></ a >

（5）縮寫：abbr

1	< abbr  title = "" ></ abbr >

（6）縮寫：acronym

1	< acronym  title = "" ></ acronym >

（7）縮寫：base

1	< base  href = ""  />

（8）縮寫：basefont

1	< basefont  />

（9）縮寫：br

1

< br  />

（10）縮寫：frame

1	< frame  />

（11）縮寫：hr

1

< hr  />

（12）縮寫：bdo

1	< bdo  dir = "" ></ bdo >

（13）縮寫：bdo:r

1	< bdo  dir = "rtl" ></ bdo >

（14）縮寫：bdo:l

1	< bdo  dir = "ltr" ></ bdo >

（15）縮寫：col

1

< col  />

（16）縮寫：link

1	< link  rel = "stylesheet"  href = ""  />

（17）縮寫：link:css

1	< link  rel = "stylesheet"  href = "style.css"  />

（18）縮寫：link:print

1	< link  rel = "stylesheet"  href = "print.css"  media = "print"  />

（19）縮寫：link:favicon

1	< link  rel = "shortcut icon"  type = "image/x-icon"  href = "favicon.ico"  />

（20）縮寫：link:touch

1	< link  rel = "apple-touch-icon"  href = "favicon.png"  />

（21）縮寫：link:rss

1	< link  rel = "alternate"  type = "application/rss+xml"  title = "RSS"  href = "rss.xml"  />

（22）縮寫：link:atom

1	< link  rel = "alternate"  type = "application/atom+xml"  title = "Atom"  href = "atom.xml"  />

（23）縮寫：meta

1	< meta  />

（24）縮寫：meta:utf

1	< meta  http-equiv = "Content-Type"  content = "text/html;charset=UTF-8"  />

（25）縮寫：meta:win

1	< meta  http-equiv = "Content-Type"  content = "text/html;charset=windows-1251"  />

（26）縮寫：meta:vp

1	< meta  name = "viewport"  content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"  />

（27）縮寫：meta:compat

1	< meta  http-equiv = "X-UA-Compatible"  content = "IE=7"  />

（28）縮寫：style

1	< style ></ style >

（29）縮寫：script

1	< script ></ script >

（30）縮寫：script:src

1	< script  src = "" ></ script >

（31）縮寫：img

1	< img  src = ""  alt = ""  />

（32）縮寫：iframe

1	< iframe  src = ""  frameborder = "0" ></ iframe >

（33）縮寫：embed

1	< embed  src = ""  type = ""  />

（34）縮寫：object

1	< object  data = ""  type = "" ></ object >

（35）縮寫：param

1	< param  name = ""  value = ""  />

（36）縮寫：map

1	< map  name = "" ></ map >

（37）縮寫：area

1	< area  shape = ""  coords = ""  href = ""  alt = ""  />

（38）縮寫：area:d

1	< area  shape = "default"  href = ""  alt = ""  />

（39）縮寫：area:c

1	< area  shape = "circle"  coords = ""  href = ""  alt = ""  />

（40）縮寫：area:r

1	< area  shape = "rect"  coords = ""  href = ""  alt = ""  />

（41）縮寫：area:p

1	< area  shape = "poly"  coords = ""  href = ""  alt = ""  />

（42）縮寫：form

1	< form  action = "" ></ form >

（43）縮寫：form:get

1	< form  action = ""  method = "get" ></ form >

（44）縮寫：form:post

1	< form  action = ""  method = "post" ></ form >

（45）縮寫：label

1	< label  for = "" ></ label >

（46）縮寫：input

1	< input  type = "text"  />

（47）縮寫：inp

1	< input  type = "text"  name = ""  id = ""  />

（48）縮寫：input:hidden 

別名：input[type=hidden name]

1	< input  type = "hidden"  name = ""  />

（49）縮寫：input:h 

別名：input:hidden

1	< input  type = "hidden"  name = ""  />

（50）縮寫：input:text, input:t 

別名：inp

1	< input  type = "text"  name = ""  id = ""  />

（50）縮寫：input:search 

別名：inp[type=search]

1	< input  type = "search"  name = ""  id = ""  />

（51）縮寫：input:email 

別名：inp[type=email]

1	< input  type = "email"  name = ""  id = ""  />

（52）縮寫：input:url 

別名：inp[type=url]

1	< input  type = "url"  name = ""  id = ""  />

（53）縮寫：input:password 

別名：inp[type=password]

1	< input  type = "password"  name = ""  id = ""  />

（54）縮寫：input:p 

別名：input:password

1	< input  type = "password"  name = ""  id = ""  />

（55）縮寫：input:datetime 

別名：inp[type=datetime]

1	< input  type = "datetime"  name = ""  id = ""  />

（56）縮寫：input:date 

別名：inp[type=date]

1	< input  type = "date"  name = ""  id = ""  />

（57）縮寫：input:datetime-local 

別名：inp[type=datetime-local]

1	< input  type = "datetime-local"  name = ""  id = ""  />

（58）縮寫：input:month 

別名：inp[type=month]

1	< input  type = "month"  name = ""  id = ""  />

（59）縮寫：input:week 

別名：inp[type=week]

1	< input  type = "week"  name = ""  id = ""  />

（60）縮寫：input:time 

別名：inp[type=time]

1	< input  type = "time"  name = ""  id = ""  />

（61）縮寫：input:number 

別名：inp[type=number]

1	< input  type = "number"  name = ""  id = ""  />

（62）縮寫：input:color 

別名：inp[type=color]

1	< input  type = "color"  name = ""  id = ""  />

（63）縮寫：input:checkbox 

別名：inp[type=checkbox]

1	< input  type = "checkbox"  name = ""  id = ""  />

（64）縮寫：input:c 

別名：input:checkbox

1	< input  type = "checkbox"  name = ""  id = ""  />

（65）縮寫：input:radio 

別名：inp[type=radio]

1	< input  type = "radio"  name = ""  id = ""  />

（66）縮寫：input:r 

別名：input:radio

1	< input  type = "radio"  name = ""  id = ""  />

（67）縮寫：input:range 

別名：inp[type=range]

1	< input  type = "range"  name = ""  id = ""  />

（68）縮寫：input:file 

別名：inp[type=file]

1	< input  type = "file"  name = ""  id = ""  />

（69）縮寫：input:f 

別名：input:file

1	< input  type = "file"  name = ""  id = ""  />

（70）縮寫：input:submit

1	< input  type = "submit"  value = ""  />

（71）縮寫：input:s 

別名：input:submit

1	< input  type = "submit"  value = ""  />

（72）縮寫：input:image

1	< input  type = "image"  src = ""  alt = ""  />

（73）縮寫：input:i 

別名：input:image

1	< input  type = "image"  src = ""  alt = ""  />

（74）縮寫：input:button

1	< input  type = "button"  value = ""  />

（75）縮寫：input:b 

別名：input:button

1	< input  type = "button"  value = ""  />

（76）縮寫：isindex

1	< isindex  />

（77）縮寫：input:reset 

別名：input:button[type=reset]

1	< input  type = "reset"  value = ""  />

（78）縮寫：select

1	< select  name = ""  id = "" ></ select >

（79）縮寫：option

1	< option  value = "" ></ option >

（80）縮寫：textarea

1	< textarea  name = ""  id = ""  cols = "30"  rows = "10" ></ textarea >

（81）縮寫：menu:context 

別名：menu[type=context]> 

1	< menu  type = "context" ></ menu >

（82）縮寫：menu:c 

別名：menu:context

1	< menu  type = "context" ></ menu >

（83）縮寫：menu:toolbar 

別名：menu[type=toolbar]> 

1	< menu  type = "toolbar" ></ menu >

（84）縮寫：menu:t 

別名：menu:toolbar

1	< menu  type = "toolbar" ></ menu >

（85）縮寫：video

1	< video  src = "" ></ video >

（86）縮寫：audio

1	< audio  src = "" ></ audio >

（87）縮寫：html:xml

1	< html  xmlns = "http://www.w3.org/1999/xhtml" ></ html >

（88）縮寫：keygen

1	< keygen  />

（89）縮寫：command

1	< command  />

（90）縮寫：bq 

別名：blockquote

1	< blockquote ></ blockquote >

（91）縮寫：acr 

別名：acronym

1	< acronym  title = "" ></ acronym >

（92）縮寫：fig 

別名：figure

1	< figure ></ figure >

（93）縮寫：figc 

別名：figcaption

1	< figcaption ></ figcaption >

（94）縮寫：ifr 

別名：iframe

1	< iframe  src = ""  frameborder = "0" ></ iframe >

（95）縮寫：emb 

別名：embed

1	< embed  src = ""  type = ""  />

（96）縮寫：obj 

別名：object

1	< object  data = ""  type = "" ></ object >

（97）縮寫：src 

別名：source

1	< source ></ source >

（98）縮寫：cap 

別名：caption

1	< caption ></ caption >

（99）縮寫：colg 

別名：colgroup

1	< colgroup ></ colgroup >

（100）縮寫：fst, fset 

別名：fieldset

1	< fieldset ></ fieldset >

（101）縮寫：btn 

別名：button

1	< button ></ button >

（102）縮寫：btn:b 

別名：button[type=button]

1	< button  type = "button" ></ button >

（103）縮寫：btn:r 

別名：button[type=reset]

1	< button  type = "reset" ></ button >

（104）縮寫：btn:s 

別名：button[type=submit]

1	< button  type = "submit" ></ button >

原文出自：www.hangge.com  轉載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1537.html