ZWH ZONE

[開發工具] Emmet 實戰教學

zhiwei. huang -

Emmet 是一個可以大幅提升你在開發網頁 Html 編碼速度，使用上也相當的容易，也支援很多主流的編輯器，如 : atom、sublime

如圖片所示 :

在幫你的編輯器安裝完 Emmet 時，只要使用 tab 鍵 或是 ctrl+e 就可以直接將 Emmet 的編碼，轉換成 Html 的編碼

使用上相當的容易，下面個別說明：

文檔初始化：

html:5 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

元素生成：

符號 說明
# id
. class
[] 元素屬性
{} 元素內容

Exemple :

Emmet :

a#link1.link-item[href="http://skyroxas.tw/"]{link}

Html :

<a href="http://skyroxas.tw/" id="link1" class="link-item">link</a>

層級：

符號 說明
> 子階層
^ 母階層
+ 同層級

Example :

Emmet :

<!--子層級-->
ul>li{item}

<!--父層級-->
ul>li{item}^.block

<!--同層級-->
ul>li{item}+li{item}

Html :

<!--子層級-->
<ul>
  <li>item</li>
</ul>

<!--父層級-->
<ul>
  <li>item</li>
</ul>
<div class="block"></div>

<!--同層級-->
<ul>
  <li>item</li>
  <li>item</li>
</ul>

運算 ：

符號 說明
（） 分組
* 乘法
+ 同層級
$ 數字遞增：”$“ 表示從 ”1“ 開始遞增，“$$” 表示從 ”01“ 開始遞增，以此類推
$@- 數字遞減：”$“ 表示從 ”X“ 開始遞減，“$$” 表示從 ”XX“ 開始遞減，以此類推
${數字} 從指定數字開始遞增 example: $2 (從 2 開始遞增) , $$2 (從 02 開始遞增)

Example :

Emmet :

<!-- 01 開始遞增 -->
div>ul>(li>a{文本$$})*2

<!-- 3 開始遞減 -->
div>ul>(li>a{文本$@-})*3

<!-- 2 開始遞增 -->
div>ul>(li>a{文本$@2})*5

Html :

<!-- 01 開始遞增 -->
<div>
  <ul>
    <li><a href="">文本01</a></li>
    <li><a href="">文本02</a></li>
  </ul>
</div>

<!-- 3 開始遞減 -->
<div>
  <ul>
    <li><a href="">文本3</a></li>
    <li><a href="">文本2</a></li>
    <li><a href="">文本1</a></li>
  </ul>
</div>

<!-- 2 開始遞增 -->
<div>
  <ul>
    <li><a href="">文本2</a></li>
    <li><a href="">文本3</a></li>
    <li><a href="">文本4</a></li>
    <li><a href="">文本5</a></li>
    <li><a href="">文本6</a></li>
  </ul>
</div>

Facebook 功能：