技術標籤：HTMLhtmlhtml5visual studio code

Emmet語法及使用介紹

什麼是Emmet？

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Emmet 是一個支援大多數流行文字編輯器的極大改善 html 和 css 的工作流的一個外掛。
這裡選擇用vscode來演示效果:

ul>li.item${這是item$}*3

在輸入表示式時會出現提示和預覽效果，如下圖所示：

在出現提示後，按下tab鍵或enter鍵，即可出現完整結構：

Emmet基礎語法

1.生成後代元素：>

tag1>tag2表示在標籤(元素)tag1內生成後代標籤(元素)tag2

ul>li>a>img

<ul>
	<li><a href=""><img src="" alt=""></a></li>
</ul>

2.生成兄弟元素：+

tag1+tag2表示在標籤(元素)tag1後生成兄弟標籤(元素)tag2

ul+li+a+img

<ul></ul>
<
 
li></li>
<a href=""></a>
<img src="" alt="">

3.生成上級元素：^

tag1^tag2表示在標籤(元素)tag1的父級後生成兄弟標籤(元素)tag2，如果有兩個^符號，則再提升一級(向上找父親)，以此類推

ul>li>a^li>span^^input

<ul>
	<li><a href=""></a></li>
    <li><
 
span></span></li>
</ul>
<input type="text">

4.生成多個元素：*

tag1*n表示生成n個標籤(元素)tag1

ul>li*3

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>

5.生成類名：.

tag1.classname1表示給標籤(元素)tag1新增類名classname1，可新增多個類名，若沒有寫tag1則預設建立一個類名為classname1的div

ul.father>li.son.abc.hhh*3

<ul class="father">
	<li class="son abc hhh"></li>
    <li class="son abc hhh"></li>
    <li class="son abc hhh"></li>
</ul>

6.生成id名：#

tag1#idname1表示給標籤(元素)tag1新增id名classname1，可新增多個id名(可以但沒必要)，若沒有寫tag1則預設建立一個id名為idname1的div

ul#father>li#son

<ul id="father">
	<li id="son"></li>
</ul>

7.生成文字內容：{}

tag1{msg}表示在tag1內新增內容msg

h1{哈哈哈哈}

<h1>哈哈哈哈</h1>

8.生成屬性：[]

tag1[attr1]表示給標籤(元素)tag1新增屬性attr1，可包含多個屬性

img[src='pic.jpg' alt='圖片']

<img src="pic.jpg" alt="圖片">

9.生成編號：$

$一般用在id名，類名，內容中；當只有一個$時，數字從1開始，當有多個$時，數字從0開始
另外，可在$後加上@-來實現倒序排序； (使用中存在問題)
@n可以讓數字從n開始
$需搭配*使用，否則將會原樣輸出

ul>li.item$$${666$}*3

<ul>
	<li class="item001">6661</li>
	<li class="item002">6662</li>
	<li class="item003">6663</li>
</ul>

10.生成分組：()

可更加明確地表示層次關係

ul>li>a^^input

可寫為

(ul>li>a)+input

<ul>
	<li><a href=""></a></li>
</ul>
<input type="text">