缩写是Emmet工具的核心，这些特殊的表达式通过Emmet解析并转化为结构化的代码块，而语法用CSS选择器，HTML标签和一些Emmet特定的代码生成，所以对于任何一个前端开发人员都可以很容易地掌握和使用。

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

  1. div → <div></div>, footer → <footer></footer>

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

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

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

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

  1. div>ul>li

将生成：

  1. <div>
  2. <ul>
  3. <li></li>
  4. </ul>
  5. </div>

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

  1. div+p+footer

将生成：

  1. <div></div>
  2. <p></p>
  3. <footer></footer>

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

  1. ul+

将生成：

  1. <ul>
  2. <li></li>
  3. </ul>
  1. dl+

将生成：

  1. <dl>
  2. <dt></dt>
  3. <dd></dd>
  4. </dl>

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

  1. div+div>p>span+em^bq

将生成：

  1. <div>
  2. <p><span></span><em></em></p>
  3. <blockquote></blockquote>
  4. </div>

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

  1. div+div>p>span+em^^bq

将生成：

  1. <div></div>
  2. <div>
  3. <p><span></span><em></em></p>
  4. </div>
  5. <blockquote></blockquote>

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

  1. div>ul>li*5

将生成：

  1. <div>
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. </ul>
  9. </div>

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

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

将生成：

  1. <div>
  2. <header>
  3. <ul>
  4. <li><a href=""></a></li>
  5. <li><a href=""></a></li>
  6. </ul>
  7. </header>
  8. <footer>
  9. <p></p>
  10. </footer>
  11. </div>

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

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

将生成：

  1. <div>
  2. <dl>
  3. <dt></dt>
  4. <dd></dd>
  5. <dt></dt>
  6. <dd></dd>
  7. <dt></dt>
  8. <dd></dd>
  9. </dl>
  10. </div>
  11. <footer>
  12. <p></p>
  13. </footer>

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

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

将生成：

  1. <div id="header"></div>
  2. <div class="page"></div>
  3. <div id="footer" class="class1 class2 class3"></div>

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

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

  1. td[title="Hello world!" colspan=3]

将生成：

  1. <td title="Hello world!" colspan="3"></td>

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

  1. td[colspan title]

将生成：

  1. <td colspan="" title=""></td>

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

  1. ul>li.item$*5

将生成：

  1. <ul>
  2. <li class="item1"></li>
  3. <li class="item2"></li>
  4. <li class="item3"></li>
  5. <li class="item4"></li>
  6. <li class="item5"></li>
  7. </ul>

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

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

将生成：

  1. <h1 title="item1">Header 1</h1>
  2. <h2 title="item2">Header 2</h2>
  3. <h3 title="item3">Header 3</h3>

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

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

将生成：

  1. <ul>
  2. <li class="item001"></li>
  3. <li class="item002"></li>
  4. <li class="item003"></li>
  5. <li class="item004"></li>
  6. <li class="item005"></li>
  7. </ul>

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

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

  1. ul>li.item$@-*5

将生成：

  1. <ul>
  2. <li class="item5"></li>
  3. <li class="item4"></li>
  4. <li class="item3"></li>
  5. <li class="item2"></li>
  6. <li class="item1"></li>
  7. </ul>

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

  1. ul>li.item$@3*5

将生成：

  1. <ul>
  2. <li class="item3"></li>
  3. <li class="item4"></li>
  4. <li class="item5"></li>
  5. <li class="item6"></li>
  6. <li class="item7"></li>
  7. </ul>

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

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

  1. a{Click me}

将生成：

  1. <a href="">Click me</a>

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

  1. <!-- a{click}+b{here} -->
  2. <a href="">click</a><b>here</b>
  3. <!-- a>{click}+b{here} -->
  4. <a href="">click<b>here</b></a>

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

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

将生成：

  1. <p>Click <a href="">here</a> to continue</p>

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

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

  1. <a href=""></a>

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

  1. a[href="http://salonglong.com" title="远方的雪山" class="logo"]{远方的雪山}

将生成：

  1. <a href="http://salonglong.com" title="远方的雪山" class="logo">远方的雪山</a>

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

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

  1. <div>
  2. .item
  3. </div>
  4. <span>.item</span>
  5. <ul class="nav">
  6. .item
  7. </ul>

