前端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. Python-定时爬取指定城市天气(二)-邮件提醒

    目录 一.概述 二.模块重新划分 三.优化定时任务 四.发送邮件 五.源代码 一.概述 上一篇文章python-定时爬取指定城市天气(一)-发送给关心的微信好友中我们讲述了怎么定时爬取城市天气,并发送 ...

  2. java~springcloud微服务目录索引

    回到占占推荐博客索引 最近写了不过关于java,spring,微服务的相关文章,今天把它整理一下,方便大家学习与参考. java~springcloud微服务~目录索引 springcloud~服务注 ...

  3. Python猫荐书系列之五：Python高性能编程

    稍微关心编程语言的使用趋势的人都知道,最近几年,国内最火的两种语言非 Python 与 Go 莫属,于是,隔三差五就会有人问:这两种语言谁更厉害/好找工作/高工资…… 对于编程语言的争论,就是猿界的生 ...

  4. Mqtt学习指南

    MQTT是物联网应用当中一种非常重要的,轻量级的协议,现将该协议的重要学习资源整理一下,希望能为初学者提供一个完整的学习资源. MQTT是一个客户端服务端架构的发布/订阅模式的消息传输协议.它的设计思 ...

  5. Server Error in '/' Application Runtime Error 错误

    项目发布后  在本地发布可以运行  在服务器就会出现这种错误 在网上也查找了各种资料  解决方案 都没有解决 因为我用的C# 首先在 Webconfig配置文件中的 system.web中加入 < ...

  6. .net Lambda表达式与Linq (LINQ TO object)

    Lambda表达式,是用来写匿名方法的. 在委托用得比较多,因为委托是传递方法的.   定义几个委托: public delegate void DoNoThing();//无参无返回值   publ ...

  7. 教程：关于如何通过Maven仓库安装Spire系列的 Java产品

    Spire系列库中已发布的Java产品目前有三个,即Spire.PDF for Java.Spire.Presentation for Java.Spire.Barcode for Java.使用该J ...

  8. Angular（02）-- Angular-CLI命令

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  9. 1、Linux命令随笔

    1 Linux命令总结 2 3 man ==命令帮助; 4 help ==命令的帮助(bash的内置命令); 5 ls ==list,查看目录列表; 6 -ld:查看目录权限; 7 -l:(long) ...

  10. redis缓存类

    <?php class Redis_model{ public $redis = null; public function __construct() { $hosts = $this-> ...