写html的tab快捷,Emmet快速编写html

缩写是Emmet工具的核心，这些特殊的表达式通过Emmet解析并转化为结构化的代码块，而语法用CSS选择器，HTML标签和一些Emmet特定的代码生成，所以对于任何一个前端开发人员都可以很容易地掌握和使用。 你可以使用标签名称为div、p等生成HTML标签，Emmet没有一组预定义可用的标记名称，您可以编写任何单词并把它转化为一个标签，例如：div →

Emmet代码虽然没有特定的标签，但编写时还是有一定的规则与技巧，下面我们就看一看：

****使用Tab键快速编写***

1、父子级关系:> 例：div>ul>li

div>ul>li

2、兄弟关系：+ 例：div+p+foter

div+p+foter

3、上级关系:^ 例 div+div>p>span+em^bq

div+div>p>span+em^bq

4、乘法：* 例 ul>li*5

ul>li*5

5、分组:() 例 div>(header>ul>li*2>)+footer>p

div>(header>ul>li*2>)+footer>p

使用多个(),并使用乘法* (div>dl>(dt+dd)*3)+footer>p

(div>dl>(dt+dd)*3)+footer>p

6、CSS选择器，给标签指定id和class选择器，只需在标签的后面直接添加，但必需以.或#开头：div#header+div.page+div#footer.class1.class2.class3

div#header+div.page+div#footer.class1.class2.class3

7、项目编码：ul>li.item$*5

ul>li.item$*5

生成无序列表+内容 h$[title=item$]{Header $}*3

h$[title=item$]{Header $}*3

多个 $$$ ul>li.item$$$#li$$*5

$$$ ul>li.item$$$#li$$*5

改变顺序：ul>li.item$@-*5

ul>li.item$@-*5

添加起始数:ol>li.io$@3{$@4}*7

ol>li.io$@3{$@4}*7

8、文本：{}使用花括号来添加文本元素: a{Click me}

a{Click me}

当元素用+连接时，文本{}编写正确后，并不能改变标签的层级关系：p>{Click }+a{here}+{ to continue}

p>{Click }+a{here}+{ to continue}

Emmet编写代码的格式最重要的就是不能有空格，如果有空格将不会完全解析和生成HTML代码。

Emmet最核心的就是缩写，而它也不属于一门语言，编写时也不需要有很强的可读性，最重要的就是能高速的生成HTML代码。只要你多练习，多看下官方的英文文档，很快你将掌握Emmet的编写方式，同时也将大大提高你的前端开发速度。