ZenCoding 語法簡介 - Visual Studio 2013 Ultimate

by vivid 15. 一月 2014 12:19

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N140114402
出刊日期:2014/1/15
開發工具:Visual Studio 2013 Ultimate
版本:.NET Framework 4.5.1

在Visual Studio 2012或Visual Studio 2013開發工具中,加裝Web Essentials 2012(Visual Studio 2012)或Web Essentials 2013(Visual Studio 2013),可以讓開發工具新增許多設計網頁HTML、CSS樣式或撰寫JavaScript的輔助功能,實在是網頁開發人的一大福音。在這一篇文章之中,我將介紹內建在Web Essentials 2013中Zen Coding的語法。

安裝Web Essentials 2013

雖然Visual Studio 2013已經提供HTML的程式碼片斷(Code Snippet)功能,已經可以讓我們加快撰寫HTML標籤的速度,但是加裝了Web Essentials 2013之後,ZenCoding語法讓撰寫HTML的標籤,更有如神助,快的不得了。

在Visual Studio 2013中要使用Web Essentials 2013,可以開啟Visual Studio 2013開發工具,從「Tools」-「Extensions and Updates」,開啟「Extensions and Updates」對話盒,然後選取左方「Online」項目,在右上方的文字方塊中輸入一些查詢關鍵字,找尋到Web Essentials 2013,然後點選「Download」按鈕下載並進行安裝。

clip_image002

圖 1:下載並安裝Web Essentials 2013。

ZenCoding語法

一般在撰寫HTML標籤時,除了要手動輸入開頭、結尾的標籤之外,有時還要處理巢狀式的標籤結構,常常搞的暈頭轉向。Zen Coding是一個幫助快速撰寫HTML標籤的方式,能使用CSS選取器的語法,描述HTML 元素的所在位置,可以更有效率地建立HTML網頁所需的標籤與HTML Attribute。ZenCoding語法主要分為:

Attribute 運算子

  • # 運算子:建立 id attribute。
  • . 運算子:建立 class attribute。
  • [ ] 運算子:建立自訂attribute。

Element運算子

  •  > 運算子:建立子項目。
  • + 運算子:建立兄弟項目。
  • ^ 運算子:上移階層,一個^代表一層;二個^代表二層…。

其它

  • * 運算子:乘,建立相同項目多次。
  • $運算子 :產生連續數字。
  • $$ 運算子:產生連續數字,兩位數前面補0。
  • { }運算子:建立文字。
  • ()運算子:群組。
  • lorem運算子:產生亂數假文。

以下分別說明這些運算子的語法。

Attribute運算子

Attribute 運算子用來修改HTML Element的屬性(Attribute),像是設定id、name、class…等等。

# 運算子

「#」 運算子用來建立id attribute。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

 

div#result

產生出的HTML標籤如下:

 

<div id="result"></div>

在輸入Zen Coding語法時,不要隨意加入空白或換行符號,這樣Zen Coding引擎會無法正確地運作,例如輸入以下標籤內含一個空白,再按下鍵盤「Tab」鍵,Zen Coding引擎無法識別語法,因此不會產生任何標籤:

 

div #result
 

. 運算子

「. 」運算子用來建立 class attribute,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

 

div#result.green

產生出的HTML標籤如下,div標籤自動套用class attribute:

<div id="result" class="green"></div>

[ ] 運算子

「[ ]」 運算子用來為特定的HTML項目建立自訂attribute,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=page]

產生出的HTML標籤如下,div標籤自動加上data-role attribute:

<div data-role="page"></div>

你可以在[]號中,使用空白當區隔,一次加入多個自訂attribute,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=header data-position=fixed]

產生出的HTML標籤如下:

<div data-role="header" data-position="fixed"></div>

自訂attribute可以使用雙引號或單引號包起來,例如輸入以下標籤:

div[data-role="header" data-position="fixed"]

或輸入以下標籤:

div[data-role='header' data-position='fixed']

