HTML代码简写方法

 HTML代码写起来很费事，因为它的标签多。

一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。

常用的简写法，目前主要是Emmet和Haml两种，本文只介绍Emmet。

在Dreamweaver软件中键入简写代码然后按tab即可生成完整代码。

Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）：

    1. E 代表HTML标签。
　　2. E#id 代表id属性。
　　3. E.class 代表class属性。
　　4. E[attr=foo] 代表某一个特定属性。
　　5. E{foo} 代表标签包含的内容是foo。
　　6. E>N 代表N是E的子元素。
　　7. E+N 代表N是E的同级元素。
　　8. E^N 代表N是E的上级元素。
　　

 请看下面的例子。

　　p
　　
　　p#main.item
　　
　　a[href=http://wikipedia.org]{维基百科}
　　
　　div>p
　　
　　div+p
　　
　　p>span^div

对应的HTML代码为：

<p></p>
　　
　　<p id="main" class="item"></p>
　　
　　<a href="http://wikipedia.org">维基百科</a>
　　
　　<div>
　　　　<p></p>
　　</div>
　　
　　<div></div>
　　<p></p>
　　
　　<p><span></span></p>
　　<div></div>

Emmet还提供了连写（E*N）和自动编号（E$*N）功能。

li*3>a
　　
　　div#item$.class$$*3
　　

 对应的HTML代码为

<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　
　　<div id="item1" class="class01"></div>
　　<div id="item2" class="class02"></div>
　　<div id="item3" class="class03"></div>