Emmet插件使用

Emmet插件使用

标签（空格分隔）： php 前端

---

目录

• Emmet插件使用
  • 1.生成html5文档
  • 2.header部分
  • 3.body部分

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>