Emmet快速开发

标签元素关系展开

div.wrap>div.content>(div.inner_l+div.inner_r)^div.sider

------缩写展开如下----------------------------------------------

<div class="wrap">
    <div class="content">
        <div class="inner_l"></div>
        <div class="inner_r"></div>
    </div>
    <div class="sider"></div>
</div>

从这个html代码缩写里面我们可以看到使用了4个符号，分别是：

> 后面代表子元素
+ 后面代表下一个兄弟元素
^ 代表返回父级元素
() 小括号代表代表一个缩写集合

 

具有特定结构的标签展开

ul+

------缩写展开如下----------------------------------------------

<ul>
    <li></li>
</ul>

这类特定的标签，缩写时在后面添加一个 +（加号），展开时会默认生成其子元素。类似的标签还有 map、dl、ol、table 等。

标签元素添加属性

table[cellpadding=0 cellspacing=0 width=100%]

------缩写展开如下----------------------------------------------

<table cellpadding="0" cellspacing="0" width="100%"></table>

标签元素的属性写在标签后紧跟的中括号内，属性之间用空格隔开，如果某个属性中有空格，那么属性值就需要添加引号。

id 和 class 属性是不需要写在中括号里面的，直接写 #idName 和 .className 就可以了，并且可以写多个 className，如：div#a.b.c

标签元素内添加文本节点

div{我是文本节点}

------缩写展开如下----------------------------------------------

<div>我是文本节点</div>

文本节点写在标签元素后面紧跟的大括号里面，并且，大括号里面可以用 $ 符号写入递增数字。

一些省略标签的展开方式，如：

在行内元素中省略子标签

span>.c
strong>.c
b>.c

------缩写展开如下----------------------------------------------

<span><span class="c"></span></span>
<strong><span class="c"></span></strong>
<b><span class="c"></span></b>

由此可以看出，在行内元素内省略子元素标签，子元素标签就会默认为 span 标签。

后续测试，p 元素默认的子元素也是 span 元素。而 h1-h6 标题标签默认的则是 div 元素，这和div元素的默认子元素是一样的。

因此可以得出一个结论，行内元素和p这个不能插入块元素的标签的默认子元素就是 span 元素。而除特定标签外的块元素默认插入的子元素则是div元素。

生成多个类似元素

ul>li.item-${$}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    <li class="item-4">4</li>
    <li class="item-5">5</li>
</ul>

我们可以在标签后面添加 *number 来生成我们需要标签的个数，同时还可以使用 $ 来递增改变数字部分，如 class 值中也可以使用这一符号。并且可以同时使用多个 $ 符号，如：

ul>li.item-$$${$$}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item-001">01</li>
    <li class="item-002">02</li>
    <li class="item-003">03</li>
    <li class="item-004">04</li>
    <li class="item-005">05</li>
</ul>

生成多个类似元素，指定递增初始数

ul>li.item$@3{文本节点}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item3">文本节点</li>
    <li class="item4">文本节点</li>
    <li class="item5">文本节点</li>
    <li class="item6">文本节点</li>
    <li class="item7">文本节点</li>
</ul>

生成多个类似元素，指定递减结束数

ul>li.item$@-3[title]{文本节点}*5

------缩写展开如下----------------------------------------------

<ul>
    <li class="item7" title="">文本节点</li>
    <li class="item6" title="">文本节点</li>
    <li class="item5" title="">文本节点</li>
    <li class="item4" title="">文本节点</li>
    <li class="item3" title="">文本节点</li>
</ul>

缩写代码后缀

这里只举前端用到的那部分，主要讲到 |e、|c 、|s、|t 这四个后缀

|e 后缀

div.box>div.inner{▪￥×}|e

------缩写展开如下----------------------------------------------

<div class="box">
    <div class="inner">▪￥×</div>
</div>

|e 后缀的作用就是将缩写里面的特殊字符转义成字符编码

|c 后缀

div.box>div.inner{▪￥}>div|c

------缩写展开如下----------------------------------------------

<div class="box">
    <div class="inner">▪￥
        <div></div>
    </div>
    <!-- /.inner -->
</div>
<!-- /.box -->

|c 后缀的作用就是给每个有 class 或 id 的元素添加结束注释。

|s 后缀

div.box>div.inner{▪￥}|s

------缩写展开如下----------------------------------------------

<div class="box"><div class="inner">▪￥</div></div>

|s 后缀的作用就是将缩写代码在一行中展开。

以上三种后缀可以同时使用多个，可以达到多个效果结合。

|t 后缀

最后来说下 |t 后缀，该后缀和上面其他的后缀有所不同，他使用的主要是给带有数字开头的文本节点包标签，并去掉开始的数字（可以带有小数点或中华线），如：

12-3文本节点1
45-文本节点2
78、文本节点3
7.文本节点4
7,文本节点4
s文本节点4

------缩写展开如下----------------------------------------------

<ul>
    <li>文本节点1</li>
    <li>文本节点2</li>
    <li>、文本节点3</li>
    <li>文本节点4</li>
    <li>,文本节点4</li>
    <li>s文本节点</li>
</ul>

操作方法是，先选中这段文本，按下 ctrl+shift+g 快捷键（Wrap with Abbreviation），再输入 ul>li*|t 回车，就会展开这个结果了。由此可以看出，|t 可以将这些文本节点前面的数字删除掉。

最后介绍一个自动生成测试文本的代码

自动生成文本节点的代码是 lorem 或 lipsum 字符串，这两个字符串后面可跟一个数字，用于确定生成多少个单词，默认生成30个单词。如：

p>lorem10   或  p>lipsum10

------缩写展开如下----------------------------------------------

p>lipsum10|e

lorem只能跟在 >（右括号）的后面，表示前一个标签的内容。

如果 lorem 后面还跟着 class 、 id 或 *number，那么就会在父标签里面创建一个默认标签，并未这个标签添加这个 class 或 id ，最后把生成的文本节点放到子标签里面。如：

ul>lorem*5
或
ul>li*5>lorem
------缩写展开如下----------------------------------------------

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, nulla, asperiores quod ea facilis nostrum tempora dolores suscipit odio quasi doloribus nemo provident est deleniti molestias culpa ipsam assumenda! Doloremque.</li>
    <li>Eligendi, recusandae vitae tempore deleniti omnis alias distinctio asperiores commodi veritatis obcaecati id totam porro culpa earum rerum voluptatum cupiditate adipisci eos minima nesciunt eius modi repellendus minus eum doloribus?</li>
    <li>Aliquam, iure, eaque, accusantium vero modi est quam deserunt rerum minima in quisquam aut culpa odio quasi quibusdam optio pariatur suscipit cumque enim cum placeat quas vitae sed ullam fugiat!</li>
    <li>Deleniti, iusto, officia, sunt optio reiciendis error nihil sit amet dolorem debitis perferendis vel quia hic minus obcaecati ducimus consequatur aliquid sapiente at nam dolorum ipsum harum impedit vero tempora!</li>
    <li>Dicta earum aspernatur praesentium accusantium nam. Ipsam, ducimus corporis reiciendis laudantium iste consequatur debitis error tempora labore in. Fugit, quos eaque deserunt cupiditate et beatae provident ipsa expedita vel nam.</li>
</ul>

可以到ul>lorem*5和ul>li*5>lorem展开后的代码是一样的。

Emmet官网：http://emmet.io/

Emmet缩写集合：http://docs.emmet.io/cheat-sheet/ 

Emmet缩写设置-配置文件：http://docs.emmet.io/customization/snippets/