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