首页手记 VSCode编辑器使用技巧：快捷输入HTML代码

VSCode编辑器使用技巧：快捷输入HTML代码

标签：

Html/CSS 前端工具

VSCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这记录一些。

1.输入html:5，然后按tab键或enter键，效果如下：

<!-- 输入html或者html:5生成页面模板 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.输入link:css引入css样式文件，输入script:src引入js

<!-- 输入link:css引入样式 -->
<link rel="stylesheet" href="">
<!-- 输入script:src引入js -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script>

3.输入标签名自动补齐

<!-- 输入标签名 h1 按tab键或Enter键自动补齐 -->
<h1>HTML快捷输入练习</h1>
<!-- {}可输入标签内的文本 如输入：h2{填充文本} -->
<h2>填充文本</h2>

4.随机文本的输入


<!-- Lorem自动输入一段随机文本(默认30个单词)，Lorem10 输入10个单词，Lorem*5 输入5遍随机文本 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis?
<!-- Lorem10 的结果-->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
<!-- Lorem10*10 的结果-->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.

5.使用"#“输入id，”.“输入class，”[]"输入属性

<!-- div#main.content 输入id、class -->
<div id="main" class="content"></div>
<div id="foot" class="foot" data="结束"></div>
<!-- div[alt=到底了]{结束} 添加属性及包裹文本 -->
<div alt="到底了">结束</div>

6.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素

<!-- div>div#imgs{put some imgs here} 标签的嵌套-->
<div>
    <div id="imgs">put some imgs here</div>
</div>

<!-- div#left{I am left}+div#right{I am right} 并列标签 -->
<div id="left">I am left</div>
<div id="right">I am right</div>

<!-- 看网上资料说^上级元素,没懂是什么意思，试了几个体会一下 -->
<!-- div#div1>p^div#div2 把div1提出成一行和div2同级 -->
<div id="div1">
    <p></p>
</div>
<div id="div2"></div>
<!-- div>div#div1>p^div#div2 -->
<div>
    <div id="div1">
        <p></p>
    </div>
    <div id="div2"></div>
</div>

<!-- div>p>img^div>ul>li -->
<div>
    <p><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" alt=""></p>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
</div>
<!-- div>div>div^div -->
<div>
    <div>
        <div></div>
    </div>
    <div></div>
</div>
<!-- div>div^div -->
<div>
    <div></div>
</div>
<div></div>

7.使用"{}“对标签分组及使用”*"生成多个相同的标签


<!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括号分组标签 *生成多个标签-->
<div id="list1">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="list1">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

8.自增符号$


<!-- $ 自增符号 -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt={img $}] -->
<ul>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/1.jpg" alt="img 1"></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/2.jpg" alt="img 2"></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/3.jpg" alt="img 3"></li>
</ul>

<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->
<ul>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/001.jpg" alt="img 001"></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/002.jpg" alt="img 002"></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/003.jpg" alt="img 003"></li>
</ul>
    
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] -->
<ul>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/04.jpg" alt="img 04"></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/05.jpg" alt="img 05"></li>
    <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./imgs/06.jpg" alt="img 06"></li>
</ul>

这些快捷操作需要Emmet插件，本文是在VSCode下编写的，其他编辑器如Atom、Sublime Text都支持Emmet，其功能还有很多，待以后慢慢学习。

点击查看更多内容