[![Emmet快速编写HTML代码](https://pic.salongweb.com/sites/2/2013/08/html.jpg)](https://pic.salongweb.com/sites/2/2013/08/html.jpg "Emmet快速编写HTML代码")前面我们通过《[前端开发利器Emmet的介绍 ](https://yfdxs.com/emmet.html "前端开发利器Emmet的介绍 ")》简单介绍了Emmet以及在编辑器中的安装，今天我们再来看用Emmet超高速的编写HTML代码。
\[related\_posts tagid=”31″\]
缩写是Emmet工具的核心，这些特殊的表达式通过Emmet解析并转化为结构化的代码块，而语法用CSS选择器，HTML标签和一些Emmet特定的代码生成，所以对于任何一个前端开发人员都可以很容易地掌握和使用。

你可以使用标签名称为div、p等生成HTML标签，Emmet没有一组预定义可用的标记名称，您可以编写任何单词并把它转化为一个标签，例如：

1. div → &lt;div&gt;&lt;/div&gt;, footer → &lt;footer&gt;&lt;/footer&gt;

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

**1、生成HTML文件的初始结构：**

之前我们会用软件直接新建一个HTML文档，初始结构就生成了，但有些编辑器是不带这个功能的，手动输入是件痛苦的事，有了Emmet一切变得如此简单。生成HTML4（过渡）结构初始文档只需输入“html:4t”，HTML4（严格）结构初始文档只需输入“html:4s”，将生成标准的HTML4（严格）标准结构：

1. &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;
2. &lt;htmllang=“en”&gt;
3. &lt;head&gt;
4. &lt;metahttp-equiv=“Content-Type”content=“text/html;charset=UTF-8”&gt;
5. &lt;title&gt;Document&lt;/title&gt;
6. &lt;/head&gt;
7. &lt;body&gt;
8. 
9. &lt;/body&gt;
10. &lt;/html&gt;

**2、而HTML5就更简单省事了，像HTML4的输入格式“html:5”，更狠的是HTML5只需输入“!”,就可以生成HTML5文档的初始结构：**

1. &lt;!doctype html&gt;
2. &lt;htmllang=“en”&gt;
3. &lt;head&gt;
4. &lt;metacharset=“UTF-8”&gt;
5. &lt;title&gt;Document&lt;/title&gt;
6. &lt;/head&gt;
7. &lt;body&gt;
8. 
9. &lt;/body&gt;
10. &lt;/html&gt;

**3、父子关系：&gt;，使用&gt;操作符在内部相互嵌套的标签：**

1. div&gt;ul&gt;li

将生成：

1. &lt;div&gt;
2. &lt;ul&gt;
3. &lt;li&gt;&lt;/li&gt;
4. &lt;/ul&gt;
5. &lt;/div&gt;

**4、兄弟关系：+，使用+操作符将标签处于同一个层级：**

1. div+p+footer

将生成：

1. &lt;div&gt;&lt;/div&gt;
2. &lt;p&gt;&lt;/p&gt;
3. &lt;footer&gt;&lt;/footer&gt;

**5、生成兄弟关系时，像ul dl这样的列表标签，使用+操作符将生成一个标准的列表结构：**

1. ul+

将生成：

1. &lt;ul&gt;
2. &lt;li&gt;&lt;/li&gt;
3. &lt;/ul&gt;

1. dl+

将生成：

1. &lt;dl&gt;
2. &lt;dt&gt;&lt;/dt&gt;
3. &lt;dd&gt;&lt;/dd&gt;
4. &lt;/dl&gt;

**6、上级关系：^，使用^操作符使标签与前一标签的父级处于相同的级别：**

1. div+div&gt;p&gt;span+em^bq

将生成：

1. &lt;div&gt;
2. &lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;
3. &lt;blockquote&gt;&lt;/blockquote&gt;
4. &lt;/div&gt;

**7、使用两^操作符就与前一标签的爷爷级是相同级别，依此类推：**

1. div+div&gt;p&gt;span+em^^bq

将生成：

1. &lt;div&gt;&lt;/div&gt;
2. &lt;div&gt;
3. &lt;p&gt;&lt;span&gt;&lt;/span&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;
4. &lt;/div&gt;
5. &lt;blockquote&gt;&lt;/blockquote&gt;

**8、乘法：\*，使用\*操作符可以输出多个标签：**

1. div&gt;ul&gt;li\*5

将生成：

1. &lt;div&gt;
2. &lt;ul&gt;
3. &lt;li&gt;&lt;/li&gt;
4. &lt;li&gt;&lt;/li&gt;
5. &lt;li&gt;&lt;/li&gt;
6. &lt;li&gt;&lt;/li&gt;
7. &lt;li&gt;&lt;/li&gt;
8. &lt;/ul&gt;
9. &lt;/div&gt;

**9、分组：()，用()操作符进行分组，使编写的代码结构更加清晰、明了，一组标签就相当一个元素：**

1. div&gt;(header&gt;ul&gt;li\*2&gt;a)+footer&gt;p

将生成：

1. &lt;div&gt;
2. &lt;header&gt;
3. &lt;ul&gt;
4. &lt;li&gt;&lt;ahref=“”&gt;&lt;/a&gt;&lt;/li&gt;
5. &lt;li&gt;&lt;ahref=“”&gt;&lt;/a&gt;&lt;/li&gt;
6. &lt;/ul&gt;
7. &lt;/header&gt;
8. &lt;footer&gt;
9. &lt;p&gt;&lt;/p&gt;
10. &lt;/footer&gt;
11. &lt;/div&gt;

**10、你可以使用多个()，并使用乘法\*操作符：**

1. (div&gt;dl&gt;(dt+dd)\*3)+footer&gt;p

将生成：

1. &lt;div&gt;
2. &lt;dl&gt;
3. &lt;dt&gt;&lt;/dt&gt;
4. &lt;dd&gt;&lt;/dd&gt;
5. &lt;dt&gt;&lt;/dt&gt;
6. &lt;dd&gt;&lt;/dd&gt;
7. &lt;dt&gt;&lt;/dt&gt;
8. &lt;dd&gt;&lt;/dd&gt;
9. &lt;/dl&gt;
10. &lt;/div&gt;
11. &lt;footer&gt;
12. &lt;p&gt;&lt;/p&gt;
13. &lt;/footer&gt;

**11、CSS选择器，给标签指定id和class选择器，只需在标签的后面直接添加，但必需以.或#开头：**

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

将生成：

1. &lt;divid=“header”&gt;&lt;/div&gt;
2. &lt;divclass=“page”&gt;&lt;/div&gt;
3. &lt;divid=“footer”class=“class1 class2 class3”&gt;&lt;/div&gt;

Emmet默认的标签是div，所以我们在写带有CSS选择器的div标签时，可以省去div，你可以试试。

**12、自定义属性：\[\]（英文下的中括号），使用\[\]操作符给标签添加自定义属性：**

1. td\[title=“Hello world!”colspan=3\]

将生成：

1. &lt;tdtitle=“Hello world!”colspan=“3”&gt;&lt;/td&gt;

**13、可以把你喜欢的一些属性放在\[\]内，如果不指定属性值，代码将生成不带属性值的HTML默认标签：**

1. td\[colspan title\]

将生成：

1. &lt;tdcolspan=“”title=“”&gt;&lt;/td&gt;

属性值必需使用单引号或双引号，不然就会出现你可能想到的效果。
**14、项目编号：$，使用\*可以重复的标签，$可以使标签生成有序列表，输出的值为数字：**

1. ul&gt;li.item$\*5

将生成：

1. &lt;ul&gt;
2. &lt;liclass=“item1”&gt;&lt;/li&gt;
3. &lt;liclass=“item2”&gt;&lt;/li&gt;
4. &lt;liclass=“item3”&gt;&lt;/li&gt;
5. &lt;liclass=“item4”&gt;&lt;/li&gt;
6. &lt;liclass=“item5”&gt;&lt;/li&gt;
7. &lt;/ul&gt;

**15、除了生成无序列表，其它的标签也是一样：**

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

将生成：

1. &lt;h1title=“item1”&gt;Header 1&lt;/h1&gt;
2. &lt;h2title=“item2”&gt;Header 2&lt;/h2&gt;
3. &lt;h3title=“item3”&gt;Header 3&lt;/h3&gt;

**16、你也可以使用多个$操作符用0（零）来分填充数字：**

1. ul&gt;li.item$$$\*5

将生成：

1. &lt;ul&gt;
2. &lt;liclass=“item001”&gt;&lt;/li&gt;
3. &lt;liclass=“item002”&gt;&lt;/li&gt;
4. &lt;liclass=“item003”&gt;&lt;/li&gt;
5. &lt;liclass=“item004”&gt;&lt;/li&gt;
6. &lt;liclass=“item005”&gt;&lt;/li&gt;
7. &lt;/ul&gt;

更改列表的起始数字与顺序，看下面的代码就一目了然：

**17、数字的倒序，只需在\*前添加@-：**

1. ul&gt;li.item$@-\*5

将生成：

1. &lt;ul&gt;
2. &lt;liclass=“item5”&gt;&lt;/li&gt;
3. &lt;liclass=“item4”&gt;&lt;/li&gt;
4. &lt;liclass=“item3”&gt;&lt;/li&gt;
5. &lt;liclass=“item2”&gt;&lt;/li&gt;
6. &lt;liclass=“item1”&gt;&lt;/li&gt;
7. &lt;/ul&gt;

**18、起始数字，在\*前添加@起始数字：**

1. ul&gt;li.item$@3\*5

将生成：

1. &lt;ul&gt;
2. &lt;liclass=“item3”&gt;&lt;/li&gt;
3. &lt;liclass=“item4”&gt;&lt;/li&gt;
4. &lt;liclass=“item5”&gt;&lt;/li&gt;
5. &lt;liclass=“item6”&gt;&lt;/li&gt;
6. &lt;liclass=“item7”&gt;&lt;/li&gt;
7. &lt;/ul&gt;

而从起始数字为3的列表倒序，只需把上面的Emmet代码item后面的数字写成@-3\*5。

**19、文本：{}，使用花括号来添加文本元素：**

1. a{Click me}

将生成：

1. &lt;ahref=“”&gt;Click me&lt;/a&gt;

**20、注意：当{}作为单独的一个操作符使用时，a{click}和a&gt;{click}将生成相同的标签，但当使用了多个，或用了其它操作符时将会生成不同的标签：**

1. &lt;!– a{click}+b{here} –&gt;
2. &lt;ahref=“”&gt;click&lt;/a&gt;&lt;b&gt;here&lt;/b&gt;
3. 
4. &lt;!– a&gt;{click}+b{here} –&gt;
5. &lt;ahref=“”&gt;click&lt;b&gt;here&lt;/b&gt;&lt;/a&gt;

**21、当元素用+连接时，文本{}编写正确后，并不能改变标签的层级关系：**

1. p&gt;{Click }+a{here}+{ to continue}

将生成：

1. &lt;p&gt;Click &lt;ahref=“”&gt;here&lt;/a&gt; to continue&lt;/p&gt;

对于一些特殊的标签类型，比如：a、img、link、input等带有属性值的标签，在编写Emmet插件时已经为我们编写好了基本的结构。

**22、比如a标签，在编辑中输入a，即可解析成一个基本的a标签：**

1. &lt;ahref=“”&gt;&lt;/a&gt;

**23、a标签有几个属性值，在编写Emmet代码时可以添加这些值来覆盖默认的属性值：**

1. a\[href=“https://yfdxs.com”title=“远方的雪山”class=“logo”\]{远方的雪山}

将生成：

1. &lt;ahref=“https://yfdxs.com”title=“远方的雪山”class=“logo”&gt;远方的雪山&lt;/a&gt;

因为属性值是不可以缩写的，所以看起来编写带属性值是相似的。

**24、在许多情况下，你可以跳过输入标签名称和Emmet代码，得到HTML代码，例如下面的例子：**

1. &lt;div&gt;
2. .item
3. &lt;/div&gt;
4. 
5. &lt;span&gt;.item&lt;/span&gt;
6. 
7. &lt;ulclass=“nav”&gt;
8. .item
9. &lt;/ul&gt;

将生成：

1. &lt;div&gt;
2. &lt;divclass=“item”&gt;&lt;/div&gt;
3. &lt;/div&gt;
4. 
5. &lt;span&gt;&lt;spanclass=“item”&gt;&lt;/span&gt;&lt;/span&gt;
6. 
7. &lt;ulclass=“nav”&gt;
8. &lt;liclass=“item”&gt;&lt;/li&gt;
9. &lt;/ul&gt;

**25、从上面的例子中我们可以看到，插件会根据id或class所在的父级标签生成相应的标签，这种写法也是遵循HTML的编写规则，通过下面的代码你会更明白：**

1. .wrap&gt;.content div.wrap&gt;div.content
2. em&gt;.info em&gt;span.info
3. ul&gt;.item\*3 ul&gt;li.item\*3
4. table&gt;\#row$\*4&gt;\[colspan=2\] table&gt;tr#row$\*4&gt;td\[colspan=2\]

上面对应的四组代码最终生成的代码对应为：

1. &lt;divclass=“wrap”&gt;
2. &lt;divclass=“content”&gt;&lt;/div&gt;
3. &lt;/div&gt;
4. 
5. &lt;em&gt;&lt;spanclass=“info”&gt;&lt;/span&gt;&lt;/em&gt;
6. 
7. &lt;ul&gt;
8. &lt;liclass=“item”&gt;&lt;/li&gt;
9. &lt;liclass=“item”&gt;&lt;/li&gt;
10. &lt;liclass=“item”&gt;&lt;/li&gt;
11. &lt;/ul&gt;
12. 
13. &lt;table&gt;
14. &lt;trid=“row1”&gt;
15. &lt;tdcolspan=“2”&gt;&lt;/td&gt;
16. &lt;/tr&gt;
17. &lt;trid=“row2”&gt;
18. &lt;tdcolspan=“2”&gt;&lt;/td&gt;
19. &lt;/tr&gt;
20. &lt;trid=“row3”&gt;
21. &lt;tdcolspan=“2”&gt;&lt;/td&gt;
22. &lt;/tr&gt;
23. &lt;trid=“row4”&gt;
24. &lt;tdcolspan=“2”&gt;&lt;/td&gt;
25. &lt;/tr&gt;
26. &lt;/table&gt;

我们应该了解到，CSS选择器在块级元素中默认的HTML标签为div，在内联级元素中为span，而对于HTML一些特殊的标签：ul li、table tr td，将会生成对应的内部标签。

这篇文章介绍了HTML的基本标签在Emmet下的写法，[萨龙龙](https://yfdxs.com/sa-longlong "萨龙龙")把它当做学习笔记，可以随时查看，如果对你有帮助就更好。

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

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