Emmet(Zen Coding)语法规则简介

时间：2021-08-24 04:35:22

———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{版权信息})
 
【展开后页面代码】
 <html>

 <head>

     <title></title>

     <style></style>

     <script src="abc1.js"></script>

     <script src="abc2.js"></script>

     <script src="abc3.js"></script>

     <body>

         <div class="footer">版权信息

             <div class="content">

                 <div class="nav">

                     <ul>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                         <li><a href=""><span></span></a></li>

                     </ul>

                 </div>

             </div>

             <div class="sidebar">

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

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

                 <bottom></bottom>

             </div>

             <div class="main">

                 <div class="acticle">

                     <h1>文章标题1</h1>

                     <p></p>

                 </div>

                 <div class="acticle">

                     <h1>文章标题2</h1>

                     <p></p>

                 </div>

                 <div class="acticle">

                     <h1>文章标题3</h1>

                     <p></p>

                 </div>

             </div>

         </div>

     </body>

 </head>

 </html>

相关文章