【HTML】使用Vscode快速書寫HTML

快速書寫HTML

1. 前言

快速書寫的語法應該溯源到Emmet插件，現在絕大多數編輯器都支持該語法；本文以Vscode爲例介紹核心語法，力求簡潔明瞭。

2. 內容

• H5模板 !

! 快速生成H5模板 

• class & id

<!-- div.container#main -->
<div class="container" id="main"></div>

• 下級 >

<!-- div>div>button -->
<div>
    <div>
        <button></button>
    </div>
</div>

• 同級 +

<!-- div+button+div -->
<div></div>
<button></button>
<div></div>

• 上級 ^

<!-- 這個我想應該是`<`的意思，但是有`<`就歧義了，所以用了`^`代替 -->
<!-- div>button^button -->
<div>
    <button></button>
</div>
<div></div>

• 重複 *

<!-- button*3 -->
<button></button>
<button></button>
<button></button>

• 編號 $*

<!-- button#btn$*3 -->
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>

• 組合 ()

<!-- (div#container$>button)*3 -->
<div id="container1"><button></button></div>
<div id="container2"><button></button></div>
<div id="container3"><button></button></div>

3. 參考

開源中國