使用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键就可以拓展为完整的代码片段.(如果与已有的快捷键有冲突的话,可以 ...
随机推荐
- [Swift]LeetCode903. DI 序列的有效排列 | Valid Permutations for DI Sequence
We are given S, a length n string of characters from the set {'D', 'I'}. (These letters stand for &q ...
- [Swift]LeetCode956. 最高的广告牌 | Tallest Billboard
You are installing a billboard and want it to have the largest height. The billboard will have two ...
- vue框架中的Axios封装
function axios(options) { let promise = new Promise((resolve, reject) => { var xhr ...
- android 工具库
https://github.com/xybCoder/AndroidCommon android工具类集合
- Android 解压zip文件(支持中文)
过了n多天后,当再次使用原先博客上写的那篇: Android 压缩解压zip文件 去做zip包的解压的时候,出现了原来没有发现的很多问题.首先是中文汉字问题,使用java的zip包不能很好的解决解压问 ...
- shell之最常用的服务脚本
任务需求:以最简单的方式管理 /usr/local/php7/sbin/php-fpm -c /usr/local/php7/etc/php.ini 这条命令 包括启动停止重启 使用技术:shell脚 ...
- Linux命令收集
文件处理命令:ls 功能描述:显示目录文件 命令英文原意:list 命令所在路径:/bin/ls 执行权限:所有用户 语法: ls 选项[-ald] [文件或目录] -a 显示所有文件,包 ...
- Linux下 Vim(Vi)编辑器的使用
vi编辑器 vi是UNIX和类UNIX环境下的可用于创建文件的屏幕编辑器.vi有两种工作模式:命令模式和文本输入模式.启动vi需要输入vi,按[Spacebar]键并输入文件名后回车. 切换模式键 v ...
- [三] java虚拟机 JVM字节码 指令集 bytecode 操作码 指令分类用法 助记符
说明,本文的目的在于从宏观逻辑上介绍清楚绝大多数的字节码指令的含义以及分类 只要认真阅读本文必然能够对字节码指令集有所了解 如果需要了解清楚每一个指令的具体详尽用法,请参阅虚拟机规范 指令简介 计算机 ...
- Perl IO:read()函数
read()函数 read()函数用于从文件句柄中读取指定字节数的数据并写入到一个标量中.如果文件句柄是以Unicode方式打开的,则表示读取指定字符数而非字节数. 有两种read方式: read F ...