将生成：

  1. <div>
  2. <div class="item"></div>
  3. </div>
  4. <span><span class="item"></span></span>
  5. <ul class="nav">
  6. <li class="item"></li>
  7. </ul>

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

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

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

  1. <div class="wrap">
  2. <div class="content"></div>
  3. </div>
  4. <em><span class="info"></span></em>
  5. <ul>
  6. <li class="item"></li>
  7. <li class="item"></li>
  8. <li class="item"></li>
  9. </ul>
  10. <table>
  11. <tr id="row1">
  12. <td colspan="2"></td>
  13. </tr>
  14. <tr id="row2">
  15. <td colspan="2"></td>
  16. </tr>
  17. <tr id="row3">
  18. <td colspan="2"></td>
  19. </tr>
  20. <tr id="row4">
  21. <td colspan="2"></td>
  22. </tr>
  23. </table>

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

这篇文章介绍了HTML的基本标签在Emmet下的写法，萨龙龙把它当做学习笔记，可以随时查看，如果对你有帮助就更好。

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

Emmet快速编写HTML代码的更多相关文章

  1. Emmet 快速编写html代码

    简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...

  2. VsCode中使用Emmet神器快速编写HTML代码

    一.Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML ...

  3. Emmet快速编写代码

    Emmet快速编写代码 ★div → <div></div>, span → <span></span> ★CSS选择器 ​ 给标签指定id选择器 di ...

  4. 使用Emmet 快速生成HTML代码

    在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...

  5. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

  6. 结合Zen Coding快速编写HTML代码（sublime text2篇）

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

  7. Emmet：HTML/CSS代码快速编写神器

    本文来源:http://www.iteye.com/news/27580    ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...

  8. Emmet：HTML/CSS代码快速编写神器(转)

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  9. Sublime Text 3插件之Emmet：HTML/CSS代码快速编写神器

    一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

随机推荐

  1. LoadRunner录制：脚本调试

    优化思路 1. 先录制 2. 然后进行清理.清理掉多余的cookie.lr_think_time等冗余脚本. 3. 调试脚本,让脚本可以跑通过. 4. 逐步优化添加 调试思路 1. 单用户单迭代 录制 ...

  2. 对象 get和set方法

    1.用途 用户定义的对象定义 getter 和 setter 以支持新增的属性. 示例:obj创建一个伪属性latest,它会返回log数组的最后一个元素. var obj = { log: ['ex ...

  3. 问题解决——MFC SDI程序 CFormView中控件随窗体缩放

    从来都是做对话框程序,这次想做个SDI的程序,想着用一下带Robbin界面的office2007风格.就不用使用那些花钱的商业控件/UI库了. 假设你不想看我打的文字.能够直接拷走代码,自己声明上定义 ...

  4. JavaScript操作符

    一元操作符 只能操作一个值的操作符叫做一元操作符. 递增和递减操作符 递增和递减操作符遵循下列规则:         在应用于一个包含有效数字字符的字符串时,先将其转换为数字值,再执行加减 1 的操作 ...

  5. smartsvn9破解及license文件

    第一步:去官网下载自己系统smartsvn版本文件 下载地址:http://www.smartsvn.com/download 第二步:破解 (1) 将文件解压到系统路径:/opt/smartsvn ...

  6. windows 设置定时锁屏

      设置间隔指定时间电脑自动锁屏 CreateTime--2017年7月3日10:16:14Author:Marydon 参考地址:电脑爱好者杂志 举例:实现每间隔45分钟,电脑自动锁屏 实现思路: ...

  7. VS2012不能创建数据库连接出现或者连接数据库时提示：未能载入文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc, Version=10.0.0.0, C

    VS2012不能创建数据库连接时或者连接数据库时提示:未能载入文件或程序集"Microsoft.SqlServer.Management.Sdk.Sfc, Version=10.0.0.0, ...

  8. php.ini中的pcre

    当页面代码没有任何问题,也没有报错.但是页面的循环很多,请求导致开销很大的时候,有可能要改php.ini中的pcre部分. [Pcre]pcre.recursion_limit=-1pcre.back ...

  9. JEECG环境搭建（Maven版本）-总结Eclipse

    1.安装sql server 数据库: 解决办法: 控制面板→程序和功能→启用或关闭Windows功能 .Net Framework 3.5这一项未被完全选中(应为对勾,如果是方块也不可以) 选中该项 ...

  10. 【iOS开发之Objective-C】书签管理器项目

    1.项目 新建一个书签管理器的项目,能够存储书签的网址.中文名.星级.訪问量和权限信息.具有增.删.改.查和排序的功能. 2.找对象,抽象类 书签管理器,书签管理器.书签管理器--  多读几次书是不是 ...