Emmet 指令and VSCode
Emmet
我想分享一些最常用到的Emmet
和VScode
相關指令。如果會Emmet
我們可以提高我們在編寫HTML
的時間。我們不需要打麼長的與法。
1. html初始结構
指令:
!
=>tab or enter
1 |
|
2. CSS連結
指令:
裡面加link:css
=>tab or enter
在
1 | <link rel="stylesheet" href="style.css"> |
3.隱式TAG , id(#),class(.)
div tag:
.name
指令:
.test
1
<div class="test"></div>
list tag:
指令:
ul>.test$*3
1
2
3
4
5<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>id指令:
#
Syntax:
div.idname
指令:
div#test
1
<div id="test"></div>
class指令
.
Syntax:
div.classname
指令:
div.test
1
<div class="test"></div>
em 和 span :
Syntax:
tag>.class
指令:
em>.class
1
<em><span class></span></em>
表格 table
指令:
table>.row>.col
1
2
3
4
5<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>option
Syntax:
select>classname
指令:
select>.test$*5
1
2
3
4
5
6
7<select name="" id="">
<option class="test1"></option>
<option class="test2"></option>
<option class="test3"></option>
<option class="test4"></option>
<option class="test5"></option>
</select>
4.属性 attribute$
,@
$
代表一位数,后面更上*
數字就代表從1遞增到寫得位置。Example $
ul>li.test$*3
1
2
3
4
5<ul>
<li class="test1"></li>
<li class="test2"></li>
<li class="test3"></li>
</ul>@
自定從N開始遞增可以用:$@+數字*數字
Example
$
ul>li.test$*3{測試$}
1
2
3
4
5<ul>
<li class="test1">測試1</li>
<li class="test2">測試2</li>
<li class="test3">測試3</li>
</ul>6. 重復指令:
*
自動生成重複標籤Syntax:
tag * N
#N重複N數Example1
指令:
div*3
1
2
3<div></div>
<div></div>
<div></div>Example2
指令:
ul>li*3
1
2
3
4
5<ul>
<li></li>
<li></li>
<li></li>
</ul>
7. 文本Text和自動計數文本({})
7.1 基本文本
Example基本文本
Syntax:
div{這是一段文本}
指令:
div{hello}
1 | <div>hello</div> |
7.2 自動計數文本
生成重複項時增加一個序號,只需要加上$符號即可
Example1 文本加$
指令:
div*3{test$}
1 | <div>test1</div> |
Example2 里面填寫内容,可以和$
一起组合使用})
指令:
ul>li.test$*3{test$}
1 | <ul> |
Example3
指令:
ul>li.item$@-*3
1 | <ul> |
Example4 自動計數(numbering)
指令:
ul>li.item\${item number:\$}*3
1 | <ul> |
8. Nesting operators 子:>
,兄:+
,父^
縮寫元素放置在生成的樹中,是否應放置在上下文元素的內部或附近
- 子節點指令
>
- 同級節點指令
+
- 父級節點指令:
^
Example1
指令:
div>ul>li>p
1 | <div> |
Example2
指令:
div#pageId>ul>li
1 | <div id="pageId"> |
Example1
指令:
div+ul+p
1 | <div></div> |
Example2:
指令:
div#pageId+div.child
1 | <div id="pageId"></div> |
Example3:完整架構
指令:
.top+.banner+.box+.footer
1 | <div class="top"> </div> |
Example1
指令:
div>ul>li^div
(li的上级,與ul成了兄弟關系,所以兩個就是上上级)
1 | <div> |
Example1
指令:
div>ul>li^div
1 | <div> |
Example2
指令:
div>p.parent>span.child^ul.brother>li
1 | <div> |
9. 分组Grouping()
Example1
指令:
div>(ul>li>a)+div>p
如果不加括號的话,
a+div
這樣div
就是和a
是兄弟關系了,會包含在li
里面。
1 | <div> |
Example2
指令:
div>(ul>li+span)>a
1 | <div> |
vscode shortcut
TBD