前端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. SpringMVC 中 @ControllerAdvice 注解的三种使用场景！

    @ControllerAdvice ,很多初学者可能都没有听说过这个注解,实际上,这是一个非常有用的注解,顾名思义,这是一个增强的 Controller.使用这个 Controller ,可以实现三个 ...

  2. POLARDB · 最佳实践 · POLARDB不得不知道的秘密(二)

    前言 POLARDB For MySQL(下文简称POLARDB)目前是阿里云数据库团队主推的关系型数据库.线上已经有很多企业用户在使用并且稳定运行了很久.当然,由于POLARDB是为云上环境专门打造 ...

  3. 通过模拟JDK中的动态代理,由浅入深讲解动态代理思想.

    目录 场景引入 动态代理引入 动态代理进阶 总结 个人认为动态代理在设计模式中算是比较难的, 本篇文章将从无到有, 从一个简单代码示例开始迭代, 逐步深入讲解动态代理思想. 场景引入 假设现在有一个坦 ...

  4. JQuery --- 第二期 (jQuery属性操作)

    个人学习笔记 1.JQuery的内容选择器 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. Git：四、连接GitHub远程仓库

    1.拥有一个GitHub网站的账号 2.创建SSH Key 打开终端(Windows打开Git Bash),输入: ssh-keygen -t rsa -C "youremail@??.co ...

  6. SQL Server存储过程邮件发送以表格方式发送

    一.收到邮件显示:示例 二.存储过程代码部分: BEGIN SET NOCOUNT ON; --初始化 Declare @MailTo nvarchar(max) Declare @MailCc nv ...

  7. Video/Audio禁止快进（退）

    首先接着上个随笔.上个随笔主要介绍了视频音频的相关操作.属性和方法.这里主要记录一个应用:禁止快进(快退同理). 思路:监听快进事件(此处是监听播放时间更新),利用一个缓存的时间和播放到的时间进行对比 ...

  8. PyQt5 api 帮助文档

    学习PyQt5的帮助文档是通过,使用help(PyQt5 class)的方式在console端输出帮助内容,常用的方法和属性查找起来不是很方便,现在放在网上以方便大家使用. QWidget Qt QM ...

  9. CF914G Sum the Fibonacci FWT、子集卷积

    传送门 一道良心的练习FWT和子集卷积的板子-- 具体来说就是先把所有满足\(s_a \& s_b = 0\)的\(s_a \mid s_b\)的值用子集卷积算出来,将所有\(s_a \opl ...

  10. 从 RegExp 构造器看 JS 字符串转义设计

    多年前我第一次入职腾讯的时候,DC 从杭州给我寄来了一本他刚翻译出炉的<高性能 JavaScript>.那段时间为了帮忙校对,我仔细阅读了书中的每一个段落,结果积累了不少 JavaScri ...