VSCode快速生成HTML——让你的代码飞起来

学习编程的同时也要学好一款编程工具，熟悉和正确的使用编程工具能够让你的编程速度飞起来，在工作中也能够事半功倍。

今天我将带大家来学习一下VSCode编程工具的一些关于HTML的快速生成方法，学会之后让你的HTML代码直接飞起来！让我们直接往下看：

生成HTML模板：

• doc + tab或者回车
• html:5 + tab或者回车
• ！+ tab VSCode更新后这个快捷方式被默认关掉了，我们需要按下面的步骤来打开。找到VSCode左下角的齿轮图标点击它，然后点开设置 在搜索框里面输入 emmet:tab 然后勾选开启这个快捷方式即可。

生成HTML标签：

• 单个：div

<div></div>

• 多个：div*3

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

• 父子：ul>li*3,tr*3>td*5(3行5列)

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

• 兄弟：div+span*3+ul>li*3

<div></div>
<span></span><span></span><span></span>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

• 爷孙：div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

注意：都要加tab 下同

标签和类名：

• 加class类名：div.classname

<div class="classname"></div>

• 加id名：div#idname

<div id="idname"></div>

• 同时带id名和class类名标签：div.classname#idname

<div class="classname" id="idname"></div>

注意：.classname #idname 不写标签默认为div标签

标签自增：$

类名自增：div.classname$*3

<div class="classname1"></div>
<div class="classname2"></div>
<div class="classname3"></div>

id自增：div.idname$*3

<div class="idname1"></div>
<div class="idname2"></div>
<div class="idname3"></div>

标签和内容：{}

• div{我是一个div}

<div>我是一个div</div>

标签和属性：[]

• div[width=400px;]

<div width="400px;"></div>

标签内容自增：$

• div*3{$}

<div>1</div>
<div>2</div>
<div>3</div>

了解了这些快速生成HTML代码的方法后，我相信你一定会受益匪浅，但是只看不练是远远不够的，实践是检验整理的唯一标准，接下来就去打开VSCode练一练上面的快捷方式吧。