一篇文章搞懂【Emmet】语法规则(前端必备技能)
前端人员编写网页代码时可以依靠一些编辑器的语法提示加快编写速度。大多数编辑器也提供emmet插件来更快的编写HTML和css代码。emmet的语法规则比较简单易理解可以极大的提高编码速度,基本上是前端开发人员必备的一项技能了。下面简单介绍下常用的语法规则和效果。
以VScode编辑器为例
1.初始化HTML结构
新建一个html结构后可以使用!
+tab
建初始化HTML结构
- 输入:
- 按tab或回车后:
2.id(#)和class(.)
生成一个带有id或者类名的emmet语法:
id:
div#main
+tab
class:
div.head
+tab
;多个类可以继续追加div.head.box
+tab
组合:
div#main2.body
+tab
和div#main2.body.box
+tab
注意:输入完一行要紧接着按tab
!!!!
输入
div#main
div.head
div.head.box
div#main2.body
div#main2.body.box
每一行后面紧接着按tab
后:
3.子节点(>)、上级节点(^)、兄弟结点(+)
子节点(>)
使用>
连接两个标签名,后者会加在前者的内部(即成为前者的子元素)
例如输入如下:
div>p
div>p>span
每一行按tab
会生成:
上级节点(^)
与>
符号常常同时使用;在^
符号后的元素名会与前一各元素的父级元素同级。^
可以连续使用,表示上升多级。
具体看实例:
div>p^adiv>ul>li^pdiv>ul>li^^p
每行会生成:
兄弟结点(+)
被+
符号相连的元素最后生成同级元素。
输入例子:
div+pdiv+a+p
结果:
4.重复(*)
有时候需要生成多个同样的标签,可以直接yong*
生成而不用一个个复制。
输入例子:
h2*5ul>li*6
结果:
5.属性([attr])
与id和class比较类似,是为元素添加其它任意属性的。
例子:
div[name='main']a[href="www.baidu.com" name="baidu"]
结果:
6.编号($)
动态生成的序号,$
代表一位数字,后面跟的*
和数字代表从1递增到紧跟的数字
例子:
ul>li.item$*6
结果:
补充:
- 可以设置多位数字(一个
$
代表一位数字,就可以连写多个会在前面补0)
例子:
ul>li.item$$$*6
结果:
- 可以在
$
后加@-
实现倒序
例子:
ul>li.item$@-*6
结果:
- 在
$
后面添加@N
改变编号的起始基数
例子:(代表从3基数开始,生成共5个)
ul>li.item$@3*5
结果:
7.文本({})
元素后面使用{}
符号可以在元素内部加入{}
内容。
例子:
p{一段文本}a[href="www.baidu.com"]{百度}
结果:
8.分组(())
可以组合代码块,写较长的emmet语法时用来分隔。
div>(ul>li>a[href="www.baidu.com"])+p
结果:
综合:
这里有三个综合的题目,大家只看emmet语法看看能不能猜到会生成什么结构呢?
div#main>ul>li.item$*6
(div#head>ul>li>a[href="www.baidu.com"])+(div#main>p*6{$})+div#footer{版权}
div#main.main.box>(ul>(li>a[href="www.baidu.com"]{百度})*6)+p*5
虽然很简单但是不要忘记多多练习嗷!!!
一篇文章搞懂【Emmet】语法规则(前端必备技能)相关推荐
- 一篇文章搞懂Java架构师的核心技能及薪资!
Java架构师一般的薪资是多少?高不高?一般来讲,Java架构师是一个比较全面的职位,它既需要学习Java开发工具.性能优化.源码分析.分布式架构.微服务架构和多线程并发编程等基础技术,又需要有组织能 ...
- c++ 计算正弦的近似值_一篇文章搞懂正弦保真性
本文介绍数字信号处理中"正弦保真性"这一概念,想要更好地理解本文所述内容,建议读者先阅读<一篇文章搞懂卷积>. 正弦保真性定义 一个正弦信号作为线性时不变系统的输入时, ...
- 一篇文章搞懂filebeat(ELK)
一篇文章搞懂filebeat(ELK) https://www.cnblogs.com/zsql/p/13137833.html 目录 一.filebeat是什么 1.1.filebeat和beats ...
- 组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...
- reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
- 一篇文章搞懂架构师的核心技能
" 这是架构师系列的第一篇:核心技能,希望这个系列能完全揭示架构师这个职位:我先从核心技能开始,后续还有架构师之路,架构实战等架构师系列文章. 本文作者 陈睿 优知学院创始人,前携程定制旅游 ...
- 【一篇文章搞懂】什么是分布式锁?为什么要用分布式锁?看这篇文章准没错!
简介 HikariCP 是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,和 dr ...
- 一篇文章搞懂算法基础
源码地址 https://github.com/javanan/DataStructure 目录 时间复杂度介绍 空间复杂度介绍 递归算法与非递归算法区别和转换 折半查找/二分查找算法 链表实现 反转 ...
- 一篇文章搞懂STL中的空间配置器allocator(原创,多图,易懂)
Table of Contents 0.引入 1.标准的空间配置器allocator 2.更为高效的空间配置器alloc 2.1----对象的构造与析构 2.1.1 对象的构造:::construct ...
最新文章
- WPF 动画显示控件
- 【学习笔记】Sass入门指南
- IE6下png图片透明代码
- OpenCV gapi模块绘制的实例(附完整代码)
- Spring JDBC 框架一个最简单的Hello World级别的例子
- 操作系统原理之进程调度与死锁(三)
- 印尼发生洪灾和山体滑坡 致多人死亡数千人撤离
- Firebug Tutorial (Section 3): Script Tab :Javascript Debugging
- Redis压缩列表原理与应用分析
- 浏览器快捷键_浏览器快捷键,让你事半功倍
- jdk安装与调试笔记 20200202
- 物流车辆数据在金融科技的应用
- 搭建自己的Nuget服务器
- 专访企业QQ SaaS团队,谈企业级LNMP架构设计
- mysql常量求和_Mysql之:count(*)、count(常量)、count(字段)的区别
- 【论文笔记】Rich feature hierarchies for accurate object detection and semantic segmentation
- 计算机电脑密码设置程序,如何设置计算机开机密码和屏幕保护程序密码
- 实训笔记20190807--数据分析
- 试验设计与因果分析感想
- python 拼音排序_Python实现针对中文排序的方法