Emment插件
Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.
Emment的基本用法
创建初始文档
只要输入!或html:5,然后点击tab键,你就会看到一个HTML5的doctype默认标签
- html:5或!:HTML5文档类型
- html:xt:XHTML过渡型文档类型
- html:xs:XHTML严格型文档类型
- html:4t:HTML4过渡型文档类型
- html:4s:HTML4严格型文档类型
子元素>
使用>运算符可以用来生成彼此嵌套的元素:
section>div>p
上面的代码会生成下面的代码:
<section>
<div>
<p></p>
</div>
</section>
相邻元素+
使用+运算符可以用来生成彼此相邻的元素:
section+div+p
上面代码会生成下面的代码:
<section></section>
<div></div>
<p></p>
乘法*
ul>li*5
上面代码会生成5个li:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
除了能一次性生成多个相同的标签之外,我们还可以通过$符号做递增;通过$@-符号做递减;
ul>li.i$*5生成以下内容:
<ul>
<li class="item item-1"></li>
<li class="item item-2"></li>
<li class="item item-3"></li>
<li class="item item-4"></li>
<li class="item item-5"></li>
</ul>
ul>li.i$@-*5生成以下内容:
<ul>
<li class="item item-5"></li>
<li class="item item-4"></li>
<li class="item item-3"></li>
<li class="item item-2"></li>
<li class="item item-1"></li>
</ul>
ul>li.i$@-3*5生成以下内容:
<ul>
<li class="item item-7"></li>
<li class="item item-6"></li>
<li class="item item-5"></li>
<li class="item item-4"></li>
<li class="item item-3"></li>
</ul>
更多用法请从下图中查询