Emmet 是一個非常方便的工具，可以讓你快速編寫 HTML。就像魔法一樣。Emmet 不是什麼新東西，已經存在多年，每個編輯器都有對應的插件。
- 從頭開始建立 HTML 檔案
- > 和 +
- 更高級
- 倍數
- 分組以便提高可讀性
id和class屬性- 添加獨特的 class 或 id
- 其他屬性
- 添加內容
- 在你的標記中添加遞增數字
- 標頭中標籤的參考
- 常用標籤的參考
- 語義化 HTML 標籤的參考
- 表單元素的參考
Emmet 是一個非常方便的工具，可以讓你快速編寫 HTML。
就像魔法一樣。
Emmet 不是什麼新東西，已經存在多年，每個編輯器都有對應的插件。在 VS Code 中，Emmet 是內建的功能，當編輯器識別到可能的 Emmet 命令時，會顯示提示信息。
如果你輸入的內容沒有其他解釋，且 VS Code 認為它可能是一個 Emmet 表達式，它會直接在提示信息中預覽該內容:
然而，直到我開始研究並撰寫關於 Emmet 的內容，我才真正知道如何充分利用它的細節。
我希望在我的日常工作中使用它，所以這是我學到的關於 Emmet 的內容。
從頭開始建立 HTML 檔案
輸入 !，將獲得一個基本的 HTML 範本來開始編寫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
和 +
>代表子級+代表同級
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
div+p+span
<div></div>
<p></p>
<span></span>
可以結合這兩個符號來完成更複雜的標記。當 Emmet 嵌套時，VS Code 非常友好地在表達式沒有預覽時顯示一個預覽：
ul>li>div+p+span
<ul>
<li>
<div></div>
<p></p>
<span></span>
</li>
</ul>
更高級
使用 ^，你可以在使用 > 創建子級後向上跳級：
ul>li>div+p^li>span
<ul>
<li>
<div></div>
<p></p>
</li>
<li><span></span></li>
</ul>
你可以多次使用它進行多次跳級：
ul>li>div+p^^p
<ul>
<li>
<div></div>
<p></p>
</li>
</ul>
<p></p>
倍數
通過使用 *，任何標籤都可以被重複添加：
ul>li\*5>p
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>
分組以便提高可讀性
使用乘法，事情開始變得複雜起來。如果你想要複製 2 個項目，可以將它們放在括號 ( ) 中進行分組：
ul>li>(p+span)\*2
<ul>
<li>
<p></p>
<span></span>
<p></p>
<span></span>
</li>
</ul>
id 和 class 屬性
在 HTML 中，id 和 class 可能是最常用的屬性。
你可以使用 CSS 類似的語法快速創建包含它們的 HTML 標籤：
ul>li>p.text#first
<ul>
<li>
<p class="text" id="first"></p>
</li>
</ul>
你可以添加多個 class：
ul>li>p.text.paragraph#first
<ul>
<li>
<p class="text paragraph" id="first"></p>
</li>
</ul>
添加獨特的 class 或 id
id 在你的頁面中必須是唯一的。
class 可以重複使用，但有時你希望對元素進行遞增編號。你可以使用 $ 來實現：
ul>li.item$\*2>p
<ul>
<li class="item1">
<p></p>
</li>
<li class="item2">
<p></p>
</li>
</ul>
其他屬性
除了 class 和 id 之外，其他屬性必須使用 [] 方括號添加：
ul>li.item$\*2>p[style="color: red"]
<ul>
<li class="item1">
<p style="color: red"></p>
</li>
<li class="item2">
<p style="color: red"></p>
</li>
</ul>
你也可以一次添加多個屬性：
ul>li.item$\*2>p[style="color: red" title="A color"]
<ul>
<li class="item1">
<p style="color: red" title="A color"></p>
</li>
<li class="item2">
<p style="color: red" title="A color"></p>
</li>
</ul>
添加內容
當然你也可以在 HTML 中添加內容：
ul>li.item$\*2>p{Text}
<ul>
<li class="item1">
<p>Text</p>
</li>
<li class="item2">
<p>Text</p>
</li>
</ul>
在你的標記中添加遞增數字
你可以在文本中添加遞增數字：
ul>li.item$\*2>p{Text $}
<ul>
<li class="item1">
<p>Text 1</p>
</li>
<li class="item2">
<p>Text 2</p>
</li>
</ul>
該數字通常從 1 開始，但你可以指定任意數字作為起始值：
ul>[[email protected]](/cdn-cgi/l/email-protection)\*2>p{Text [[email protected]](/cdn-cgi/l/email-protection)}
<ul>
<li class="item10">
<p>Text 3</p>
</li>
<li class="item11">
<p>Text 4</p>
</li>
</ul>
標頭中標籤的參考
| 縮寫 | 渲染的 HTML |
|---|---|
| link | <link rel="stylesheet" href="" /> |
| link:css | <link rel="stylesheet" href="style.css" /> |
| link:favicon | <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> |
| link:rss | <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" /> |
| meta:utf | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| meta:vp | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
| style | <style></style> |
| script | <script></script> |
| script:src | <script src=""></script> |
常用標籤的參考
| 縮寫 | 渲染的 HTML |
|---|---|
| img | <img src="" alt="" /> |
| a | <a href=""></a> |
| br | <br /> |
| hr | <hr /> |
| c | <!-- --> |
| tr+ | <tr><td></td></tr> |
| ol+ | <ol><li></li></ol> |
| ul+ | <ul><li></li></ul> |
語義化 HTML 標籤的參考
| 縮寫 | 渲染的 HTML |
|---|---|
| mn | <main></main> |
| sect | <section></section> |
| art | <article></article> |
| hdr | <header></header> |
| ftr | <footer></footer> |
| adr | <address></address> |
| str | <strong></strong> |
表單元素的參考
| 縮寫 | 渲染的 HTML |
|---|---|
| form | <form action=""></form> |
| form:get | <form action="" method="get"></form> |
| form:post | <form action="" method="post"></form> |
| label | <label for=""></label> |
| input | <input type="text" /> |
| inp | <input type="text" name="" id="" /> |
| input:hidden, input:h | <input type="hidden" name="" /> |
| input:text, input:t | <input type="text" name="" id="" /> |
| input:search | <input type="search" name="" id="" /> |
| input:email | <input type="email" name="" id="" /> |
| input:url | <input type="url" name="" id="" /> |
| input:password, input:p | <input type="password" name="" id="" /> |
| input:datetime | <input type="datetime" name="" id="" /> |
| input:date | <input type="date" name="" id="" /> |
| input:datetime-local | <input type="datetime-local" name="" id="" /> |
| input:month | <input type="month" name="" id="" /> |
| input:week | <input type="week" name="" id="" /> |
| input:time | <input type="time" name="" id="" /> |
| input:tel | <input type="tel" name="" id="" /> |
| input:number | <input type="number" name="" id="" /> |
| input:color | <input type="color" name="" id="" /> |
| input:checkbox, input:c | <input type="checkbox" name="" id="" /> |
| input:radio, input:r | <input type="radio" name="" id="" /> |
| input:range | <input type="range" name="" id="" /> |
| input:file, input:f | <input type="file" name="" id="" /> |
| input:submit, input:s | <input type="submit" value="" /> |
| input:image, input:i | <input type="image" src="" alt="" /> |
| input:button, input:b | <input type="button" value="" /> |
| input:reset | <input type="reset" value="" /> |
| button:submit, button:s, btn:s | <button type="submit"></button> |
| button:reset, button:r, btn:r | <button type="reset"></button> |
| button:disabled, button:d, btn:d | <button disabled="disabled"></button> |
| btn | <button></button> |
| fieldset:disabled, fieldset:d, fset:d, fst:d | <fieldset disabled="disabled"></fieldset> |
| fst, fset | <fieldset></fieldset> |
| optg | <optgroup></optgroup> |
| select | <select name="" id=""></select> |
| select:disabled, select:d | <select name="" id="" disabled="disabled"></select> |
| select+ | <select name="" id=""><option value=""></option></select> |
| option, opt | <option value=""></option> |
| table+ | <table><tr><td></td></tr></table> |
| textarea | <textarea name="" id="" cols="30" rows="10"></textarea> |
| tarea | <textarea name="" id="" cols="30" rows="10"></textarea> |