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

 

寫在前面的話：目前我已使用過的前端編輯軟件有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>