VSCode编辑器使⽤技巧：快捷输⼊HTML代码（转）
VSCode中有⼀些快捷编辑HTML的⽅法，能⼤⼤提⾼⼯作效率，在这记录⼀些。
1.输⼊html:5，然后按tab键或enter键，效果如下：
1 <!-- 输⼊html或者html:5⽣成页⾯模板 -->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9 </head>
10 <body>
11
12 </body>
13 </html>
2.输⼊link:css引⼊css样式⽂件，输⼊script:src引⼊js
1 <!-- 输⼊link:css引⼊样式 -->
2 <link rel="stylesheet" href="">
3 <!-- 输⼊script:src引⼊js -->
4 <script src=""></script>
3.输⼊标签名⾃动补齐
1 <!-- 输⼊标签名 h1 按tab键或Enter键⾃动补齐 -->
2 <h1>HTML快捷输⼊练习</h1>
3 <!-- {}可输⼊标签内的⽂本如输⼊：h2{填充⽂本} -->
4 <h2>填充⽂本</h2>
4.随机⽂本的输⼊
1 <!-- Lorem⾃动输⼊⼀段随机⽂本(默认30个单词)，Lorem10 输⼊10个单词，Lorem*5 输⼊5遍随机⽂本 -->
2 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 tem
3 <!-- Lorem10 的结果-->
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
5 <!-- Lorem10*10 的结果-->
6 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
7 Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
8 Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.
5.使⽤"#“输⼊id，”.“输⼊class，”[]"输⼊属性
1 <!-- t 输⼊id、class -->
2 <div id="main" class="content"></div>
3 <div id="foot" class="foot" data="结束"></div>
4 <!-- div[alt=到底了]{结束} 添加属性及包裹⽂本 -->
5 <div alt="到底了">结束</div>
6.使⽤">“输⼊嵌套标签，”+" 输⼊并列的兄弟标签，"^"上级元素
1 <!-- div>div#imgs{put some imgs here} 标签的嵌套-->
2 <div>
3    <div id="imgs">put some imgs here</div>
html代码转链接4 </div>
5
6 <!-- div#left{I am left}+div#right{I am right} 并列标签 -->
7 <div id="left">I am left</div>
8 <div id="right">I am right</div>
9
10 <!-- 看⽹上资料说^上级元素，没懂是什么意思，试了⼏个体会⼀下 -->
11 <!-- div#div1>p^div#div2 把div1提出成⼀⾏和div2同级 -->
12 <div id="div1">
13    <p></p>
14 </div>
15 <div id="div2"></div>
16 <!-- div>div#div1>p^div#div2 -->
17 <div>
18    <div id="div1">
19        <p></p>
20    </div>
21    <div id="div2"></div>
22 </div>
23
24 <!-- div>p>img^div>ul>li -->
25 <div>
26    <p><img src="" alt=""></p>
27    <div>
28        <ul>
29            <li></li>
30        </ul>
31    </div>
32 </div>
33 <!-- div>div>div^div -->
34 <div>
35    <div>
36        <div></div>
37    </div>
38    <div></div>
39 </div>
40 <!-- div>div^div -->
41 <div>
42    <div></div>
43 </div>
44 <div></div>
7.使⽤"()“对标签分组及使⽤”*"⽣成多个相同的标签
1 <!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使⽤括号分组标签 *⽣成多个标签-->
2 <div id="list1">
3    <ul>
4        <li></li>
5        <li></li>
6    </ul>
7 </div>
8 <div id="list1">
9    <ul>
10        <li></li>
11        <li></li>
12    </ul>
13 </div>
8.⾃增符号$
1 <!-- $ ⾃增符号 -->
2 <!-- ul>li*3>img[src=./imgs/$.jpg][alt={img $}] -->
3 <ul>
4    <li><img src="./imgs/1.jpg" alt="img 1"></li>
5    <li><img src="./imgs/2.jpg" alt="img 2"></li>
6    <li><img src="./imgs/3.jpg" alt="img 3"></li>
7 </ul>
8
9 <!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->
10 <ul>
11    <li><img src="./imgs/001.jpg" alt="img 001"></li>
12    <li><img src="./imgs/002.jpg" alt="img 002"></li>
13    <li><img src="./imgs/003.jpg" alt="img 003"></li>
14 </ul>
15
16 <!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] -->
17 <ul>
18    <li><img src="./imgs/04.jpg" alt="img 04"></li>
19    <li><img src="./imgs/05.jpg" alt="img 05"></li>
20    <li><img src="./imgs/06.jpg" alt="img 06"></li>
21 </ul>
9.{}是标签中的内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。