不管值使用單引號或雙引號包起來,產生出的HTML標籤都相同,如下:

<div data-role="header" data-position="fixed"></div>

另外,你不一定要輸入自訂Attribute的值,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role data-position]

產生出的HTML標籤如下,Visual Studio還會自動將游標停留在data-role等號之後的雙引號之中:

<div data-role="" data-position=""></div>

Element運算子

接下來我們來看看常用的Element運算子。

> 運算子

> 運算子用來建立子項目。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div>div

產生出的HTML標籤如下:

<div>
        <div></div>
</div>

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div>ul>li

產生出的HTML標籤如下:

<div>
    <ul>
        <li></li>
    </ul>
</div>

我們可以組合之前介紹的Attribute運算子,撰寫出更複雜的範例,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=page]>div[data-role=header]>h1

產生出的HTML標籤如下:

<div data-role="page">
        <div data-role="header">
            <h1></h1>
        </div>
</div>

 

+ 運算子

「+」運算子用來建立和某一項目相臨,並位於同一層的兄弟項目。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div+div+div

產生出的HTML標籤如下:

<div></div>
<div></div>
<div></div>

同樣地可以組合之前介紹的Attribute運算子,撰寫出更複雜的範例,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=header data-position=fixed]>h1{jquery}+h1{mobile}

產生出的HTML標籤如下:

<div data-role="header" data-position="fixed">
        <h1>jquery</h1>
        <h1>mobile</h1>
</div>

 

^運算子

「^」運算子用來描述要上移多少個階層,一個「^」號代表上移一層;二個「^代表上移二層…,依此類推。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div>ul>li^ul>li

產生出的HTML標籤如下:

<div>
        <ul>
            <li></li>
        </ul>
        <ul>
            <li></li>
        </ul>
</div>

 

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div>ul>li^^ul>li

產生出的HTML標籤如下:

<div>
    <ul>
        <li></li>
    </ul>
</div>
<ul>
    <li></li>
</ul>

來點複雜的語法,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=page]>div[data-role=header]>h1{jquery}^div[data-role=content]

產生出的HTML標籤如下:

<div data-role="page">
     <div data-role="header">
         <h1>jquery</h1>
     </div>
     <div data-role="content"></div>
</div>

來點更複雜的語法,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=page id=page1]>div[data-role=header]>h1{jquery}^^div[data-role=page id=page2]

產生出的HTML標籤如下:

 

<div data-role="page" id="page1">
        <div data-role="header">
            <h1>jquery</h1>
        </div>
</div>
<div data-role="page" id="page2"> </div>

 

其它運算子

接下來我們再來看看如何重複產生相同的標籤、加上流水號、產生文字內容、以及語法分組等等功疼。

* 運算子

「*」 運算子可以建立相同項目多次。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div*3

產生出的HTML標籤如下,連續產生三組div標籤:

<div></div>

<div></div>

