emmet前端插件的使用技巧

写这个花了两个晚上，第一个晚上弄html也就是第一部分内容，第二个晚上弄css并检查这个文章内容信息
写着写着就创建了一个新的名词叫“流浪跳”

第1部分：HTML创建

首先创建，格式一定要是.html或者.htm的文件

一、创建HTML文档结构

目标：学习如何创建html的文档结构

HTML5文档类型的创建

• 方式一：通过键入英文的感叹号，之后使用Tab按键来创建
  

• 方式二：通过键入html:5，之后使用Tab按键来创建
  

XHHTML过渡文档类型

• 通过键入html:xt，之后使用Tab按键来创建
  

HTML4严格文档类型

• 通过键入html:4s，之后使用Tab按键来创建
  

二、生成class,id,文本和属性

目标：学习如何创建含有class或id或文本或属性的标签

创建含有class的标签

• 目标标签内容如下：

<div class="header"></p>

• 操作示范
  创建的语法： 标签名称.class选择器名称
  

创建含有id的标签

• 目标标签内容如下：

<div id="banner"></div>

• 操作示范
  创建的语法： 标签名称#id选择器名称
  

创建含有文本的标签

• 目标标签内容如下

<div>你好,我叫emmet</div>

• 操作示范
  创建的语法： 标签名称{标签的文本内容}
  

创建含有属性的标签

• 目标标签内容如下

<div style="margin: 0;padding: 0;" data-key="en"></div>

• 操作示范
  创建一个属性的语法： 标签名称[attr=value]
  
  创建多个属性的语法： 标签名称[attr1=“key1:value1; key2:value2;…” attr2=“key1:value1” attr3=“key1:value1; key2:value2;…” …]，html标签中如果有多个属性请使用空格进行区分，单独一个属性的引号不要丢掉，要不然就和其他的属性混合在一起了
  

混合使用class,id,文本,属性

• 目标标签内容如下

<a name="mytest" hidefocus="true" title="进到百度搜索" href="https://www.baidu.com" style="color: red;text-decoration: none" target="_blank" id="mytest" class="mytest">跳转</a>

• 操作示范
  注意：文本还是要放到最后来写
  生成演示规则如下：

a#mytest.mytest[name="mytest" target="_blank" href="https://www.baidu.com" title="进到百度搜索" hidefocus="true" style="color: red;text-decoration: none;"]{跳转}

三、生成节点标签（子级，同级，上级）

目标：学习如何创建有层次结构的标签

创建子级标签

• 目标标签内容如下

<div>
    <h1>今日看点</h1>
</div>

• 操作示范
  创建的语法： 父级标签名称>子级标签名称
  

创建同级标签

• 目标标签内容如下

<div></div>
<h1></h1>
<p></p>

• 操作示范
  创建的语法： 父级标签名称+子级标签名称
  需要注意，多个加号连接的时候会先把最后面的一个标签创建出来，我们可以撤销这步操作重新再使用tab试第二次就会出来了
  

创建上级标签

子级一级一级的往上跳

说明：如果按照正常的思维，比如说div标签包含了p标签，p标签里包含了span标签，但是span标签现在不归于p标签了，它直属于div标签管理，那么这样一来就是div标签里有p、span两个标签。

• 原目标标签内容如下

<!-- 生成的规则:div>p>span -->
<div>
    <p>
        <span></span>
    </p>
</div>
<!-- 现在`span`要往上跳，那么此时的span就和p标签变成同级了 -->
<div>
    <p></p>
    <span></span>
</div>

创建的语法： 父级标签名称>^子级标签名称

• 操作示范
  

直接跟跳到父级并排（或者叫跳跳再跳跳，或者叫流浪跳）

注：实在不好命名，流浪跳感觉还是比较适合，你无法知道它究竟要跳多少，或者不跳，完全的诠释了上面那个跳一级的，算是加深这个上级标签的它所代表的含义吧

• 原目标标签内容如下

<!-- 生成的规则:div>p>span>p>h1 -->
<div>
    <p>
        <span>
            <p>
                <h1></h1>
            </p>
        </span>
    </p>
</div>
<!-- 现在`h1`要往上跳到div同级下 -->
<div>
    <p>
        <span>
            <p>
                <h1></h1>
            </p>
        </span>
    </p>
</div>

创建的语法： 父级标签名称>^（备注：要跳几次这里就加几个^）子级标签名称

分析：h1要跳几次才能和div同级？？？
看下面的结构：

