trance

紙上得來終覺淺,絕知此事要躬行.

zen coding 插件使用實踐

前一陣子接觸了sublime text 和 zen coding 插件，感覺這兩個東西對前端效率的提高太有用了。

非常符合我對效率的要求～

看著網(wǎng)上的各種教程和說明自己也實踐了一把。記錄一下心得體會：

介紹和安裝方法：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

gitHub: https://code.google.com/p/zen-coding/downloads/list

zen coding 適用技巧：http://www.gbin1.com/technology/html/20130117-tips-for-emmet/

我用的DW CS6 安裝 zen coding 插件之后

第一行代碼：

div#header>ul.nav>li*4

輸入之后 ctrl+, 注意了：如果不能成功展開如下代碼，基本上可以斷定是輸入法快捷鍵沖突，為此卸掉了搜狗輸入法換了谷歌就OK了

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

第二行代碼：嘗試給 ul 增加同級元素 h1

div#header>h1+ul.nav>li*4

ctrl+, 展開得到：

<div id="header">
	<h1></h1>
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

　第三行代碼：給li 增加自增的類名 item-1 item-2 ....

　div#header>h1+ul.nav>li.item-$*4

　ctrl+, 展開得到：

<div id="header">
	<h1></h1>
	<ul class="nav">
		<li class="item-1"></li>
		<li class="item-2"></li>
		<li class="item-3"></li>
		<li class="item-4"></li>
	</ul>
</div>

第四行代碼給 H1 中增加 img 并同時規(guī)定 img 的 src title alt 等屬性

div#header>(h1>a[href=#nogo]>img[src=logo.jpg][title=sitelogo][alt=logo])+(ul.nav>li.item-${nav item$$}*4)　

ctrl+, 展開得到：　這里面初次使用了 () 分組非常簡單易懂好用 . 同時用 [] 給元素標(biāo)志屬性并且賦值（注意：屬性取值中間不要有空格否則會生成新的屬性）

<div id="header">
	<h1><a href="#nogo"><img src="logo.jpg" alt="logo" title="sitelogo"></a></h1>
	<ul class="nav">
		<li class="item-1">nav item01</li>
		<li class="item-2">nav item02</li>
		<li class="item-3">nav item03</li>
		<li class="item-4">nav item04</li>
	</ul>
</div>

第五行代碼：給元素添加初始內(nèi)容順便補(bǔ)充上最常用的空連接

div#header>(h1>a[href=#nogo]>img[src=logo.jpg][title=site logo][alt=logo])+(ul.nav>li.item-${nav item$$}*4)　　

ctrl+, 展開得到：這里使用 {} 輸出元素內(nèi)部內(nèi)容，$仍然表示自增通配，$$兩個表示是兩位從 01 開始自增

<div id="header">
	<h1><a href="#nogo"><img src="logo.jpg" alt="logo" title="site" logo=""></a></h1>
	<ul class="nav">
		<li class="item-1">nav item01</li>
		<li class="item-2">nav item02</li>
		<li class="item-3">nav item03</li>
		<li class="item-4">nav item04</li>
	</ul>
</div>

第六行代碼：　初次使用轉(zhuǎn)碼符 e　
script[type=text/javascript][deffer=true][scr=/script/jQuery.js]|e
對非 XML 安全的字符進(jìn)行轉(zhuǎn)碼，如： <、 > 和 &。

(更多轉(zhuǎn)碼過濾見 http://www.rzrgm.cn/matchless/archive/2013/04/15/3018573.html)

ctrl+, 展開得到：

&lt;script type="text/javascript" deffer="true" scr="/script/jQuery.js"&gt;&lt;/script&gt;

第七行代碼：使用注釋轉(zhuǎn)碼 |c 方便的生成注釋

div.desp>dl>(dt>img[src=img.jpg][alt=picture])+(dd>p{Introduction$}*3)|c

ctrl+, 展開得到：

<!-- .desp -->
<div class="desp">
	<dl>
		<dt><img src="img.jpg" alt="picture"></dt>
		<dd>
			<p>Introduction1</p>
			<p>Introduction2</p>
			<p>Introduction3</p>
		</dd>
	</dl>
</div>
<!-- /.desp -->

是不是既簡單又強(qiáng)大？只用二十分鐘就可以更高效率的編寫HTML 結(jié)構(gòu)代碼了。　　

posted on 2013-04-15 15:17 trance 閱讀(364) 評論(0) 收藏舉報

刷新頁面返回頂部

trance

zen coding 插件使用實踐

導(dǎo)航

公告