一、简写语法

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

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

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

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

1、元素

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

// before
div
foo

// after
<div></div>
<foo></foo>

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

// before

! (或html:5)

// after

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

2、嵌套操作

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

// before

div>ul>li

// after

<div>

    <ul>

        <li></li>

    </ul>

</div>

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

// before

div+p+bq

// after

<div></div>

<p></p>

<blockquote></blockquote>

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

// before

div+div>p>span+em^bq

// after

<div></div>

<div>

    <p><span></span><em></em></p>

    <blockquote></blockquote>

</div>

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

// before

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


// after

<div></div>

<div>

    <p><span></span><em></em></p>

</div>

<blockquote></blockquote>

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

// before

div>ul>li*5

// after

<div>

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

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

// before
// "+" 后面的元素与括号中的第一个元素属于兄弟关系

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

//after

<div>

    <header>

        <ul>

            <li></li>

            <li></li>

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>

3. 属性操作

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

1) id 与 class

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

// before

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

// after

<div id="header"></div>

<div class="page"></div>

<div id="footer" class="class1 class2 class3"></div>

2) 其他属性

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

// before

td[title='hello' colspan=3]

// after

<td title="hello" colspan="3"></td>

注意：

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

3) 为条目编号

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

// before

li.item$*3

// after

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

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

// before

li.item$@3*3

// after

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

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

// before

li.item$@-3*3

// after

<li class="item5"></li>

<li class="item4"></li>

<li class="item3"></li>

4. 添加文本

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

// before

a[href=me.htm]{click me}

// after

<a href="me.htm">click me</a>

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

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

// before

a[href=me.htm]{click me}+p{ok}

a[href=me.htm]>{click me}+p{ok}

// after

<a href="me.htm">click me</a>

<p>ok</p>

<a href="me.htm">click me

    <p>ok</p>

</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. Android开发学习之路--NDK、JNI之初体验

    好久没有更新博客了,最近一直在看一个仿微信项目,然后看源码并自己实现下,相信经过这个项目可以让自己了解一个项目中的代码以及种种需要注意的事项.不知不觉中博客已经快要40w访问量,而且排名也即将突破30 ...

  2. Dynamics CRM 2015Online Update1 new feature之 插件跟踪日志

     在最新的CRM2015Online Update1版本中加入了一个新功能-插件跟踪日志,与其说是新功能更应该说是对原有功能的加强,因为ITracingService这个接口在2013中已经引入了, ...

  3. J2EE学习从菜鸟变大鸟之九 深入浅出理解 Servlet-----实例解析

    关于Servlet的基础内容在前面已经和大家分享过了,参考J2EE学习从菜鸟变大鸟之七 Servlet,现在结合到DRP中学习,深刻的体会Servlet起到了枢纽中转的作用,控制逻辑(到MVC中更像是 ...

  4. Android进阶(十三)网络爬虫&json应用

    刚开始接触网络爬虫,怎一个"菜"字了得!经过几次的折磨,对其原理以及其中用到的json技术有了大致的了解,故作一总结,供有同样迷惑的朋友参考学习. 自己爬取的网站内容为12306的 ...

  5. UNIX环境高级编程——线程

    线程包含了表示进程内执行环境必需的信息,其中包括进程中标示线程的线程ID.一组寄存器值.栈.调度优先级和策略.信号屏蔽字.errno变量以及线程私有数据. 进程的所有信息对该进程的所有线程都是共享的, ...

  6. 程序员需要有多懒 ？- cocos2d-x 数学函数、常用宏粗整理

    原帖地址:http://www.cnblogs.com/buaashine/archive/2012/11/12/2765691.html 1.注意这是cocos2d-x中的函数,但大体上和cocos ...

  7. Eclipse快捷键指南

    Eclipse快捷键指南 Eclipse快捷键,熟悉快捷键可以帮助开发事半功倍,节省更多的时间来用于做有意义的事情.Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行Ct ...

  8. map.js的编写（js编写一个对象的方式）

    // 定义map function Map() { this.container = {}; } // 将key-value放入map中 Map.prototype.put = function(ke ...

  9. JAVA之旅（五）——this，static，关键字，main函数，封装工具类，生成javadoc说明书，静态代码块

    JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...

  10. 从"按层次输出二叉树"到"求解二叉树深度"的总结

    本文是在学习中的总结,欢迎转载但请注明出处:http://write.blog.csdn.net/postedit/41964669 最近在刷LeetCode上的算法题,发现好多题目的解题思路大体是一 ...