一:
如果要写上面的标签,直接写##ul>li>a 然后按Tap键盘,就可以快速构建
二:
ul>(li>a)*3 然后按Tap键,就可以快速撰写
三:同时还可以给标签添加属性:
ul>(li>a[#])*3 然后按Tap键,就可以快速撰写
四:不同的属性:
ul>(li>a[click="#"])*3
五. 父子关系:>,使用>操作符在内部相互嵌套的标签:
div>ul>li
六.:兄弟关系:+,使用+操作符将标签处于同一个层级:
div+p+footer
七:生成兄弟关系时,像ul dl这样的列表标签,使用+操作符将生成一个标准的列表结构:
ul+
dl+
八: 上级关系:^,使用 ^ 操作符使标签与前一标签的父级处于相同的级别:
div+div>p>span+em^bq
使用两^操作符就与前一标签的爷爷级是相同级别,依此类推:
div+div>p>span+em^^bq
九: 乘法:,使用操作符可以输出多个标签:
div>ul>li*5
十: 分组:(),用()操作符进行分组,使编写的代码结构更加清晰、明了,一组标签就相当一个元素:
div>(header>ul>li*2>a)+footer>p
你可以使用多个(),并使用乘法*操作符:
(div>dl>(dt+dd)*3)+footer>p
CSS选择器,给标签指定id和class选择器,只需在标签的后面直接添加,但必需以.或#开头:
div#header+div.page+div#footer.class1.class2.class3
Emmet默认的标签是div,所以我们在写带有CSS选择器的div标签时,可以省去div,你可以试试。
十一:自定义属性:[](英文下的中括号),使用[]操作符给标签添加自定义属性:
td[title="Hello world!" colspan=3]
可以把你喜欢的一些属性放在[]内,如果不指定属性值,代码将生成不带属性值的HTML默认标签:
td[colspan title]
属性值必需使用单引号或双引号,不然就会出现你可能想到的效果。
十二:. 项目编号:,使用∗可以重复的标签,,使用∗可以重复的标签,可以使标签生成有序列表,输出的值为数字:
ul>li.item$*5
除了生成无序列表,其它的标签也是一样:
h[title=item]{Header $}*3
Header 1
Header 2
Header 3
你也可以使用多个$操作符用0(零)来分填充数字:
ul>li.item$$$*5
十二:. 更改列表的起始数字与顺序,看下面的代码就一目了然:数字的倒序,只需在前添加@-:*
ul>li.item$@-*5
起始数字,在前添加@起始数字:*
ul>li.item$@3*5
而从起始数字为3的列表倒序,只需把上面的Emmet代码item后面的数字写成@-3*5。
十三:. 文本:{},使用花括号来添加文本元素:
a{Click me}
注意:当{}作为单独的一个操作符使用时,a{click}和a>{click}将生成相同的标签,但当使用了多个,或用了其它操作符时将会生成不同的标签: