编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

Emmet(zencoding)插件语法及常用简写

作者:Benjamin——全端攻城师  发布日期:2013-12-09 22:10:07
  • 收藏本文    我要投稿
  • 一、Emmet支持的简写规则:
    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的上级元素。
    二、Emmet连写(E*N)和自动编号(E$*N)
    li*3>a
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    div#item$.class$$*3
    <div id="item1" class="class01"></div>
    <div id="item2" class="class02"></div>
    <div id="item3" class="class03"></div>
    div#item$.class$*3
    <div id="item1" class="class1"></div>
    <div id="item2" class="class2"></div>
    <div id="item3" class="class3"></div>
    三、常用简写操作
    a)header+main+footer:
    <header></header>
    <main></main>
    <footer></footer>
    b)table[width=100%][cellpadding=0][cellspacing=0][border=0](thead>tr>th*5)(tbody>tr*2>td*5)
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    	<thead>
    		<tr>
    			<th></th>
    			<th></th>
    			<th></th>
    			<th></th>
    			<th></th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    	</tbody>
    </table>
    c)nav>ul>(li>a[href=#]{Link$})*5
    <nav>
    	<ul>
    		<li><a href="#">Link</a></li>
    		<li><a href="#">Link</a></li>
    		<li><a href="#">Link</a></li>
    		<li><a href="#">Link</a></li>
    		<li><a href="#">Link</a></li>
    	</ul>
    </nav>
    d)nav>ul>(li>a[href=#]{Link$$})*5
    <nav>
    	<ul>
    		<li><a href="#">Link01</a></li>
    		<li><a href="#">Link02</a></li>
    		<li><a href="#">Link03</a></li>
    		<li><a href="#">Link04</a></li>
    		<li><a href="#">Link05</a></li>
    	</ul>
    </nav>
    e)nav>ul>(li>a[href=#]{Link$})*5
    <nav>
    	<ul>
    		<li><a href="#">Link1</a></li>
    		<li><a href="#">Link2</a></li>
    		<li><a href="#">Link3</a></li>
    		<li><a href="#">Link4</a></li>
    		<li><a href="#">Link5</a></li>
    	</ul>
    </nav>
    f)html:5
    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    </html>
    g)div.layout>div.layout_t+(div.layout_c>div.layout_c_l+div.layout_c_r)+div.layout_b
    <div class="layout">
    	<div class="layout_t"></div>
    	<div class="layout_c">
    		<div class="layout_c_l"></div>
    		<div class="layout_c_r"></div>
    	</div>
    	<div class="layout_b"></div>
    </div>
    h)@0 从0开始:(input[type=radio][value=$@0][name=radio_time][id=radio_time_$@]+label[for=radio_time_$@0])*3
    <input type="radio" value="0" name="radio_time" id="radio_time_0">
    <label for="radio_time_0"></label>
    <input type="radio" value="1" name="radio_time" id="radio_time_1">
    <label for="radio_time_1"></label>
    <input type="radio" value="2" name="radio_time" id="radio_time_2">
    <label for="radio_time_2"></label>
    


Tag标签:Emmet  zencoding  插件  
  • 专题推荐