你写HTML还这么慢吗？学会emmet，保证你敲代码效率提高一倍，看完赶紧跟朋友推荐吧

前言

你是否还在因为写太长的结构而烦恼，是否还在因为复制粘贴的枯燥而无聊，是否因为自己写HTML的代码效率太低而低落

别慌，看完这篇emmet的教学，保证你写HTML的效率翻倍增长

需要安装emmet插件

例子

虽然实际项目中不一定会出现如此长的情况，但是，其实，这么长的结构，只需要一句话就能解决，在编辑器上输入下面这段语句最后按下 tab 键即可

div>div3>ul2>li*6

来解析下什么意思

1. 第一个div代表的是最外层的div
2. 第一个 “>” 代表的是其包裹的元素
3. 第二个div代表的是其外层div所包裹的内层div
4. " *3 "表示被包裹的div有三个
5. 下面的解释和上述类似

这里涉及到的是

“>” :表示下一级
" * " :表示个数

如下代码也可一句生成

<div id="img-wraper" class="wraper">
    <a href="#">
        <img src="../images/01.jpg" alt="">
    </a>
</div>

div#img-wraper.wraper>a[href=#]>img[src=…/images/01.jpg]

解释

1. div后的 “#” 后面跟的是id名
2. “ . ”后面跟的是class名
3. a标签后的“[]” 方括号内为属性名和属性值
4. a标签的“[]” 方括号内的href属性为“#”
5. img标签的 src属性为 …/images/01.jpg

这里涉及到的是

“#” :后面跟标签的id
" . " :后面跟标签的class
" [] " :里面设置标签的属性

其中标签可以设置多个，属性也能设置多个

div.class1.class2[width=200px height=100px]
生成如下代码

<div class="class1 class2" width="200px" height="100px"></div>

欲快速生成下面的代码

<div class="wraper">
    <p class="text-1"></p>
    <p class="text-2"></p>
    <p class="text-3"></p>
    <p class="text-4"></p>
    <p class="text-5"></p>
</div>

可用以下的语句

div.warper>p.text-$*5

想要p标签的class值的名字 从 text-1 到 text-5

解释

1. $前的保持不动
2. $后标签个数是多少，给予的值就为1~几

例如

div>img[src=…/images/pic_0$]*5

可以快速生成如下

<div>
    <img src="../images/pic_01" alt="">
    <img src="../images/pic_02" alt="">
    <img src="../images/pic_03" alt="">
    <img src="../images/pic_04" alt="">
    <img src="../images/pic_05" alt="">
</div>

总结

“>” :表示下一级
" * " :表示个数
“#” :后面跟标签的id
" . " :后面跟标签的class
" [] " :里面设置标签的属性
" $ " :快速生产顺序数字