前言
你是否还在因为写太长的结构而烦恼,是否还在因为复制粘贴的枯燥而无聊,是否因为自己写HTML的代码效率太低而低落
别慌,看完这篇emmet的教学,保证你写HTML的效率翻倍增长
需要安装emmet插件
例子
虽然实际项目中不一定会出现如此长的情况,但是,其实,这么长的结构,只需要一句话就能解决,在编辑器上输入下面这段语句最后按下 tab 键即可
div>div3>ul2>li*6
来解析下什么意思
- 第一个div代表的是最外层的div
- 第一个 “>” 代表的是其包裹的元素
- 第二个div代表的是其外层div所包裹的内层div
- " *3 "表示被包裹的div有三个
- 下面的解释和上述类似
这里涉及到的是
“>” :表示下一级
" * " :表示个数
如下代码也可一句生成
<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]
解释
- div后的 “#” 后面跟的是id名
- “ . ”后面跟的是class名
- a标签后的“[]” 方括号内为属性名和属性值
- a标签的“[]” 方括号内的href属性为“#”
- 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~几
例如
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
" [] " :里面设置标签的属性
" $ " :快速生产顺序数字