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{版权信息})
 
【展开后页面代码】
 <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>
上一篇:【刷题】HDU 1853 Cyclic Tour


下一篇:Rewrite规则简介