VSCode中快捷输入HTML代码

dailybird 发布于2019-04-23 11:49 / 3533人阅读

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

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

 1 
 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>Documenttitle>
 9 head>
10 <body>
11     
12 body>
13 html>

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

1 
2 <link rel="stylesheet" href="">
3 
4 <script src="">script>

3.输入标签名自动补齐

1 
2 <h1>HTML快捷输入练习h1>
3 
4 <h2>填充文本h2>

4.随机文本的输入

1 
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 tempore debitis?
3 
4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
5 
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 
2 <div id="main" class="content">div>
3 <div id="foot" class="foot" data="结束">div>
4 
5 <div alt="到底了">结束div>

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

 1 
 2 <div>
 3     <div id="imgs">put some imgs herediv>
 4 div>
 5 
 6 
 7 <div id="left">I am leftdiv>
 8 <div id="right">I am rightdiv>
 9 
10 
11 
12 <div id="div1">
13     <p>p>
14 div>
15 <div id="div2">div>
16 
17 <div>
18     <div id="div1">
19         <p>p>
20     div>
21     <div id="div2">div>
22 div>
23 
24 
25 <div>
26     <p><img src="" alt="">p>
27     <div>
28         <ul>
29             <li>li>
30         ul>
31     div>
32 div>
33 
34 <div>
35     <div>
36         <div>div>
37     div>
38     <div>div>
39 div>
40 
41 <div>
42     <div>div>
43 div>
44 <div>div>

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

 1 
 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 
 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 
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 
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>

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

GPU云服务器云服务器 html联想输入代码 html输入文字代码 html代码输入框 html代码中横线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1198.html

宇宙最强vscode教程（基础篇）

摘要：在命令面板中你可以输入命令进行搜索中英文都可以，然后执行。命名面板中可以执行各种命令，包括编辑器自带的功能和插件提供的功能。本文主要介绍vscode在工作中常用的快捷键及插件，目标在于提高工作效率本文的快捷键是基于mac的，windows下的快捷键放在括号里 Cmd+Shift+P(win Ctrl+Shift+P) [TOC] 零、快速入门有经验的可以跳过快速入门或者大致浏览一...

Jason_Geng 2019-08-23 14:50 评论0 收藏0
VS Code配置及插件推荐

摘要：宋体以像素为单位控制字号。将其设置为可隐藏窗格。是否已启用自动刷新是否启用自动拉取以像素为单位控制终端的字号，这是的默认值。要求工作区使用高于版本的。用户设置打开文件 > 首选项 > 用户设置(U)，（忽略覆盖工作区提示） { // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。 editor.tabS...

wpw 2019-08-20 14:42 评论0 收藏0
21 个VSCode 快捷键，让代码更快，更有趣

摘要：在这篇文章中，我将列出我最喜欢的快捷键，这些快捷键让我更快的编写代码，也让编码变得更有趣，以下是个快捷键，分享给你。打开键盘快捷键或，搜索。在中，启动性能是很重要的。逐个选择文本可以通过快捷键右箭头右箭头和左箭头左箭头逐个选择文本。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！注意：自己尝试的时候，Mac(17, p...

elina 2019-08-26 10:15 评论0 收藏0
如何优雅地使用 VSCode 来编辑 vue 文件？

摘要：注本文首发在我的个人博客最近有个项目使用了，本来一直使用的是来进行开发，可是遇到了很多问题。此外，还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。，终于基本搞定了，可以愉快地开发应用了。注：本文首发在我的个人博客最近有个项目使用了 Vue.js ，本来一直使用的是 PHPStorm 来进行开发，可是遇到了很多问题。后来，果断放弃收费的 PHPStorm ，改用 vsco...

pekonchan 2019-08-20 15:14 评论0 收藏0
前端开发VScode常用插件

摘要：名称功能自动闭合标签自动提示修改标签时，自动修改匹配的标签格式化编写更加人性化的注释添加行书签的浏览器兼容性检查运行选中代码段支持大量语言，包括单词拼写检查在中弹出浏览器并搜索，可编辑搜索引擎颜色值在代码中高亮显示小窗口显示颜色值，等等拾色名称功能 Auto Close Tag 自动闭合HTML标签 Auto Import...

hellowoody 2019-08-21 18:21 评论0 收藏0