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>
Summary
[開發工具] Emmet 實戰教學
Article Name
[開發工具] Emmet 實戰教學
Description
*Emmet* 是一個可以大幅提升你在開發網頁 Html 編碼速度,使用上也相當的容易,也支援很多主流的編輯器,如 : atom、sublime
Author

Facebook 功能: