Zen Coding – 快速生成HTML與CSS的好幫手

Zen Coding是一款支援多種文字編輯軟體的外掛,可以讓HTML開發人員快速生成HTML和CSS

例如我今天想要產生一組id為test的ul清單,並包含3個li標籤,每個元素裡面要放一個span標籤且該span標籤的class都是test2

那麼可以在裝好Zen Coding的文字編輯器輸入

按下tab鍵之後就會自動產生這樣的HTML代碼

非常簡單吧!這種開發好處是可以節省大量的HTML撰寫時間,不過對於習慣自己撰寫HTML的開發人員來說會需要一段適應期,從想到就寫變成想好再寫,不過當習慣之後就會有一種回不去的感覺了XD

至於CSS產生我就沒有特別研究了,因為我大部分時間都在Visual Studio 2013中開發,對於CSS的auto complete支援非常完整,Zen Coding相對就不是那麼重要了。

Zen Coding的語法其實非常簡單,只是基本HTML思維加一點轉換而已,相關語法可以參考以下網頁:

Zen Coding官網: https://code.google.com/p/zen-coding/

基本語法說明(非常清楚易懂): http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

Zen Coding Cheat Sheet: https://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

文章分類

全部展開 | 全部收合