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

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

VSCode_bcdog

今天我将带大家来学习一下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练一练上面的快捷方式吧。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片