網頁製作久了就會發現，手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題，「Bootstrap」可以縮短網頁版面設計的時間，那麼 HTML/CSS 的輸入，有沒有快速便利的工具呢？「Emmet」(前身為 Zen Coding)就是為此而開發的工具，只要有一點點 CSS 選擇器的概念、基礎，就可以很快上手。它除了可以幫助我們輸入的作業，很重要的一點是，這樣的工具也可以降低手誤、打錯字的機率。
本篇會以強大的編輯軟體 Sublime Text 作為使用環境，引導讀者如何快速學會 Emmet 語法，縮短輸入 HTML/CSS 的時間。
一、Sublime Text 安裝 Emmet
- 如果是剛接觸 Sublime Text 的新手，請按照這篇「Sublime Text 3 新手上路」，把 Sublime Text 裝起來。
- 安裝 Emmet 的詳細步驟，請參考這篇的「安裝 Emmet 說明」。
如果熟悉 Sublime Text 的話，以上內容可不看，按以下步驟即可：
- 按 Ctrl + Shift + P
- 輸入 install
- 輸入 emmet 安裝即可
二、Emmet 上手技巧
Emmet 所有的語法都在這裡：
但初學者直接看這張全英文的速查表(cheat sheet)，可能只會對這個工具更懼怕，因此建議將來再使用。
一開始可先看這篇，瞭解基本的概念：
簡單來說，Emmet 的使用方式可以看成這樣：
- 輸入 HTML 元素名稱，配合 CSS 選擇器規則
- 全部輸入完之後，按
Tab 鍵，就會自動產生 HTML 碼
例如輸入以下簡碼：
div#container>p.title+div.body>span.snippet+img[src="wfublog.jpg"]按下
<div id="container">
<p class="title"></p>
<div class="body">
<span class="snippet"></span>
<img src="wfublog.jpg" alt="">
</div>
</div>因此只要熟悉 CSS，就能無痛學會 Emmet 初階技巧。
三、Emmet 進階技巧
請參考這篇「Emmet 语法速查表」，初階的內容就略過，摘要一些重要的縮寫技巧，詳細內容請參閱該篇文章：
1. 省略 HTML 標籤名稱
- div 可以省略
- 特定標籤的子元素可省略，例如 table、ul、select
例如：
#WFU>table>.row>.body可自動產生 div, tr, td 等標籤：
<div id="WFU">
<table>
<tr class="row">
<td class="body"></td>
</tr>
</table>
</div>2. 括號
例如：
#WFU>ul>(li>a)*3可以自動產生 3 組 li 標籤(含 a)：
<div id="WFU">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>3. 續編功能
例如：
ul>.wfu$*3可以產生以下：
<ul>
<li class="wfu1"></li>
<li class="wfu2"></li>
<li class="wfu3"></li>
</ul>想要補零位數的話，要補幾個位數，就重複 $ 幾次，例如：
ul>.wfu$$*3可以產生以下：
<ul>
<li class="wfu01"></li>
<li class="wfu02"></li>
<li class="wfu03"></li>
</ul>4. 續編功能指定起始數
前面的續編功能，如果不想從 1 開始，例如從 5 開始編：
ul>li.wfu$@5*3可以產生以下：
<ul>
<li class="wfu5"></li>
<li class="wfu6"></li>
<li class="wfu7"></li>
</ul>四、CSS 縮寫
關於 CSS 縮寫這部分，雖然有規則可循，不過還是很吃記憶力，建議自行參考以下網頁：
1. 簡單、常見的 CSS 縮寫介紹，可先看「Emmet 语法速查表」→「CSS 编写」這裡的內容。
2.「官方速查表」列出了詳細的 CSS 縮寫一覽，要很有耐心才能看得下去。
五、高階技巧
1. 高階技巧摘要
這篇「Emmet的高級功能與使用技巧」提供了比較少見、實用的使用技巧：
- 使用 lorem 指令，可產生各種假內容、假標題，暫時填充版面的空間。
- 按下熱鍵 Shift + Ctrl+ G，可為某個 HTML 元素，產生母元素內容，而且要包幾層都可以。這有點像是密技，因為一般的 Emmet 操作無法做到這件事。
上面這個密技還值得列出一個範例，如果客戶給了我們 3 個導覽列的項目名稱例如：
首頁
網站導覽
關於我們將以上文字全部選取，按下熱鍵 Shift + Ctrl+ G，輸入以下母元素內容：
ul.wfu_nav>li.items$*>a就會立刻產生以下導覽列 HTML 碼：
<ul class="wfu_nav">
<li class="items1"><a href="">首頁</a></li>
<li class="items2"><a href="">網站導覽</a></li>
<li class="items3"><a href="">關於我們</a></li>
</ul>我只能說：Emmet 真是太神奇了！！
其他更多高階技巧請參考該篇文章。
2. 自訂快捷語法
這個使用方式有點像是某些輸入法的 "詞庫" 功能，例如設定輸入字串 "add" 後，會自動產生建立的詞庫內容 "台北市松山區...." 這樣的完整住址字串。
請參考這篇「自訂Emmet常用的網頁標籤語法並快速輸出」，在 Sublime Text 的 Emmet 系統設定之中，可以設定所有自訂的程式碼片段(snippet)內容，也就是快捷語法。
假設我常常需要輸入以下 WFU BLOG 的網址連結語法：
<a href="http://www.wfublog.com" target="_blank">WFU BLOG</a>那麼我就可以設定一個快捷字串，例如 "wfu"，完成所有設定後，將來只要輸入 "wfu" 並按下
3. CSS 命名問題
網頁寫久了，會發現常常要花很多時間想 class 命名、怎麼避免重複字串。
這篇「emmet的css书写与命名技巧」提出的概念滿有意思的，如果我們的 class 命名都能保持一致性，符合一定的模式，那麼只要先命名好母元素的 class 名稱，利用 emmet 的快速鍵將可以快速、自動產生所有子元素的 class 名稱。
由於我的 class 命名技巧還在磨練中，那麼對這個主題有興趣的讀者，可以試試看能否將這個構想實作出來。
六、官網教學
除了本篇提到的這些 Emmet 相關教學網頁，其實官網也提供了滿詳細的教學文件，還有影音說明、線上實地操作等功能，如果覺得英文程度可以挑戰看看的話，不妨參考這些頁面：
- 教學總覽：https://docs.emmet.io/
- CSS 教學：https://docs.emmet.io/css-abbreviations/
- 快速鍵教學：https://docs.emmet.io/actions/
更多網頁開發工具：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。