Emmet 語法

發表於 分類於

📄 Emmet 語法筆記

Emmet 簡介

Emmet 是一套能快速編寫 HTML 和 CSS 的工具，透過縮寫語法來提高開發效率。

HTML 快速語法

標籤

縮寫 展開結果
div <div></div>
ul>li*3 <ul><li></li><li></li><li></li></ul>
table>tr*2>td*3 產生 2 行 3 列的表格

屬性與 ID、Class

縮寫 展開結果
div#main <div id="main"></div>
div.box <div class="box"></div>
div#content.wrapper <div id="content" class="wrapper"></div>

內容填充

縮寫 展開結果
p>{Hello World} <p>Hello World</p>
a[href=#]{Click me} <a href="#">Click me</a>
img[src=logo.png alt=Logo] <img src="logo.png" alt="Logo">

CSS 快速語法

基本屬性

縮寫 展開結果
m10 margin: 10px;
p20 padding: 20px;
w100 width: 100px;
h50p height: 50%;

顏色

縮寫 展開結果
c#f00 color: #f00;
bgc#ccc background-color: #ccc;
bd1px_solid_black border: 1px solid black;

進階用法

  • 基本 HTML5 架構：輸入 ! 然後按下 Tab 鍵，會生成基本的 HTML5 結構。
  • 添加 Class：輸入 div.classname，會生成 <div class="classname"></div>。
  • 子元素：使用 > 表示子元素，例如 ul>li 會生成：
    1
    2
    3
    <ul>
        <li></li>
    </ul>
  • 同級元素：使用 + 表示同級元素，例如 h1+p 會生成：
    1
    2
    <h1></h1>
    <p></p>
  • 重複元素：使用 * 表示重複元素，例如 li*3 會生成：
    1
    2
    3
    <li></li>
    <li></li>
    <li></li>
  • 群組與嵌套：使用 () 來群組，例如 div>(header>h1)+footer>p 會生成：
    1
    2
    3
    4
    5
    6
    7
    8
    <div>
        <header>
            <h1></h1>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>
  • 文本內容：使用 {} 來添加文本內容，例如 a{Click me} 會生成：
    1
    <a href="">Click me</a>
  • 編號：使用 $ 來表示編號，例如 ul>li.item$*3 會生成：
    1
    2
    3
    4
    5
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>
  • 屬性：使用 [] 來添加屬性，例如 input[type="text" name="username"] 會生成：
    1
    <input type="text" name="username">

透過熟練掌握 Emmet 語法，您可以顯著提高 Web 開發的效率，減少重複性工作，專注於核心部分。

📌 更多 Emmet 語法請參考 官方文件！