欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Visual Studio Code关于写html的快捷键

程序员文章站 2022-06-26 12:53:16
...

Visual Studio Code关于写html的快捷键

这几天写html,找别人学了一些有趣的快捷键,作用不一定很大,但还是记录一下。

多个平级标签

输入 div*5 会有提示,按回车,出现下面的代码
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

多个平级排序标签

输入 div{$}*4 出现提示后,按回车,出现下面的代码
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

给标签加id和class

输入 div#tagId 提示,回车
<div id="tagId"></div>

输入 div.tagClass 提示,回车
<div class="tagClass"></div>

多层嵌套标签

多层嵌套标签用>右尖括号,还可以任意组合。

span>div>section
<span>
    <div>
        <section></section>
    </div>
</span>

span>div*3>section
<span>
    <div>
        <section></section>
    </div>
    <div>
        <section></section>
    </div>
    <div>
        <section></section>
    </div>
</span>

span>div{$}*3>section
<span>
    <div>
        1
        <section></section>
    </div>
    <div>
        2
        <section></section>
    </div>
    <div>
        3
        <section></section>
    </div>
</span>

span>div*3>section{$}*3
<span>
    <div>
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
    <div>
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
    <div>
        <section>1</section>
        <section>2</section>
        <section>3</section>
    </div>
</span>

相关标签: 前端 vscode