前端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. 啥？客户叫在DataGridView的左上角添加CheckBox?

    效果图是这样的,如何把CheckBox放到左上角是最重要的. 添加方法 InitColumnInfo() 方法,代码如下. private void InitColumnInfo() { ; Data ...

  2. 解决VS2019中.net core WPF 暂时无法使用 Designer 的临时方法

    目录 解决 VS2019 中.net core WPF 暂时无法使用 Designer 的临时方法 安装 vs 2019 professional/enterprise版本 在vs的设置里,勾选.NE ...

  3. 图解：HTTP 范围请求，助力断点续传、多线程下载的核心原理

    题图:by Charles Loyer 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header) ...

  4. .net core 2.0 redis驱动性能比拼

    今天来了三位主角,他们分别是大名鼎鼎的 StackExchange.Redis,无敌轻巧的 CSRedis,中通日处理80亿访问的 NewLife.Redis. 作者从2016年学习.netcore以 ...

  5. 引用provinces.js的三级联动

    第一次写随笔   应该写的不是太好   请多多见谅 我这次是在网上发现了一个三级联动    也是给新人一个福利 这个是你需要新建个 JavaScript 文件  并复制到你新建的文件里面 var pr ...

  6. 手把手教你整合SSM框架（基于课工厂+MyEclipse 2017 CI 10）

    步骤1:myeclipse创建项目,导入spring框架 整合思路:因为spring和spring mvc同源,可以无缝整合,故先整合spring+mybatis,然后配置web.xml.spring ...

  7. Python基础 列表介绍、使用

    第3章 学习目标: 列表是什么以及如何使用列表元素.列表让你能够在一个地方存储成组的信息,其中可以只包含几个元素,也可以包含数百万个元素.列表是新手可直接使用的最强大的Python功能之一,它融合了众 ...

  8. Web地图导图总结

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 地图端展示了各类制图效果,用户希望可以一键生成报表,其中核心 ...

  9. SQL - Order By如何处理NULL

    问题来了.执行SQL语句 SELECT * FROM tbl ORDER BY x, y 如果用来排序的列x.y当中有NULL值,那么它们的顺序是怎样的呢? 不同的数据库有不同的答案,目前的主流数据库 ...

  10. #if和#ifdef的区别

    学习STM32偶然发现:在Keil中直接预先定义宏USE_STDPERIPH_DRIVER,但是却没有指定宏的值.而在头文件中判断用的是如下代码: #ifdef USE_STDPERIPH_DRIVE ...