2021-05-12 14:32:11
Emmet：HTML/CSS程式碼快速編寫神器
2020-06-16 17:43:34
Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該外掛一定不會陌生。它使用仿CSS選擇器的語法來生成程式碼，大大提高了HTML/CSS程式碼編寫的速度，比如下面的演示：
Zen coding下的編碼演示
去年年底，該外掛已經改名為Emmet。但Emmet不只改名，還帶來了一些新特性。本文就來直觀地演示給你。
一、快速編寫HTML程式碼
1. 初始化
HTML文件需要包含一些固定的標籤，比如<html>、<head>、<body>等，現在你只需要1秒鐘就可以輸入這些標籤。比如輸入“!”或“html:5”，然後按Tab鍵：
- html:5 或!：用於HTML5文件型別
- html:xt：用於XHTML過渡文件型別
- html:4s：用於HTML4嚴格文件型別
2. 輕鬆新增類、id、文字和屬性
連續輸入元素名稱和ID，Emmet會自動為你補全，比如輸入p#foo：
連續輸入類和id，比如p.bar#foo，會自動生成：
<p class="bar" id="foo"></p>
下面來看看如何定義HTML元素的內容和屬性。你可以通過輸入h1{foo}和a[href=#]，就可以自動生成如下程式碼：
<h1>foo</h1>
<a href="#"></a>
3. 巢狀
現在你只需要1行程式碼就可以實現標籤的巢狀。
- >：子元素符號，表示巢狀的元素
- +：同級標籤符號
- ^：可以使該符號前的標籤提升一行
效果如下圖所示：
4. 分組
你可以通過巢狀和括號來快速生成一些程式碼塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下程式碼：
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
5. 隱式標籤
宣告一個帶類的標籤，只需輸入div.item，就會生成<div class="item"></div>。
在過去版本中，可以省略掉div，即輸入.item即可生成<div class="item"></div>。現在如果只輸入.item，則Emmet會根據父標籤進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。
下面是所有的隱式標籤名稱：
- li：用於ul和ol中
- tr：用於table、tbody、thead和tfoot中
- td：用於tr中
- option：用於select和optgroup中
6. 定義多個元素
要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下程式碼：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7. 定義多個帶屬性的元素
如果輸入 ul>li.item$*3，將會生成如下程式碼：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2016-04/130234p2.htm
相關文章