Emmet插件使用
Emmet插件使用
标签（空格分隔）： php 前端
1.生成html5文档
html5:5
!
2.header部分
<!--生成head中的utf8字符集-->
meta:utf
结果:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--生成head中的视窗-->
meta:vp
结果:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--生成head中的兼容性IE语句-->
meta:compat
结果:
<meta http-equiv="X-UA-Compatible" content="IE=7">
<!--生成head中的外部css文件链接-->
link:css
结果:
<link rel="stylesheet" href="style.css">
<!--生成head中的外部js链接-->
script:src
结果:
<script src=""></script>
3.body部分
<!--生成带class的标签-->
p.info
结果:
<p class="info"></p>
<!--生成带id的标签-->
p#info
结果:
<p id="info"></p>
<!--生成带url的a标签-->
a:link
结果:
<a href="http://"></a>
<!--生成带邮箱地址的a标签-->
a:mail
结果:
<a href="mailto:"></a>
<!--生成当前标签的后代标签-->
div>p
结果:
<div>
<p></p>
</div>
<!--生成当前标签的父级标签的同级元素-->
div>p^div
结果:
<div>
<p></p>
</div>
<div></div>
<!--生成标签内文本-->
p{此处为文本标签内容。}
结果:
<p>此处为文本标签内容。</p>
<!--生成标签的属性-->
img[alt="图像"]
结果:
<img src="" alt="图像">
<!--重复生成多个标签-->
ul>li*5
结果:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--标签内容排序:$和@-->
<!--只对单标签有用-->
<!--1位数:从1开始排序-->
ul>li*5>span{内容$}
结果:
<ul>
<li><span>内容1</span></li>
<li><span>内容2</span></li>
<li><span>内容3</span></li>
<li><span>内容4</span></li>
<li><span>内容5</span></li>
</ul>
<!--2位数:从01开始排序-->
ul>li*5>span{内容$$}
结果:
<ul>
<li><span>内容01</span></li>
<li><span>内容02</span></li>
<li><span>内容03</span></li>
<li><span>内容04</span></li>
<li><span>内容05</span></li>
</ul>
<!--3位数:从001开始排序-->
ul>li*5>span{内容$$$}
结果:
<ul>
<li><span>内容001</span></li>
<li><span>内容002</span></li>
<li><span>内容003</span></li>
<li><span>内容004</span></li>
<li><span>内容005</span></li>
</ul>
<!--标签内容倒序排列-->
ul>li*5>span{内容$@-}
结果:
<ul>
<li><span>内容5</span></li>
<li><span>内容4</span></li>
<li><span>内容3</span></li>
<li><span>内容2</span></li>
<li><span>内容1</span></li>
</ul>
<!--指定顺序排列-->
ul>li*5>span{内容$@4}
结果:
<ul>
<li><span>内容4</span></li>
<li><span>内容5</span></li>
<li><span>内容6</span></li>
<li><span>内容7</span></li>
<li><span>内容8</span></li>
</ul>
