一、简写语法

Emmet 用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性，实现 HTML/XML/CSS 等代码的智能自动补全。

其通过文件名后缀识别文件类型，从而使用对应的自动补全语法。默认自动补全快捷键为制表符（Tab）。

下文中的“自动补全”均指“按下快捷键后自动补全”。

注意：Emmet 语法中的空格表示结束解析，所以书写语句中不能出现空格。

1、元素

在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。

  1. // before
    div
    foo
  2.  
  3. // after
    <div></div>
    <foo></foo>

输入 ! 或者 html:5 可以自动补全为 HTML5 基本结构。想要输出 HTML4 文本类型申明可以输入 html:4s 或者 html:4t 。

  1. // before
  2. ! (或html:5)
  3.  
  4. // after
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>Document</title>
  10. </head>
  11. <body>
  12.  
  13. </body>
  14. </html>

2、嵌套操作

1）child：使用 “>” 生成子元素

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

2) Sibling: 使用符号 “+” 生成兄弟元素

  1. // before
  2. div+p+bq
  3.  
  4. // after
  5. <div></div>
  6. <p></p>
  7. <blockquote></blockquote>

3) Climb-up:使用 “^” 生成父元素，与 “>” 相反

  1. // before
  2. div+div>p>span+em^bq
  3.  
  4. // after
  5. <div></div>
  6. <div>
  7.     <p><span></span><em></em></p>
  8.     <blockquote></blockquote>
  9. </div>

你甚至可以使用多个 “^”。

  1. // before
  2. div+div>p>span+em^^^bq

  3. // after
  4. <div></div>
  5. <div>
  6.     <p><span></span><em></em></p>
  7. </div>
  8. <blockquote></blockquote>

4) Multiplication:使用 “*” 操作符生成多个元素

  1. // before
  2. div>ul>li*5
  3.  
  4. // after
  5. <div>
  6.     <ul>
  7.         <li></li>
  8.         <li></li>
  9.         <li></li>
  10.         <li></li>
  11.         <li></li>
  12.     </ul>
  13. </div>

5) Grouping:使用 “()” 操作符将元素分组，实现更复杂的简写任务

  1. // before
    // "+" 后面的元素与括号中的第一个元素属于兄弟关系
  2. div>(header>ul>li*2)+footer>p
  3.  
  4. //after
  5. <div>
  6.     <header>
  7.         <ul>
  8.             <li></li>
  9.             <li></li>
  10.         </ul>
  11.     </header>
  12.     <footer>
  13.         <p></p>
  14.     </footer>
  15. </div>

3. 属性操作

在简写时就可以为元素设置属性。

1) id 与 class

简写时，元素与 id 属性值之间用 “#” 分隔，与 class 属性值之间用 “.” 分隔。

  1. // before
  2. div#header+div.page+div#footer.class1.class2.class3
  3.  
  4. // after
  5. <div id="header"></div>
  6. <div class="page"></div>
  7. <div id="footer" class="class1 class2 class3"></div>

2) 其他属性

使用 [attr] 标记添加其他属性。

  1. // before
  2. td[title='hello' colspan=3]
  3.  
  4. // after
  5. <td title="hello" colspan="3"></td>

注意：

  • 方括号中可添加任意数量的属性
  • 不给定属性值，则属性值为""。td[colspan title]将得到 <td colspan="" title=""></td>
  • 属性值可用单引号或双引号，输出统一为双引号
  • 如果属性值中没有空格，则引号可省略

3) 为条目编号

使用 “*” 符号生成的多个元素，可用 “$” 操作符实现从1到 N 自动编号。

  1. // before
  2. li.item$*3
  3.  
  4. // after
  5. <li class="item1"></li>
  6. <li class="item2"></li>
  7. <li class="item3"></li>

可在 “$” 后添加 “@n” 修改编号的起始值为n。

  1. // before
  2. li.item$@3*3
  3.  
  4. // after
  5. <li class="item3"></li>
  6. <li class="item4"></li>
  7. <li class="item5"></li>

可在 “$” 后添加 “@-” 修改编号的方向。

  1. // before
  2. li.item$@-3*3
  3.  
  4. // after
  5. <li class="item5"></li>
  6. <li class="item4"></li>
  7. <li class="item3"></li>

