emmet的详细使用方法

ememt的详细使用方法和如何快速使用方法

emmet简介

随着时代的发展，到达了21世纪的今天，Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，而且作为一款插件能够大部分的代码编辑器，文章后面列出了支持的代码编辑器类型。现代的代码以高效和快速的业绩为代表，各大网络公司也是费劲全力提升编程的效率，你是否也在为效率而感到担忧那。

由此而由zen coding的后代emmet诞生了，emmet极大的提高的html结构框架的搭建和css的代码编程效率，下面让我们一起来学习这个可以极大提高html结构框架搭建和css的代码编程的插件----emmet。

快速编写html代码

每个命令的结束都需要按下tab键来生成代码框架和css样式属性。每个命令输完后按下Tab键即可快速得到代码

新建一个有emmet插件文件，输入“！”或 “html：5”就可以生成基本框架。

基本语法

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

命令：nav>ul>li

nav>ul>li 按下tab

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

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

命令：div+p+bq 得到代码如下：

div+p+bq 按下tab

    <div></div>
    <p></p>
    <blockquote></blockquote>

3、生成上级元素：^ 表示^{后面的元素与}前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级

命令：div+div>p>span+em^bq 得到代码如下：

div+div>p>span+em^bq  按下tab


        <div></div>
        <div>
            <p><span></span><em></em></p>
            <blockquote></blockquote>
        </div>

命令：div+div>p>span+em^^input 得到代码如下：

div+div>p>span+em^^input


        <div></div>
        <div>
            <p><span></span><em></em></p>
        </div>
        <input type="text">
        

4.生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在

• 中输入.item，就会生成<li class=“item”》 《/li》

命令：.item得到代码如下：

.item   按下tab

 <div class="item"></div>

可以生成多个class值

命令：.item.war 得到打码如下

.item.war 按下tab

<div claass="item war"></div>

5、生成ID：#

命令：#container 得到代码如下：

<div id="container"></div>

6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

命令：(.foo>h1)+(.bar>h2) 得到代码如下：

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

7、重复生成多份：* *号后面是想重复生成的份数

命令：ul>li*5 得到代码如下：

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

8、对生成内容依次编号：$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5 得到代码如下：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

同样，我们也可以使用 @N 指定开始的序号

命令：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>

三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

下面只列出一些常用的快速编辑方式

命令：link

<link rel="stylesheet" href="" />

命令：script:src

<script src=""></script>

命令：img

<img src="" alt="" />

命令：inp

<input type="text" name="" id="" />

命令：input:p

<input type="password" name="" id="">

命令：btn 结果：

<button></button>

命令：btn：s 结果：<button type="submit"></button>

命令：btn：r 结果：<button type="reset"></button>

CSS中缩写

单位：

p 表示%
e 表示 em
r表示 rem
宽度：

命令：w100 结果：width:100px; 默认单位px

命令：w100p 结果：width:100%;

高度：

命令：h100r 结果：height: 100rem;

颜色：

命令：c#3 结果： color: #333;

命令：c#e0 结果： color: #e0e0e0;

命令：c#fc0 结果： color: #ffcc00;

CSS3前缀：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
命令：-wmso-transform

结果：

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

属性模糊匹配：

如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

所以在平时使用的时候可留意emmet的提示

命令：h10p+m5e 结果：height: 10%;margin: 5em;

到此结束