Emmet,快速编辑HTML【学习记录】

对Emmet的简单了解

Emmet是一款插件，
可以方便HTML或CSS编程，
此处仅总结了在HTML中的用法：

只要能安装它的编辑器都能使用，
大部分编辑器都可以使用该语法规则,
笔者亲测DW中可用，以下结果均为在DW中实践所得：

更多语法及Emmet的安装可见此页面：
https://code.z01.com/Emmet/index.html

注意：按tab键时，光标需要在最后

1. 新建.html文件 然后输入! 或者 !html:5 按下Tab键 Q左边的按键：
   
   结果：
   

html:5   与上面的！同理

2.生成多层标签：使用>连接：

div>a>input

结果：

<div><a href=""><input type="text"></a></div>

3.同层标签使用+连接：

div>div>a+input+p

结果：

        <div>
			<div>
				<a href=""></a>
				<input type="text">
				<p></p>
			</div>
		</div>

4.多个重复标签：使用*

div*3

结果：

        <div></div>
		<div></div>
		<div></div>

5.两种创建多层重复标签的方法：
（1）在开始重复出使用使用*

div>div>a*3>div

结果

		<div>
			<div>
				<a href="">
					<div></div>
				</a>
				<a href="">
					<div></div>
				</a>
				<a href="">
					<div></div>
				</a>
			</div>
		</div>

（2）加（）在末尾使用*

div>div>(a>div)*3

结果：

		<div>
			<div>
				<a href="">
					<div></div>
				</a>
				<a href="">
					<div></div>
				</a>
				<a href="">
					<div></div>
				</a>
			</div>
		</div>

6.具体内容：

div>p{我是p}>a{我是a}

结果：

 <div>
 	<p>我是p<a href="">我是a</a></p>
 </div>

7.多种顺序，使用$
（1）div{$}*2

<div>1</div>
<div>2</div>

（2）div{我是div$}*2

<div>我是div1</div>
<div>我是div2</div>

（3）div{我是div$$}*12

<div>我是div01</div>
<div>我是div02</div>
<div>我是div03</div>
<div>我是div04</div>
<div>我是div05</div>
<div>我是div06</div>
<div>我是div07</div>
<div>我是div08</div>
<div>我是div09</div>
<div>我是div10</div>
<div>我是div11</div>
<div>我是div12</div>

注意：div{我是div$}*12：

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
<div>我是div6</div>
<div>我是div7</div>
<div>我是div8</div>
<div>我是div9</div>
<div>我是div10</div>
<div>我是div11</div>
<div>我是div12</div>

（4）从某个数开始，用@：div{我是div$$@3}*2

<div>我是div03</div>
<div>我是div04</div>

8.添加id或class,仿照css,使用#或.
（1）以id为例:

结果：

<div id="aaa"></div>

注意：这里的生成id或class，是专门指生成一个具有该属性的div，并且如果只打#，就会生成一个没有具体id名的div：

（2）其余标签添加属性，例如：div>a.id

<div><a href="" class="id"></a></div>

9.添加多个属性，使用[]

a[href=# id=btn class=bg]

结果：

<a href="#" id="btn" class="bg"></a>

10.上级节点：使用^
（1）上一级

div>ul>li^div

结果：

<div>
	<ul>
		<li></li>
	</ul>
	<div></div>
</div>

（2）上两级（其余同理）

div>ul>li^^div

结果：

<div>
	<ul>
		<li></li>
	</ul>
</div>
<div></div>

多注意（）、+、>使用先后对对具体代码含义所造成的影响，比如div>(ul>li>a)*2+(a>a)+div>p+div*2的结果是：

<div>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<a href=""><a href=""></a></a>
	<div>
		<p></p>
		<div></div>
		<div></div>
	</div>
</div>

而div>(ul>li>a)*2+a>a+div>p+div*2的结果是：

<div>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<a href="">
		<a href=""></a>
		<div>
			<p></p>
			<div></div>
			<div></div>
		</div></a>
</div>