4. 添加文本

使用花括号 “{}” 操作符为元素添加文本节点。

  1. // before
  2. a[href=me.htm]{click me}
  3.  
  4. // after
  5. <a href="me.htm">click me</a>

因为文本也是节点，所以 a[href=me.htm]{click me} 与 a[href=me.htm]>{click me} 等价。

但有多个元素时则要注意。

  1. // before
  2. a[href=me.htm]{click me}+p{ok}
  3. a[href=me.htm]>{click me}+p{ok}
  4.  
  5. // after
  6. <a href="me.htm">click me</a>
  7. <p>ok</p>
  8.  
  9. <a href="me.htm">click me
  10.     <p>ok</p>
  11. </a>

Emmet 的简写方式在 snippets.json 中定义，更多使用方式可通过查看该文件了解。

对于 visual studio code 编辑器来说，该文件路径为： [安装根目录]\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json

参考：Emmet官方文档

Emmet之html语法的更多相关文章

  1. Emmet(Zen Coding)语法规则简介

    ———Emmet(Zen Coding)语法规则简介——— [Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例] 基础 ...

  2. Emmet的HTML语法（敲代码的快捷方式）

    Emmet的HTML语法(敲代码的快捷方式)   版权声明:本文为网上转载.   所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准 ...

  3. [转载]Emmet (ZenCoding) 缩写语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  4. “一键”生成HTML——Emmet插件常用语法

    Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...

  5. Emmet 生成 HTML 的语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  6. Emmet 语法大全（缩写语法/sublime 插件）

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  7. Emmet 语法探析

    Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...

  8. 转：Emmet 学习之路 - 2 基本语法

    http://blog.csdn.net/jizhongchun/article/details/8472755 导读:Emmet的基本语法.学习步骤是:1 基本语法: 2 html命令: 3 css ...

  9. Emmet缩写语法

    缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的 ...

随机推荐

  1. SSH网上商城---需求分析+表关系分析

    SSH---小编初次接触的时候傻傻的以为这个跟SHE有什么关系呢?又是哪路明星歌手,后来才知道小编又土鳖了,原来SSH是这个样子滴,百度百科对她这样阐述,SSH即 Spring + Struts +H ...

  2. Cocos2D结合CoreGraphics实现RPG人物中空黑洞吸入效果

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 之前的博文中我们实现了RPG人物的复古效果. 现在我们再完点h ...

  3. 3.QT中的debug相关的函数，以及文件锁的使用

     1  新建项目T33Debug main.cpp #include <QDebug> #include <QFile> #include <QMutex>   ...

  4. 怎样在Ubuntu 14.04中搭建gitolite git服务器

     1.   首先这里我们安装openssh-serveropenssh-client,如果你用的是VPS之类的一般都默认安装好了,不过运行一个这个命令不会有错的,如果有安装就会提示已安装. sud ...

  5. sharepoint adfs Adding Claims to an Existing Token Issuer in SharePoint 2010

    转载链接 http://www.theidentityguy.com/articles/2010/10/19/adding-claims-to-an-existing-token-issuer-i ...

  6. JQuery实战---初识JQuery+入门实例

    JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说 ...

  7. Hessian源码分析--HessianProxy

    在上一篇博客 Hessian源码分析--HessianProxyFactory 中我们了解到,客户端获得的对象其实是HessianProxy生成的目标对象,当调用目标对象的方法时,会调用Hessian ...

  8. lk中内联调用的dsb()

    lk中内联调用的dsb() 比如lk的uart_dm_init()函数就调用了dsb() /* Configure the uart clock */ clock_config_uart_dm(id) ...

  9. java中public与private还有protect的区别

    java中public与private还有protect的区别 总是忘记.

  10. 判断无向图是否有环路的方法 -并查集 -BFS

    可以利用并查集或者带颜色标记的BFS(来自算法导论)判断. 首先介绍第一种,用并查集来判断: 首先初始化所有元素的根为-1,-1代表根节点,接下来对于图中的每一条边(v1,v2)都并入集合,并入的方式 ...