使用VsCode自带的Emmet语法
新建html文件,保存之后,输入“
!
”,按Tap(或Enter)键,自动生成HTML结构标签只要直接输入标签名(不要输入<>),按Tap(或Enter)键自动生成完整的标签
输入标签和id:标签名#id名
输入“
span#sp
",Tap(或Enter)键,=>
<span id="sp"></span>
输入标签和class值:标签名.class 名
输入"
span.Sp
",Tap(或Enter)键=>
<span class="Sp"></span>
【其中】:元素绑定多个类名:标签名.class名1.class名2。。。
输入"
span.Sp1.Sp2
",Tap键(或Enter)键=>
<span class="Sp1 Sp2"></span>
输入标签和标签中的值:标签名{标签内容}
输入“
span{test}
",Tap(或Enter)键,=>
<span>test</span>
同时输入多个同级标签:标签名+标签名+标签名。。。
输入"
li+li+li
" , Tap(或Enter)键,=>
<li></li>
<li></li>
<li></li>
同时输入父级标签和子标签:父级标签名>子级标签名。。。
输入“
table>ul>li+li
",Tap(或Enter)键,=>
<table>
<ul>
<li></li>
<li></li>
</ul>
</table>
输入子级元素的父级元素的同级元素
输入"
div>p>span^ul>li
"【注意】“^”之后的
ul
标签是和span
的父级标签p
同级的=>
<div>
<p><span></span></p>
<ul>
<li></li>
</ul>
</div>
输入超链接的链接href值
输入“
a:mail
”
=><a href="mailto:"></a>
输入“
a:link
”
=><a href="http://"></a>
输入标签的某个属性值
输入“span[style=color:red]
”
=><span style="color:red"></span>
输入“
span[style=color:red].Sp#sp
"=>
<span style="color:red" class="Sp" id="sp"></span>
同级标签输入多个使用乘法
输入“li*3
"
=><li></li>
<li></li>
<li></li>
参考文章:
VsCode中使用Emmet神器快速编写HTML代码
使用VsCode自带的Emmet语法的更多相关文章
- Emmet语法预览
Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器.Emmet 定义了一些缩写,当我们输入缩写代码后,按展开键(默认是 ...
- HTML/CSS 速写神器 Emmet语法
Emmet 是高效.快速编写 HTML 和 CSS 代码的一种插件,如果还不了解,请戳Emmet — the essential toolkit for web-developers,再根据你使用的编 ...
- Emmet语法大全手册
这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax Child: > nav>ul>li <nav> <ul ...
- Emmet 语法探析
Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...
- atom中vue高亮支持emmet语法
vue高亮插件: language-vue 支持emmet语法: 文件>用户键盘映射>keymap.cson添加: 'atom-text-editor[data-grammar~=&quo ...
- Emmet语法规则
HTML速写之Emmet语法规则 Emmet-写HTML/CSS快到飞起 在前端开发的过程中,最费时间的工作就是写 HTML.CSS 代码.一堆的标签.属性.括号等,头疼.这里推荐一个Emmet语法规 ...
- emmet语法列表
emmet语法 来源:https://docs.emmet.io/cheat-sheet/ Child: > nav>ul>li <nav> <ul> &l ...
- Emmet 语法大全(缩写语法/sublime 插件)
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
- 前端开发必备!Emmet语法
使用方法 emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段.(如果与已有的快捷键有冲突的话,可以 ...
随机推荐
- websocket+rabbitmq实战
1. websocket+rabbitmq实战 1.1. 前言 接到的需求是后台定向给指定web登录用户推送消息,且可能同一账号会登录多个客户端都要接收到消息 1.2. 遇坑 基于springbo ...
- 【dotNet Core】Swagger下简单的给WebApi分组
Startup.cs下ConfigureServices代码 这里主要在DocInclusionPredicate控制输出那些api. Startup.cs下Configure代码 给Controll ...
- 老司机教你用原生JDK 撸一个 MVC 框架!!!
其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...
- 好用的函数,assert,random.sample,seaborn tsplot, tensorflow.python.platform flags 等,持续更新
python 中好用的函数,random.sample等,持续更新 random.sample random.sample的函数原型为:random.sample(sequence, k),从指定序列 ...
- 在tomcat中加入SSL腾讯云证书的步骤
在tomcat中加入SSL证书,可以用https方式访问域名,增加域名的安全性.当然也有很多应用要求https访问,也是安全性的考虑.阿里云和腾讯云都提供SSL证书,还有一些其他的大公司也提供,我这里 ...
- Python爬虫入门教程 35-100 知乎网全站用户爬虫 scrapy
爬前叨叨 全站爬虫有时候做起来其实比较容易,因为规则相对容易建立起来,只需要做好反爬就可以了,今天咱们爬取知乎.继续使用scrapy当然对于这个小需求来说,使用scrapy确实用了牛刀,不过毕竟本博客 ...
- windows git 上传
1.打开git.bash 2. 告诉要传的git的用户名字 和邮箱地址 git config --global user.name "CardLove" git config -- ...
- JDBC 连接池的两种方式——dbcp & c3p0
申明:本文对于连接资源关闭采用自定义的 JDBCUtils 工具: package com.test.utils; import java.sql.Connection; import java.sq ...
- Spring之BeanFactory和FactoryBean接口的区别
目录 一.BeanFactory接口 二.FactoryBean接口 1.简单实现 2.增强实现 3.FactoryBean的实际使用案例 三.总结 @ Spring框架中的BeanFactory ...
- Docker中安装WordPress
前言 虚拟化技术风靡一时,还不层在生产环境中实践.只能是闭门造车,自己玩一玩了,接触了一下docker最简单的命令,这才自己搭建一个wordpress玩一玩. 安装wordpress之前先把本机的do ...