<div></div>

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>a[href=#]

產生出的HTML標籤如下:

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

 

$ 」運算子

「*」運算子可以重複產生標籤,搭配「$」運算子可以產生連續數字,為重複產生的標籤加上流水號碼。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li#id$*5

產生出的HTML標籤如下:

 

<ul>
    <li id="id1"></li>
    <li id="id2"></li>
    <li id="id3"></li>
    <li id="id4"></li>
    <li id="id5"></li>
</ul>

我們可以再試試更複雜的語法,搭配「{}」運算子產生文字,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>{Item$}

產生出的HTML標籤如下:

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>

前置0

使用「$」運算子產生流水號時,可以在數字前方前置0,使用「$$」運算子產生連續的2位數字前面補0;使用「$$$」運算子產生連續的3位數字前面補0,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>{Item$$}

產生出的HTML標籤如下:

<ul>
        <li>Item01</li>
        <li>Item02</li>
        <li>Item03</li>
        <li>Item04</li>
        <li>Item05</li>
</ul>

 

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>{Item$$$}

產生出的HTML標籤如下:

<ul>
    <li>Item001</li>
    <li>Item002</li>
    <li>Item003</li>
    <li>Item004</li>
    <li>Item005</li>
</ul>

那麼可以輸入多少的「$」號呢?筆者試著輸入30個「$」,也是可以正確產生需要的標籤:

ul>li*5>{Item$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$}

產生出的HTML標籤如下:

<ul>
    <li>Item000000000000000000000000000001</li>
    <li>Item000000000000000000000000000002</li>
    <li>Item000000000000000000000000000003</li>
    <li>Item000000000000000000000000000004</li>
    <li>Item000000000000000000000000000005</li>
</ul>

 

這樣應該很夠用了。

{ }運算子

{ }運算子用來產生文字內容。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div{Hello World}

產生出的HTML標籤如下:

<div>Hello World</div>

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

a[href=http://edu.uuu.com.tw]{Go to UUU}

產生出的HTML標籤如下:

<a href="http://edu.uuu.com.tw">Go to UUU</a>

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

div[data-role=page]>div[data-role=header data-position=fixed]>h1>{jQuery Mobile}

產生出的HTML標籤如下:

<div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>jQuery Mobile</h1>
        </div>
    </div>

 

 

「( )」運算子

「( )」運算子可以將運算子分成不同群組,和我們學的數學一樣,群組中的內容優先順序較高,以產生更複雜的HTML標籤。例如沒有使用「( )」運算子設群組,輸入以下標籤,再按下鍵盤「Tab」鍵:

div>h1+div>p

產生出的HTML標籤如下:

<div>
        <h1></h1>
        <div>
            <p></p>
        </div>
</div>

 

使用「( )」運算子設群組,輸入以下標籤,再按下鍵盤「Tab」鍵:

(div>h1)+div>p

則產生出的HTML標籤如下:

<div>
        <h1></h1>
</div>
<div>
        <p></p>
</div>

 

「lorem」運算子

「lorem」運算子可以讓你產生亂數假文(Lorem Ipsum),以便讓產生出的HTML更貼近真實的網頁內容。如此用來測試網頁的排版就更方便了,不必再自行輸入一些測試的文字。例如輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>lorem

產生出的HTML標籤如下,li標籤中會自動填入一些句子:

<ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
        </li>
        <li>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
        </li>
        <li>Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
        </li>
        <li>Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
        </li>
        <li>Sem nulla eu ultricies orci praesent id augue nec lorem pretium congue sit amet ac nunc fusce iaculis lorem eu diam hendrerit at mattis purus dignissim vivamus mauris tellus, fringilla.
        </li>
    </ul>

我們可以指定假文中要出現幾個字,若要產生兩個字,可以輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>lorem2

產生出的HTML標籤如下:

<ul>
        <li>Lorem ipsum.
        </li>
        <li>Dolor sit.
        </li>
        <li>Amet, consectetur.
        </li>
        <li>Adipiscing elit.
        </li>
        <li>Fusce vel.
        </li>
    </ul>

 

同樣的道理,例如若要產生5個字的假文,可以輸入以下標籤,再按下鍵盤「Tab」鍵:

ul>li*5>lorem5

產生出的HTML標籤如下:

<ul>
    <li>Lorem ipsum dolor sit amet.
    </li>
    <li>Consectetur adipiscing elit fusce vel.
    </li>
    <li>Sapien elit in malesuada semper.
    </li>
    <li>Mi, id sollicitudin urna fermentum.
    </li>
    <li>Ut fusce varius nisl ac.
    </li>
</ul>

 

隱含式標籤名稱

Zen Coding還支援隱含式標籤名稱,讓輸入標籤的動作更為簡單,例如輸入以下標籤,再按下鍵盤「Tab」鍵:

#result

預設會產生div標籤,產生出的HTML標籤如下:

<div id="result"></div>

例如輸入以下標籤,再按下鍵盤「Tab」鍵:

.myclass

產生出的HTML標籤如下:

<div class="myclass"></div>

最後的挑戰

看完此篇文章之後,您是否已經躍躍欲試呢?想想看要怎麼利用Zen Coding語法來產生以下的jQuery Mobile的網頁吧?

<div id="Page1" data-role="page">
    <div data-role="header">
        <h1>jQuery Mobile</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
    <div data-role="footer">
        <h4>©Copyright 2012</h4>
    </div>
</div>

其中之一個解答如下,您答對了嗎?

div#Page1[data-role=page]>(div[data-role=header]>h1{jQuery Mobile})+(div[data-role=content]>ul[data-role=listview]>li{item$}*5)+div[data-role=footer]>h4{©Copyright 2012}

參考資料

  • · Web Essentials

http://vswebessentials.com/

  • · Visual Studio 2013 試用版下載

http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx

Tags:

.NET Magazine國際中文電子雜誌 | Visual Studio | HTML | 許薰尹Vivid Hsu

評論 (52) -

cours de theatre paris
cours de theatre paris United States
2017/9/30 下午 04:30:19 #

Major thankies for the blog. Want more.

回覆

can ho dic phoenix
can ho dic phoenix United States
2017/10/7 上午 01:19:11 #

I truly appreciate this blog post.

回覆

Osimi seaview
Osimi seaview United States
2017/10/9 下午 07:06:55 #

Wow, great blog post.Thanks Again. Great.

回覆

buy hacklink google
buy hacklink google United States
2017/10/12 下午 09:45:58 #

Very neat article post.Thanks Again. Cool.

回覆

see this site
see this site United States
2017/10/14 下午 05:01:48 #

Fantastic article post.Really thank you! Great.

回覆

dragon city hack apk download
dragon city hack apk download United States
2017/10/15 下午 04:32:37 #

Thanks for sharing, this is a fantastic article.

回覆

visit site
visit site United States
2017/10/17 下午 03:50:15 #

Great, thanks for sharing this article post.Really thank you! Much obliged.

回覆

VigRx Plus
VigRx Plus United States
2017/10/19 上午 08:26:35 #

Thanks again for the article post.Much thanks again. Really Cool.

回覆

visit their website
visit their website United States
2017/10/19 下午 07:27:54 #

Major thankies for the blog.Much thanks again. Cool.

回覆

Osimi Sea View
Osimi Sea View United States
2017/10/21 上午 04:45:30 #

Major thanks for the blog post. Want more.

回覆

carte grise en ligne
carte grise en ligne United States
2017/10/21 上午 08:24:51 #

I am so grateful for your post. Will read on...

回覆

DIC Phoenix
DIC Phoenix United States
2017/10/28 下午 01:33:40 #

I value the article post.Thanks Again. Keep writing.

回覆

EZ Battery Reconditioning Scam
EZ Battery Reconditioning Scam United States
2017/10/30 下午 12:28:31 #

Thank you ever so for you article.Really looking forward to read more. Cool.

回覆

mamaweeb
mamaweeb United States
2017/11/1 下午 12:44:20 #

I loved your blog.Really thank you! Much obliged.

回覆

phenocal review
phenocal review United States
2017/11/1 下午 08:19:46 #

Thanks so much for the article post.Thanks Again. Really Great.

回覆

spinal stenosis cures
spinal stenosis cures United States
2017/11/15 上午 07:51:06 #

Major thankies for the blog post.Thanks Again. Awesome.

回覆

avocat quebec
avocat quebec United States
2017/11/16 下午 06:26:52 #

I loved your post. Really Cool.

回覆

Major thankies for the blog post.Really looking forward to read more. Will read on...

回覆

find mobile number location and name
find mobile number location and name United States
2017/11/22 上午 03:06:27 #

Great post.Much thanks again. Want more.

回覆

fashion
fashion United States
2017/11/23 下午 09:55:02 #

I loved your blog article.Thanks Again. Will read on...

回覆

Website Developers Auckland
Website Developers Auckland United States
2017/11/25 下午 06:52:30 #

Great, thanks for sharing this blog.Really thank you!

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 06:02:09 #

I appreciate you sharing this blog.Really looking forward to read more.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/27 上午 12:07:26 #

Great, thanks for sharing this blog.Really looking forward to read more. Cool.

回覆

cash for cars
cash for cars United States
2017/11/29 下午 04:29:25 #

Really enjoyed this blog article.Much thanks again. Want more.

回覆

Calla Garden
Calla Garden United States
2017/11/29 下午 11:05:33 #

Thanks for the blog post. Really Cool.

回覆

small business loans
small business loans United States
2017/12/1 上午 12:54:38 #

Enjoyed every bit of your article post. Awesome.

回覆

porno
porno United States
2017/12/1 下午 04:35:21 #

I appreciate you sharing this article.Really looking forward to read more. Will read on...

回覆

commercial real estate loan
commercial real estate loan United States
2017/12/3 上午 04:53:39 #

I truly appreciate this article. Really Great.

回覆

moble porn
moble porn United States
2017/12/5 上午 09:40:39 #

Thanks so much for the article.Much thanks again. Really Cool.

回覆

Thanks-a-mundo for the blog.Really thank you! Keep writing.

回覆

visit
visit United States
2017/12/10 下午 07:17:41 #

Thanks for sharing, this is a fantastic article post.Thanks Again. Awesome.

回覆

Rodrick Seegmiller
Rodrick Seegmiller United States
2017/12/14 上午 09:24:58 #

I think this is a real great post. Cool.

回覆

find more
find more United States
2017/12/14 下午 04:16:32 #

Thank you ever so for you blog post.Really thank you! Cool.

回覆

Christmas Songs
Christmas Songs United States
2017/12/14 下午 10:48:13 #

wow, awesome article.Much thanks again. Really Great.

回覆

canon drivers
canon drivers United States
2017/12/16 下午 05:58:36 #

I value the article post.Really looking forward to read more. Really Great.

回覆

tips lose weight
tips lose weight United States
2017/12/17 上午 12:16:12 #

Thank you ever so for you post.Much thanks again. Want more.

回覆

M&amp;amp;A
M&amp;A United States
2017/12/17 下午 05:39:12 #

Great blog. Awesome.

回覆

buying a college degree
buying a college degree United States
2017/12/18 上午 12:42:28 #

Very good blog.Thanks Again. Cool.

回覆

make money
make money United States
2017/12/20 下午 06:52:00 #

Really informative blog post.Thanks Again. Keep writing.

回覆

driver canon
driver canon United States
2017/12/23 上午 05:26:17 #

Thanks so much for the blog article.Thanks Again.

回覆

Darwin Horan
Darwin Horan United States
2017/12/23 下午 03:54:29 #

Thank you ever so for you article post.Much thanks again. Great.

回覆

hp driver
hp driver United States
2017/12/25 下午 05:28:16 #

Really informative article post. Cool.

回覆

&#216;&#177;&#218;&#175;
رگ United States
2017/12/26 上午 12:13:30 #

Major thankies for the article post.Thanks Again. Fantastic.

回覆

Really enjoyed this blog article.Really looking forward to read more. Really Cool.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 01:48:48 #

Very neat blog post.Really thank you! Really Cool.

回覆

canon drivers
canon drivers United States
2017/12/27 下午 06:16:07 #

Very informative blog post.

回覆

hp drivers
hp drivers United States
2018/1/2 上午 08:58:16 #

I really enjoy the article post.Much thanks again. Fantastic.

回覆

more helpful hints
more helpful hints United States
2018/1/2 下午 04:59:31 #

Very good article.Really looking forward to read more. Much obliged.

回覆

I am so grateful for your article.Really looking forward to read more. Will read on...

回覆

printer drivers
printer drivers United States
2018/1/3 上午 08:20:11 #

Im thankful for the article. Will read on...

回覆

colocation miami
colocation miami United States
2018/1/10 下午 01:15:15 #

Appreciate you sharing, great blog post.Really looking forward to read more. Cool.

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List