一、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

2，兄弟：+

縮寫：div+p+bq

1

2

3

3，上級：^

(1)縮寫：div+div>p>span+em^bq

1

2

3

4

5

(2)縮寫：div+div>p>span+em^^bq

1

2

3

4

5

4，分組：()

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

1

2

3

4

5

6

7

8

9

10

11

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

1

2

3

4

5

6

7

8

9

10

11

12

13

5，乘法：*

縮寫：ul>li*5

1

2

3

4

5

6

7

6，自增符號：$

(1)縮寫：ul>li.item$*5

1

2

3

4

5

6

7

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

1

2

3

Header 1

Header 2

Header 3

(3)縮寫：ul>li.item$$$*5

1

2

3

4

5

6

7

(4)縮寫：ul>li.item$@-*5

1

2

3

4

5

6

7

(5)縮寫：ul>li.item$@3*5

1

2

3

4

5

6

7

7，ID和類屬性

(1)縮寫：#header

1

(2)縮寫：.title

1

(3)縮寫：form#search.wide

1

(4)縮寫：p.class1.class2.class3

1

8，自定義屬性

(1)縮寫：p[title="Hello world"]

1

(2)縮寫：td[rowspan=2 colspan=3 title]

1

(3)縮寫：[a='value1' b="value2"]

1

9，文本：{}

(1)縮寫：a{Click me}

1

Click me

(2)縮寫：p>{Click }+a{here}+{ to continue}

1

Click here to continue

10，隱式標簽

(1)縮寫：.class

1

(2)縮寫：em>.class

1

(3)縮寫：ul>.class

1

2

3

(4)縮寫：table>.row>.col

1

2

3

4

5

三、HTML標簽語法

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

縮寫：hangge

1

2，基本html標簽

(1)縮寫：!

1

2

3

4

5

6

7

8

9

10

11

12

Document

(2)縮寫：a

1

(3)縮寫：a:link

1

(4)縮寫：a:mail

1

(5)縮寫：abbr

1

(6)縮寫：acronym

1

(7)縮寫：base

1

(8)縮寫：basefont

1

(9)縮寫：br

1

(10)縮寫：frame

1

(11)縮寫：hr

1

---

(12)縮寫：bdo

1

(13)縮寫：bdo:r

1

(14)縮寫：bdo:l

1

(15)縮寫：col

1

(16)縮寫：link

1

(17)縮寫：link:css

1

(18)縮寫：link:print

1

(19)縮寫：link:favicon

1

(20)縮寫：link:touch

1

(21)縮寫：link:rss

1

(22)縮寫：link:atom

1

(23)縮寫：meta

1

(24)縮寫：meta:utf

1

(25)縮寫：meta:win

1

(26)縮寫：meta:vp

1

(27)縮寫：meta:compat

1

(28)縮寫：style

1

(29)縮寫：script

1

(30)縮寫：script:src

1

(31)縮寫：img

1

(32)縮寫：iframe

1

(33)縮寫：embed

1

(34)縮寫：object

1

(35)縮寫：param

1

(36)縮寫：map

1

(37)縮寫：area

1

(38)縮寫：area:d

1

(39)縮寫：area:c

1

(40)縮寫：area:r

1

(41)縮寫：area:p

1

(42)縮寫：form

1

(43)縮寫：form:get

1

(44)縮寫：form:post

1

(45)縮寫：label

1

(46)縮寫：input

1

(47)縮寫：inp

1

(48)縮寫：input:hidden?別名：input[type=hidden name]

1

(49)縮寫：input:h?別名：input:hidden

1

(50)縮寫：input:text, input:t?別名：inp

1

(50)縮寫：input:search?別名：inp[type=search]

1

(51)縮寫：input:email?別名：inp[type=email]

1

(52)縮寫：input:url?別名：inp[type=url]

1

(53)縮寫：input:password?別名：inp[type=password]

1

(54)縮寫：input:p?別名：input:password

1

(55)縮寫：input:datetime?別名：inp[type=datetime]

1

(56)縮寫：input:date?別名：inp[type=date]

1

(57)縮寫：input:datetime-local?別名：inp[type=datetime-local]

1

(58)縮寫：input:month?別名：inp[type=month]

1

(59)縮寫：input:week?別名：inp[type=week]

1

(60)縮寫：input:time?別名：inp[type=time]

1

(61)縮寫：input:number?別名：inp[type=number]

1

(62)縮寫：input:color?別名：inp[type=color]

1

(63)縮寫：input:checkbox?別名：inp[type=checkbox]

1

(64)縮寫：input:c?別名：input:checkbox

1

(65)縮寫：input:radio?別名：inp[type=radio]

1

(66)縮寫：input:r?別名：input:radio

1

(67)縮寫：input:range?別名：inp[type=range]

1

(68)縮寫：input:file?別名：inp[type=file]

1

(69)縮寫：input:f?別名：input:file

1

(70)縮寫：input:submit

1

(71)縮寫：input:s?別名：input:submit

1

(72)縮寫：input:image

1

(73)縮寫：input:i?別名：input:image

1

(74)縮寫：input:button

1

(75)縮寫：input:b?別名：input:button

1

(76)縮寫：isindex

1

(77)縮寫：input:reset?別名：input:button[type=reset]

1

(78)縮寫：select

1

(79)縮寫：option

1

(80)縮寫：textarea

1

(81)縮寫：menu:context?別名：menu[type=context]>

1

(82)縮寫：menu:c?別名：menu:context

1

(83)縮寫：menu:toolbar?別名：menu[type=toolbar]>

1

(84)縮寫：menu:t?別名：menu:toolbar

1

(85)縮寫：video

1

(86)縮寫：audio

1

(87)縮寫：html:xml

1

(88)縮寫：keygen

1

(89)縮寫：command

1

(90)縮寫：bq?別名：blockquote

1

(91)縮寫：acr?別名：acronym

1

(92)縮寫：fig?別名：figure

1

(93)縮寫：figc?別名：figcaption

1

(94)縮寫：ifr?別名：iframe

1

(95)縮寫：emb?別名：embed

1

(96)縮寫：obj?別名：object

1

(97)縮寫：src?別名：source

1

(98)縮寫：cap?別名：caption

1

(99)縮寫：colg?別名：colgroup

1

(100)縮寫：fst,?fset?別名：fieldset

1

(101)縮寫：btn?別名：button

1

(102)縮寫：btn:b?別名：button[type=button]

1

(103)縮寫：btn:r?別名：button[type=reset]

1

(104)縮寫：btn:s?別名：button[type=submit]

1

四、CSS語法

更多的語法縮寫(比如?CSS、XSL)，可以查看官方的API文檔：http://docs.emmet.io/cheat-sheet/

總結

以上是生活随笔為你收集整理的atom自动补全html代码,Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。