次数	h1的位置
第0次	h1不动，原地
第1次	h1跳到和p同级
第2次	h1跳到和span同级
第3次	h1跳到和p同级
第4次	h1跳到和div同级

<div>    4
    <p>        3
        <span>      2
            <p>          1
                <h1></h1>   0
            </p>
        </span>
    </p>
</div>

• 操作示范
  

四、其他情况标签生成

目标：学习如何创建更富有层次感结构的标签，或者说减轻重复标签的创建

生成重复标签

• 目标标签内容如下

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

• 操作示范
  创建的语法： 标签名称*重复次数
  

生成结构层次

• 目标标签内容如下

<div class="container">
    <div class="header">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

• 操作示范
  生成演示规则如下：

div.container>div.header(div*3)+div.content(div.left+div.content+div.right)+div.footer>div*3

这里可能有点小意外，就是为什么突然出现小括号这样的形式，其实你只要把括号内容当成一个整体就行了，是起始括号前标签下的所有归属内容，后面再谈到这样的写法，先把这个写法进行消化一下

生成内容编号

id跟class写法

• 目标标签内容如下

<div id="myid1"></div>
<div id="myid2"></div>
<div id="myid3"></div>
<div id="myid4"></div>

• 操作示范
  创建的语法： 标签名称（属性是id、class）$*重复次数
  

自定义的属性操作方法

• 目标标签内容如下

<div name="aa1"></div>
<div name="aa2"></div>
<div name="aa3"></div>
<div name="aa4"></div>

• 操作示范
  规则示例： div[name="aa$"]*4
  

加深对符号$的使用

解释$的使用：有多少个数字就加多少个$。

• 目标标签内容如下

<div id="myid00001"></div>
<div id="myid00002"></div>
<div id="myid00003"></div>
<div id="myid00004"></div>

• 操作示范
  规则示例： div#myid$$$$$*4
  

指定编号的起始范围（递增）

• 目标标签内容如下

<div id="myid19"></div>
<div id="myid20"></div>
<div id="myid21"></div>
<div id="myid22"></div>

• 操作示范
  创建的语法： $@起始范围*重复次数
  规则示例：div#myid$@19*4
  

指定编号的结束范围（递减）

• 目标标签内容如下

<div id="myid88"></div>
<div id="myid87"></div>
<div id="myid86"></div>
<div id="myid85"></div>

• 操作示范
  创建的语法： $@-结尾值*计数次数，起始值就是：结尾值+计数次数-1
  规则示例：div#myid$@-85*4，该规则对应的起始值就是：85+4-1=88
  

生成测试文本

• 说明
  Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过emmet插件，你只需输入lorem或lipsum即可生成这些文字。还可以指定文字的个数，比如lorem4，将生成如图下的效果：
  

• 如果不指定个数会怎么样？
  

生成隐式标签

需要注意这个做法，在列表和表格这两种标签，使用class,id,属性，可以创建子标签，如图中所示，先创建一个ul，其次是创建类名为id的，插件自动加上li或tr标签；（可以使用的时候第一次不是li，需要撤销重新tab，可以查看上面提到“创建同级标签”也出现这样的问题，解决就是撤销再tab就可以了）

其他的也可以自己尝试，看看会自动创建什么标签，比如下面演示p标签会创建一个span标签

关于小括号这种形式的写法说明

个人对小括号的理解：

为什么会有小括号这样的写法，可以看生成结构层次的那个生成规则里内容，里面用到了小括号写法，借用那一节的话来简述这个用法：
个人理解就是起始括号前的标签是母亲，括号里面都是这个母亲的孩子

• 回顾前面的子级标签的写法
  先回顾一下子级标签的写法父级标签名称>子级标签名称，其实这个也可以写成：父级标签名称(子级标签名称)。

• 目标标签内容如下

<div>
    <h1>我叫标题1</h1>
</div>

• 操作示范
  生成的规则：div>h1{我叫标题1} 可以等同于 div(h1{我叫标题1})
  看下面的操作：
  

新的提问

上面的都是创建一个子级标签，我们增加一些难度，比如说多个标签，不同的标签类型有列表、有链接、有段落、有标题、有图片这样的

<div>
    <ul>
        <li><a href=""></a></li>
    </ul>
    <p>
        <h1></h1>
    </p>
    <a href=""><img src="" alt=""></a>
</div>

先来想想上面这样的规则该怎么创建吧，目前想到的规则如下：
div>ul>li>a+p>h1+a>img
我们试着将这个规则实践下：

实践的结果：
失败，没能达到效果

