Zenn
🐕

EMMET

2024/07/04に公開
emmet
tech

EMMET

什麼是 EMMET ?

Emmet（以前名為 Zen Coding）是一套面向文字編輯器的外掛程式，它允許通過內容輔助高速度地編寫和編輯 HTML、XML、XSL和其他結構化的代碼格式1. 這個工具的語法受到 CSS 選擇器的啟發，讓你可以使用簡短的縮寫，然後迅速擴展成完整的 HTML 或 CSS 結構2. 想像一下，只需輸入幾個字符，就能轉化成完整的 HTML 標記或 CSS 規則，Emmet 帶來的魔法讓網頁開發更快、更高效2。你可以在市面上多款編輯器中使用 Emmet，例如 Notepad++、Sublime Text、VSCode 等。
by Copilot

每日任務的答案

h1{標題}+
p{Lorem ipsum dolor sit!}+
img[src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="logo"]+
(h2{副標題}+ul>li*3{$})+
h2{副標題}+
p{Lorem ipsum dolor sit!};

因為太長了不好閱讀我有做斷行，正常來說是不可以斷行的。

h1{標題}

在寫 EMMET 的時候可以就直接加入內容。
第二行的 p 段落也是一樣的。

<h1>標題</h1>

img[]

我不確定是不是有其他方式可以更方便貼上圖片連結，不過暫時這樣是可以的。

<img src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="logo">

ul>li*3{$}

$ 可以生成連續的數字，用在列表很方便，例：item$ 。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

Discussion