前端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. HashMap？面试？我是谁？我在哪

    现在是晚上11点了,学校屠猪馆的自习室因为太晚要关闭了,勤奋且疲惫的小鲁班也从屠猪馆出来了,正准备回宿舍洗洗睡,由于自习室位置比较偏僻所以是接收不到手机网络信号的,因此小鲁班从兜里掏出手机的时候,信息 ...

  2. .Net Core中利用TPL（任务并行库）构建Pipeline处理Dataflow

    在学习的过程中,看一些一线的技术文档很吃力,而且考虑到国内那些技术牛人英语都不差的,要向他们看齐,所以每天下班都在疯狂地背单词,博客有些日子没有更新了,见谅见谅 什么是TPL? Task Parall ...

  3. C++删除文件末尾字符

    C++中使用fstream来进行文件读写,如果要覆盖文件末尾的部分字符,应该怎么操作呢? #include <iostream> #include <fstream> std: ...

  4. asp.net core系列 29 EF模型配置(查询类型,关系数据库建模)

    一.查询类型 此功能是EF Core 2.1中的新功能. EF Core除了实体类型之外,EF Core模型还可以包含查询类型,这些查询类型是针对“未映射到实体类型”的数据获取.比如视图,或只读数据表 ...

  5. Java基础练习2(构造方法)

    1.以下关于面向对象概念的描述中,不正确的一项是() A.在构造方法中,this()只能出现在构造方法第一行位置 B.在构造方法中,super()只能出现在构造方法第一行位置 C.this()和sup ...

  6. 六大设计原则（一）SRP单一职责原则

    单一职责原则SRP(Single reponsibility principle) BO(Business Object):业务对象 Biz(Business Logic):业务逻辑 SRP最简单的例 ...

  7. Angular（03）-- lint风格规范和WebStorm小技巧

    在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...

  8. arcgis api 3.x for js 入门开发系列二十二地图模态层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. asp.net core 将配置文件配置迁移到数据库（一）

    asp.net core 将配置文件配置迁移到数据库(一) Intro asp.net core 配置默认是项目根目录下的 appsettings.json 文件,还有环境变量以及 command l ...

  10. kerberos环境storm配置：Running Apache Storm Securely

    Running Apache Storm Securely Apache Storm offers a range of configuration options when trying to se ...