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 src=""></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 src=""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 src="./imgs/1.jpg" alt="img 1"></li>
- <li><img src="./imgs/2.jpg" alt="img 2"></li>
- <li><img src="./imgs/3.jpg" alt="img 3"></li>
- </ul>
- <!-- ul>li*3>img[src=./imgs/$$$.jpg][alt={img $$$}] -->
- <ul>
- <li><img src="./imgs/001.jpg" alt="img 001"></li>
- <li><img src="./imgs/002.jpg" alt="img 002"></li>
- <li><img src="./imgs/003.jpg" alt="img 003"></li>
- </ul>
- <!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt={img $$@4}] -->
- <ul>
- <li><img src="./imgs/04.jpg" alt="img 04"></li>
- <li><img src="./imgs/05.jpg" alt="img 05"></li>
- <li><img src="./imgs/06.jpg" alt="img 06"></li>
- </ul>
这些快捷操作需要 Emmet 插件, 本文是在 VSCode 下编写的, 其他编辑器如 Atom,Sublime Text 都支持 Emmet, 其功能还有很多, 待以后慢慢学习.
来源: http://www.bubuko.com/infodetail-2966860.html