那么由此可见，我们通过流浪跳写法来改善一下上面的规则：

原规则：
div>ul>li>a+p>h1+a>img

改之后的规则：
div>ul>li>a^^+p>h1^+a>img（流浪跳方式）

需要注意^和加号的顺序，一定要是加号在^后面，要不然就出现下面这样情况：

看到这，应该会厌恶流浪跳吧，太烦人了，于是蹦出来一个小括号解决上面那个什么鬼的情况：
通过小括号进一步改进上面的写法：（推荐这种）

div>(ul>li>a)+(p>h1)+(a>img)

先对比下上面的写法，看到么，这就是差距

• 操作示范
  

用一句话总结这个小括号，括号的内容都是一个整体

五、生成案例效仿

目标：开始标签的实例练习

创建含有不同文本的连续标签

• 目标标签内容如下

<div>Lorem ipsum dolor sit.</div>
<div>Vero corrupti non odit!</div>
<div>Autem, omnis reiciendis minima.</div>
<div>Possimus, soluta expedita ad!</div>

• 操作示范
  生成的规则：div*4(lorem4)或者div*4(lipsum4)
  

创建含有相同文本的连续标签

• 目标标签内容如下

<div>测试文本</div>
<div>测试文本</div>
<div>测试文本</div>
<div>测试文本</div>

• 操作示范
  生成的规则：div{测试文本}*4 或者 (div>{测试文本})*4
  

创建多个相同文本到某个标签下

<div>
    <span>|span的大家族|span的大家族|span的大家族|span的大家族</span>
</div>

• 操作示范
  生成的规则：div>span({|span的大家族}*4)
  

第2部分：CSS创建

一、css起始

目标：css创建起步

引用css

直接link标签再按tab就可以了，没啥好说的

style创建

跟link差不多，都是标签那部分讲到过的内容，这后面的内容都基于内部样式进行示例说明

二、数值

百分比表示值

px，em，ex表示值

• px单位表示
  
• em单位表示
  
• ex单位表示
  

三、附加属性

• 说明
  一些其他的属性，比如 background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，生成的效果如图下所示：
  
  

• 比如：background的缩写
  

• 比如：border的缩写
  

四、模糊匹配

• 说明
  这个是针对与一些拿不准的缩写该如何表示或者标签记不住的时候，可以使用这个方式，插件会根据你的输入内容匹配最接近的语法，比如输入ov:h 、ov-h 、ovh 和 oh（输入的内容不一定要这些）。

• 比如：overflow:hidden;
  

• 比如：line-height
  

• 比如：font-family:fantasy;
  

• 比如：background-color
  

五、供应商前缀

• 说明
  供应商前缀的解释：当浏览器以实验或以标准的方式来实现功能时，为了能确保安全，避免兼容问题，浏览器往往使用带着规范属性名称的供应商特定前缀，例如：当CSS Apes模块提出了名为“gorilla”的新属性，Firefox和WebKit都在对这种新属性进性稍有差别的实验性的实现。可是，新属性在两个浏览器中产生的效果是不同的，所以，如果Firefox和WebKit都使用这个属性名称时，通常会在属性名称前加上供应商前缀以避免一些潜在的冲突：

如下示例：

-moz-gorilla:foo;
-webkit-gorilla:foo;

供应商特定前缀是一个做大的想法，但事实上，情况变得有些混乱，和其他方面问题一样，一些前缀的属性被HTML开发人员如此广泛地使用，以至于其他浏览器厂商也感觉有必要使用它们竞争对手的供应商前缀，这样做很公平，但却让这件事有此不好。
浏览器厂商正视图让这个系统处于他们的掌握之中，但有时，使用供应商前缀属性会难以避免，大多数情况下，都会使用无前缀属性。
供应商前缀分别代表的供应商

前缀	供应商
-webkit-	Google Chrome,Safari,Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer,Edge
-khtml-	Konqueror

如果输入非W3C标准的CSS属性，插件会自动加上供应商前缀，比如transofrm属性，那么可以输入trf，则会生成如图下所示：

指定供应商前缀

• 介绍供应商前缀缩写

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-

• 示例
  

六、渐变

由于渐变本人不怎么用，无法给大家说明，看图吧：

参考内容

http://www.iteye.com/news/27580
http://www.cnblogs.com/engeng/articles/5955167.html

安装和使用Emmet插件
http://www.w3cplus.com/tools/emmet-cheat-sheet.html

Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。
Emmet官方的下载地址http://emmet.io/download/