工欲善其事必先利其器（二）

 

写在前面的话：目前我已使用过的前端编辑软件有DW.HBuilder和sublime。总结来讲，DW对于对表格和表单不太熟练的同窗来讲，使用比较方便，更适合初学者；HBuilder算是比较完美的了，对于前端这一块来讲，有一个很好的功能是：能够把项目中的已使用过的内容提示出来，这样有一点比较好，避免命名重复的类或者id。缺点是：启动速度比较慢，不过一直在更新，并且是国产的，不用安装各类插件，对中国人比较友好；Sublime开启速度比较快，可是要安装一堆的插件，也没有像HBuilder那样强大的提示功能。总的来讲，这三个各有千秋，看使用者爱好喽。

说了那么多废话，下面进入正题：

Emmet  语法：

1.后代： >
缩写： nav>ul>li

<nav>
	<ul>
		<li></li>
	</ul>
</nav>

2.兄弟： +
缩写：div+p+a

<div></div>
<p></p>
<span></span>

3.上级： ^
缩写：div+div>p>span+em^strong

<div></div>
<div>
	<p><span></span><em></em></p>
	<strong></strong>
</div>

缩写：div+div>p>span+em^^strong

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<strong></strong>

4.分组：()

缩写：div>(header>ul>li*2>a)+footer>p

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

缩写：(div>dl>(dt+dd)*3)+footer>p

<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
</footer>

5.乘法：*

缩写：ul>li*5

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

6.自增符号：$

默认是递增，@-是递减，@3是从3开始递增

缩写：ul>li.item$*3

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
</ul>

缩写：h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

缩写：ul>li.item$$$*5

<ul>
	<li class="item001"></li>
	<li class="item002"></li>
	<li class="item003"></li>
</ul>

缩写：ul>li.item$@-*5

<ul>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>

缩写：ul>li.item$@3*5

<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

7.ID和类属性

缩写：form#search.wide

<form action="" id="search" class="wide"></form>

缩写：p.class1.class2.class3

<p class="class1 class2 class3"></p>

8.自定义属性

缩写：p[title="Hello world"]

<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写：[a='value1' b="value2"]

<div a="vale1" b="value2"></div>

9.文本

缩写：p>{Click }+a{here}+{ to continue}

<p>Click<a href="">here</a>to continue</p>

10.隐式标签

缩写：.class

<div class="class"></div>

缩写：em>.class

<em><span class="class"></span></em>

缩写：ul>.class

<ul>
	<li class="class"></li>
</ul>

缩写：table>.row>.col

<table>
	<tr class="row">
		<td class="col"></td>
	</tr>
</table>