Emmet 使用方法

Emmet的html語法
全部操做按下「tab」鍵便可瞬間完成

元素
1.在編輯器中輸入元素名稱，便可自動補全生成 HTML 標籤，即便不是標準的 HTML 標籤。
2.輸入：! 或者 html:5 或者 html:4s 或者 html:4t 將自動補全html基本結構

嵌套操做
1.使用「>」生成子元素

// 輸入
div>ul>li

// 按下TAB鍵
<div>
<ul>
<li></li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
2.使用「+」生成兄弟元素

// 輸入
div+p+bq

// 按下TAB鍵
<div></div>
<p></p>
<blockquote></blockquote>
1
2
3
4
5
6
7
3.使用「^」生成父元素

// 輸入
div+div>p>span+em^bq

// 按下TAB鍵
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
1
2
3
4
5
6
7
8
9
4.使用「*」生成多個相同元素

// 輸入
div>ul>li*5

// 按下TAB鍵
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
5.使用「()」將元素分組

// 輸入
// "+" 後面的元素與括號中的第一個元素屬於兄弟關係
div>(header>ul>li*2)+footer>p

//按下TAB鍵
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
屬性操做
1.id與class：元素與 id 屬性值之間用 「#」 分隔，與 class 屬性值之間用 「.」 分隔

// 輸入
div#header+div.page+div#footer.class1.class2.class3

// 按下TAB鍵
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
1
2
3
4
5
6
7
2.使用「[]」標記其餘屬性

// 輸入
td[title='hello' colspan=3]

// 按下TAB鍵
<td title="hello" colspan="3"></td>
1
2
3
4
5
3.用「$」符號實現1到n的自動編號（「*」實現多個元素）

// 輸入
li.item$*3

// 按下TAB鍵
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
1
2
3
4
5
6
7
可在 「$」 後添加 「@n」 修改編號的起始值爲n。

// 輸入
li.item$@3*3

// 按下TAB鍵
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
1
2
3
4
5
6
7
可在 「$」 後添加 「@-」 修改編號的方向。

// 輸入
li.item$@-3*3

// 按下TAB鍵
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
1
2
3
4
5
6
7
4.用「{}」添加文本內容

// 輸入
a[href=me.htm]{click me}

// 按下TAB鍵<a href="me.htm">click me</a>