shanzm-2019-02-07 15:48

  1. 新建html文件,保存之后,输入“”,按Tap(或Enter)键,自动生成HTML结构

  2. 标签只要直接输入标签名(不要输入<>),按Tap(或Enter)键自动生成完整的标签

  3. 输入标签和id:标签名#id名

    输入“span#sp",Tap(或Enter)键,

    =>

    <span id="sp"></span>
  4. 输入标签和class值:标签名.class 名

    输入"span.Sp",Tap(或Enter)键

    =>

    <span class="Sp"></span>
  • 【其中】:元素绑定多个类名:标签名.class名1.class名2。。。

    输入"span.Sp1.Sp2",Tap键(或Enter)键

    =>

    <span class="Sp1 Sp2"></span>
  1. 输入标签和标签中的值:标签名{标签内容}

    输入“span{test}",Tap(或Enter)键,

    =>

    <span>test</span>
  2. 同时输入多个同级标签:标签名+标签名+标签名。。。

    输入"li+li+li" , Tap(或Enter)键,

    =>

    <li></li>
    <li></li>
    <li></li>
  3. 同时输入父级标签和子标签:父级标签名>子级标签名。。。

    输入“table>ul>li+li ",Tap(或Enter)键,

    =>

    <table>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </table>
  4. 输入子级元素的父级元素的同级元素

    输入" div>p>span^ul>li "

    【注意】“^”之后的ul标签是和span的父级标签 p 同级的

    =>

    <div>
    <p><span></span></p>
    <ul>
    <li></li>
    </ul>
    </div>
  5. 输入超链接的链接href值

    输入“a:mail

    =>

    <a href="mailto:"></a>

    输入“a:link

    =>

    <a href="http://"></a>
  6. 输入标签的某个属性值

    输入“span[style=color:red]

    =>

    <span style="color:red"></span>

    输入“span[style=color:red].Sp#sp"

    =>

    <span style="color:red" class="Sp" id="sp"></span>
  7. 同级标签输入多个使用乘法

    输入“li*3"

    =>

    <li></li>
    <li></li>
    <li></li>

参考文章:

VsCode中使用Emmet神器快速编写HTML代码

使用VsCode自带的Emmet语法的更多相关文章

  1. Emmet语法预览

    Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器.Emmet 定义了一些缩写,当我们输入缩写代码后,按展开键(默认是 ...

  2. HTML/CSS 速写神器 Emmet语法

    Emmet 是高效.快速编写 HTML 和 CSS 代码的一种插件,如果还不了解,请戳Emmet — the essential toolkit for web-developers,再根据你使用的编 ...

  3. Emmet语法大全手册

    这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax   Child: > nav>ul>li <nav> <ul ...

  4. Emmet 语法探析

    Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...

  5. atom中vue高亮支持emmet语法

    vue高亮插件: language-vue 支持emmet语法: 文件>用户键盘映射>keymap.cson添加: 'atom-text-editor[data-grammar~=&quo ...

  6. Emmet语法规则

    HTML速写之Emmet语法规则 Emmet-写HTML/CSS快到飞起 在前端开发的过程中,最费时间的工作就是写 HTML.CSS 代码.一堆的标签.属性.括号等,头疼.这里推荐一个Emmet语法规 ...

  7. emmet语法列表

    emmet语法  来源:https://docs.emmet.io/cheat-sheet/ Child: > nav>ul>li <nav> <ul> &l ...

  8. Emmet 语法大全(缩写语法/sublime 插件)

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  9. 前端开发必备!Emmet语法

    使用方法 emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段.(如果与已有的快捷键有冲突的话,可以 ...

随机推荐

  1. websocket+rabbitmq实战

    1. websocket+rabbitmq实战 1.1. 前言   接到的需求是后台定向给指定web登录用户推送消息,且可能同一账号会登录多个客户端都要接收到消息 1.2. 遇坑 基于springbo ...

  2. 【dotNet Core】Swagger下简单的给WebApi分组

    Startup.cs下ConfigureServices代码 这里主要在DocInclusionPredicate控制输出那些api. Startup.cs下Configure代码 给Controll ...

  3. 老司机教你用原生JDK 撸一个 MVC 框架!!!

    其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...

  4. 好用的函数,assert,random.sample,seaborn tsplot, tensorflow.python.platform flags 等,持续更新

    python 中好用的函数,random.sample等,持续更新 random.sample random.sample的函数原型为:random.sample(sequence, k),从指定序列 ...

  5. 在tomcat中加入SSL腾讯云证书的步骤

    在tomcat中加入SSL证书,可以用https方式访问域名,增加域名的安全性.当然也有很多应用要求https访问,也是安全性的考虑.阿里云和腾讯云都提供SSL证书,还有一些其他的大公司也提供,我这里 ...

  6. Python爬虫入门教程 35-100 知乎网全站用户爬虫 scrapy

    爬前叨叨 全站爬虫有时候做起来其实比较容易,因为规则相对容易建立起来,只需要做好反爬就可以了,今天咱们爬取知乎.继续使用scrapy当然对于这个小需求来说,使用scrapy确实用了牛刀,不过毕竟本博客 ...

  7. windows git 上传

    1.打开git.bash 2. 告诉要传的git的用户名字 和邮箱地址 git config --global user.name "CardLove" git config -- ...

  8. JDBC 连接池的两种方式——dbcp & c3p0

    申明:本文对于连接资源关闭采用自定义的 JDBCUtils 工具: package com.test.utils; import java.sql.Connection; import java.sq ...

  9. Spring之BeanFactory和FactoryBean接口的区别

    目录 一.BeanFactory接口 二.FactoryBean接口 1.简单实现 2.增强实现 3.FactoryBean的实际使用案例 三.总结 @   Spring框架中的BeanFactory ...

  10. Docker中安装WordPress

    前言 虚拟化技术风靡一时,还不层在生产环境中实践.只能是闭门造车,自己玩一玩了,接触了一下docker最简单的命令,这才自己搭建一个wordpress玩一玩. 安装wordpress之前先把本机的do ...