【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. 参考

开源中国