对Emmet的简单了解
Emmet是一款插件,
可以方便HTML或CSS编程,
此处仅总结了在HTML中的用法:
只要能安装它的编辑器都能使用,
大部分编辑器都可以使用该语法规则,
笔者亲测DW中可用,以下结果均为在DW中实践所得:
更多语法及Emmet的安装可见此页面:
https://code.z01.com/Emmet/index.html
注意:按tab键时,光标需要在最后
- 新建.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>