Zen Coding 簡易快速的HTML編寫_HTML/Xhtml_網頁製作

Zen Coding 是個文字編輯器的插件。在使用Zen Coding的文字編輯器中，可以用簡短的程式碼來書寫常規的HTML程式碼，這個工具極大的簡化了HTML編寫。

例如以下HTML代碼：

複製代碼

代碼如下:

• li>
  

透過Zen Coding，一行即可：

複製程式碼

程式碼如下:

程式碼如下:

html:xtdiv> header>div#logo ul#nav>li.item-$*5>a
這裡是在線DEMO（快捷鍵不起作用的，請檢查可能的狗輸入快捷鍵衝突。如搜尋法會佔用「Ctrl ,」）

Zen Coding的縮寫規則有些類似CSS選擇器：

• id和class：如 div#main.list.item 表示的是
• 其他屬性可以這樣：div[title], a[title="Hello world" rel], td[colspan=2]
• 重複元素：li*3將輸出3個
• 重複元素數字序號：li.list-$$*2將會擴展成
• 。多個$放在一起的時候，前面的$將作為0來填補位數。
• 可以用括號來分組：div#page>(div#header>ul#nav>li*4>a) (div#page>(h1>span) p*2) div#footer
• Filters支持，使用不同的參數，將會得到完全不同的結果

其他主要功能

預設的除了HTML/XML/XSL/CSS/XML/XSL/

/HAML縮寫外，Zen Coding 也提供了其他一些方便程式碼寫的功能

。

簡寫包裹





(Wrap with Abbreviation)。

根據遊標的位置或文字選擇情況，輸入代碼簡寫後得到想要的最終代碼。

複製程式碼

程式碼如下: You walk into the room your pencil in your hand

You see somebody naked

And you say, Who is that man? You try so hard But you don't understand Just 🎜>But you don't understand Just say 🎜>When you get home Because something is happening here But you don't know what it is Do you, Mister Jones? 以上文字用「 li*>span」包裹後會得到下面的程式碼： 複製程式碼程式碼如下:

• 你走進房間


• 手裡拿著鉛筆 li>
  
• 你看到有人裸體


• 你說，那個男人是誰？


• 你很努力


• 但是你不懂


• 如你所說的


• 當你回到家時


• 因為這裡發生了一些事情


• 但你不知道它是什麼


• 你是嗎，瓊斯先生？

標籤匹配（餘額標籤）

ZC（Zen Coding）提供了一個快速選擇所有內容中元素的方法

編輯點（編點）

由ZC擴充的程式碼是沒有內容的，此功能則可以快速的定位到內容編輯點處

最後

常見的IDE如Ecliplse/Aptana,Notepad,TextMage,Dreamweaver,UltraEdit,Visual Studio等，都已經有官方或第三方的插件支援。實際上由於Zen Coding的核心程式碼有Javascript和Python兩種語言版本，在引入了對應的JS檔案後，瀏覽器中的文字編輯區域都可以使用Zen Coding了。