学习编程的同时也要学好一款编程工具,熟悉和正确的使用编程工具能够让你的编程速度飞起来,在工作中也能够事半功倍。
今天我将带大家来学习一下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
暂无评论内容