Emmet自动补充html和css

Emmet

自动补充 tab键

1:初始化文档

1. html:5 或! ：用于HTML5文档类型
2. html:xt：用于XHTML过渡文档类型
3. html:4s：用于HTML4严格文档类型

2:添加类，文本,id和属性

1. 连续输入元素名称和ID,Emmet会自动生成为你补全。如p.bar#foo
2. 定义HTML元素的内容和属性.输入h1{foo} 和a[href=#]会生成如下代码

html.png

3:嵌套

只要一行代码就能实现嵌套元素

用>:子元素符合,表示嵌套的元素

用+: 同级标签符合

用^:可以使该符合前的标签提升一行

qiantao.png

4:分组

可以嵌套和括号来生成一些代码块(.foo>h1)+(.bar>h2)

5:隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul> 中输入.item，就会生成<li class="item"></li>。下面是所有的隐式标签名称：

yinshi.png

6:定义多个元素

定义多个元素:用符号。如'ul>li3'.

7:定义多个带属性的元素

如输入ul>li.item$3会生成如下代码 如果要指定数字开始编号,使用ul>li.item$@35.需要指定反向编号，可以使用"$@-"符号

shuxings.png shuxing2s.png

还有一些css的缩写