Emmet(Zen Coding)语法规则简介
———Emmet(Zen Coding)语法规则简介———
【Zen Coding可谓快速开发HTML和CSS的利器，主要采用仿css类选择器方式编写代码，以下是该利器的基本语法规则和代码示例】
基础符号简介：
1."#"表示id,"."表示类,"+"表示并列
2.">"指子内容
3."()"指同级范围
4."[]"表示属性
5.#和.的简写：div.ok等于.ok;div#no等于#no
6."*"表示标签克隆
7."{}"表示标签内容
8."$"表示连续数
代码示例：
【Zencoding代码】
html>head>(title+style+script[src=abc$.js]*3+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+bottom)+.main>.acticle*3>h1{文章标题$}+p).footer{版权信息})
【展开后页面代码】
1 <html> 2 <head> 3 <title></title> 4 <style></style> 5 <script src="abc1.js"></script> 6 <script src="abc2.js"></script> 7 <script src="abc3.js"></script> 8 <body> 9 <div class="footer">版权信息 10 <div class="content"> 11 <div class="nav"> 12 <ul> 13 <li><a href=""><span></span></a></li> 14 <li><a href=""><span></span></a></li> 15 <li><a href=""><span></span></a></li> 16 <li><a href=""><span></span></a></li> 17 <li><a href=""><span></span></a></li> 18 </ul> 19 </div> 20 </div> 21 <div class="sidebar"> 22 <div class="top"></div> 23 <div class="middle"></div> 24 <bottom></bottom> 25 </div> 26 <div class="main"> 27 <div class="acticle"> 28 <h1>文章标题1</h1> 29 <p></p> 30 </div> 31 <div class="acticle"> 32 <h1>文章标题2</h1> 33 <p></p> 34 </div> 35 <div class="acticle"> 36 <h1>文章标题3</h1> 37 <p></p> 38 </div> 39 </div> 40 </div> 41 </body> 42 </head> 43 </html>
