前端IDE中有一些快捷编辑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和Intellij Idea都支持Emmet，其功能还有很多，待以后慢慢学习。

VSCode中快捷输入HTML代码的更多相关文章

  1. Python用户输入和代码注释

    一.用户输入 若你安装的是Python3.x版本,当你在Python IDLE(编辑器) 中输入以下代码: name = input('用户名:') print('Hello',name) 保存并执行 ...

  2. word2010以上版本中快捷录入数学公式的方法（二）

    以前推荐的方法,随着方正飞翔网站上关闭了数学公式输入法的支持也不能不用了,现在再推荐一个可以在word2010以上版中快捷输入数学公式的方法,安装AxMath,一切问题都OK!我是直接购买的正版,25 ...

  3. linux系统下如何在vscode中调试C++代码

    本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...

  4. 如何在Vue项目中，通过点击DOM自动定位VScode中的代码行？

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  5. 解决VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号

    解决VSCode中使用vetur插件格式化vue文件时,js代码会自动加上冒号和分号 在设置中把"vetur.format.defaultFormatter.js": " ...

  6. IntelliJ中的main函数和System.out.println()快捷输入方式

    转自:https://blog.csdn.net/assassinsshadow/article/details/73557375 main快捷输入 psvm System.out.println() ...

  7. 在vscode中进行nodejs服务端代码调试（代码修改自动重启服务端）

    使用到的是nodemon,具体在package.json文件中配置如下: "scripts": { "start": "node ./bin/www& ...

  8. 在vscode中使用Git

    用了git最方便的就是比如在公司写了很多代码后回到家打开vscode只需要点击一下pull就能全部同步过来.是不是很方便....毕竟之前我都是拿u盘拷贝回家或者存到云盘再下载下来.. 我这里用的是国内 ...

  9. Eclipse 快捷键 快捷输入

    快捷键: 1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如appli ...

随机推荐

  1. <转载>Android性能优化之HashMap,ArrayMap和SparseArray

    本篇博客来自于转载,打开原文地址已经失效,在此就不贴出原文地址了,如原作者看到请私信我可用地址,保护原创,人人有责.   Android开发者都知道Lint在我们使用HashMap的时候会给出警告—— ...

  2. Linux 系统调用过程详细分析

    内核版本:Linux-4.19 操作系统通过系统调用为运行于其上的进程提供服务. 那么,在应用程序内,调用一个系统调用的流程是怎样的呢? 我们以一个假设的系统调用 xyz() 为例,介绍一次系统调用的 ...

  3. DSAPI显示PNG异形窗体

    使用DSAPI实现PNG异形窗体,注意,该窗体为层样式窗体,以PNG或32位带透明通道的图像合成到屏幕,此方法不会触发窗体的重绘,故原窗体(包括其子控件)均不会显示,如果需要更新画面,需要重新用代码等 ...

  4. 由浅入深讲解责任链模式,理解Tomcat的Filter过滤器

    本文将从简单的场景引入, 逐步优化, 最后给出具体的责任链设计模式实现. 场景引入 首先我们考虑这样一个场景: 论坛上用户要发帖子, 但是用户的想法是丰富多变的, 他们可能正常地发帖, 可能会在网页中 ...

  5. odoo：免费开源ERP入门与实践

    Odoo下载安装 Odoo社区版下载链接:http://nightly.odoo.com/ ,下载11.0社区版Windows安装包:http://nightly.odoo.com/11.0/nigh ...

  6. 同顶级域名下 通过Cookie 跨域实现单点登陆

    Cookie对于web开发者而言真是一个小甜饼,因为它保留了用户的登录状态.但是当登陆站点在不同域名时就会出现问题了. 在Cookie规范上说,一个cookie只能用于一个域名,不能够发给其它的域名. ...

  7. 章节八、3-如何用Chrome开发者工具查看元素

    一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...

  8. WinForm DataGridView双向数据绑定

    程序目标: 实现DataGridView与BindingList<T>双向绑定.用户通过DataGridView修改值后立即更新BindList对象的值,代码修改BindList后立即更新 ...

  9. winform 实现类似于TrackBar的自定义滑动条，功能更全

    功能很全,随便列几个 1.可以设置滑块的大小,边框颜色.背景色.形状等等吧 2.可以设置轨道的方向.边框颜色.背景色.阴影等等 ... 效果图: 下载链接https://download.csdn.n ...

  10. SpringBoot2.0之八 多数据源配置

     在开发的过程中我们可能都会遇到对接公司其他系统等需求,对于外部的系统可以采用接口对接的方式,对于一个公司开发的两个系统,并且知道相关数据库结构的情况下,就可以考虑使用多数据源来解决这个问题.Spri ...