VScode快速创建HTML标签

1.生成一个带有id的div标签。

div#dome

<div id="dome"></div>

2.生成一个带有class的div标签。

div.dome

<div class="dome"></div>

3.生成一个带有特定属性的标签。

a[href=“www.baidu.com”]

<a href="www.baidu.com"></a>

4.生成一个标签有内容的div。

div{内容}

<div>内容</div>

5.在div标签里嵌套一个p标签。

div>p

<div>
    <p></p>
</div>

6.给div创建一个兄弟标签h1。

div+h1

<div></div>
<h1></h1>

7.给span标签生成父级元素div的同级元素p。

p^div.span

<p></p>
<div><span></span></div>

8.分组操作符。

(div.box>(img[src=img/loading.gif].img))*1

<div class="box"><img src="img/loading.gif" alt="" class="img"></div>

9.乘法操作符。

div>ui>li*10

<div>
    <ui>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ui>
</div>

10.自动计数。

div>ui>li{$}*10+p{如果生成两位数则使用两个连续的 $$ ，更多位数以此类推。}

<div>
    <ui>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <p>如果生成两位数则使用两个连续的 $$ ，更多位数以此类推。</p>
    </ui>
</div>

11.自动添加单词。

div>ul>li>lorem4*5

<div>
    <ul>
        <li>
            <div>Lorem ipsum dolor sit.</div>
            <div>Minima dolor harum a!</div>
            <div>Veritatis dicta sit voluptatum.</div>
            <div>Molestiae suscipit consequuntur enim!</div>
            <div>Sunt dicta illum quam?</div>
        </li>
    </ul>
</div>

12.后续更新高阶，请期待…