/

教學：Emmet

教學：Emmet

Emmet 是一個非常方便的工具，可以讓你快速編寫 HTML。就像魔法一樣。Emmet 不是什麼新東西，已經存在多年，每個編輯器都有對應的插件。

Emmet 是一個非常方便的工具，可以讓你快速編寫 HTML。

就像魔法一樣。

Emmet 不是什麼新東西，已經存在多年，每個編輯器都有對應的插件。在 VS Code 中，Emmet 是內建的功能，當編輯器識別到可能的 Emmet 命令時，會顯示提示信息。

在 VS Code 中使用 Emmet

如果你輸入的內容沒有其他解釋，且 VS Code 認為它可能是一個 Emmet 表達式，它會直接在提示信息中預覽該內容:

在 VS Code 中預覽 Emmet

然而，直到我開始研究並撰寫關於 Emmet 的內容，我才真正知道如何充分利用它的細節。

我希望在我的日常工作中使用它，所以這是我學到的關於 Emmet 的內容。

從頭開始建立 HTML 檔案

輸入 !，將獲得一個基本的 HTML 範本來開始編寫：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>

</body>
</html>

和 +

  • > 代表子級
  • + 代表同級
1
2
3
4
5
6
7
nav>ul>li

<nav>
 <ul>
 <li></li>
 </ul>
</nav>
1
2
3
4
5
div+p+span

<div></div>
<p></p>
<span></span>

可以結合這兩個符號來完成更複雜的標記。當 Emmet 嵌套時，VS Code 非常友好地在表達式沒有預覽時顯示一個預覽：

1
2
3
4
5
6
7
8
9
ul>li>div+p+span

<ul>
 <li>
 <div></div>
 <p></p>
 <span></span>
 </li>
</ul>

更高級

使用 ^，你可以在使用 > 創建子級後向上跳級：

1
2
3
4
5
6
7
8
9
ul>li>div+p^li>span

<ul>
 <li>
 <div></div>
 <p></p>
 </li>
 <li><span></span></li>
</ul>

你可以多次使用它進行多次跳級：

1
2
3
4
5
6
7
8
9
ul>li>div+p^^p

<ul>
 <li>
 <div></div>
 <p></p>
 </li>
</ul>
<p></p>

倍數

通過使用 *，任何標籤都可以被重複添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 個項目，可以將它們放在括號 ( ) 中進行分組：

1
2
3
4
5
6
7
8
9
10
ul>li>(p+span)\*2

<ul>
 <li>
 <p></p>
 <span></span>
 <p></p>
 <span></span>
 </li>
</ul>

id 和 class 屬性

在 HTML 中，id 和 class 可能是最常用的屬性。

你可以使用 CSS 類似的語法快速創建包含它們的 HTML 標籤：

1
2
3
4
5
6
7
ul>li>p.text#first

<ul>
 <li>
 <p class="text" id="first"></p>
 </li>
</ul>

你可以添加多個 class：

1
2
3
4
5
6
7
ul>li>p.text.paragraph#first

<ul>
 <li>
 <p class="text paragraph" id="first"></p>
 </li>
</ul>

添加獨特的 class 或 id

id 在你的頁面中必須是唯一的。

class 可以重複使用，但有時你希望對元素進行遞增編號。你可以使用 $ 來實現：

1
2
3
4
5
6
7
8
9
10
ul>li.item$\*2>p

<ul>
 <li class="item1">
 <p></p>
 </li>
 <li class="item2">
 <p></p>
 </li>
</ul>

其他屬性

除了 class 和 id 之外，其他屬性必須使用 [] 方括號添加：

1
2
3
4
5
6
7
8
9
10
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>

你也可以一次添加多個屬性：

1
2
3
4
5
6
7
8
9
10
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 中添加內容：

1
2
3
4
5
6
7
8
9
10
ul>li.item$\*2>p{Text}

<ul>
 <li class="item1">
 <p>Text</p>
 </li>
 <li class="item2">
 <p>Text</p>
 </li>
</ul>

在你的標記中添加遞增數字

你可以在文本中添加遞增數字：

1
2
3
4
5
6
7
8
9
10
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 開始，但你可以指定任意數字作為起始值：

1
2
3
4
5
6
7
8
9
10
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>