Emmet简介
Emmet它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器,可以提供一些功能和快捷方式,加快开发速度。在Emmet中包括HTML语法和CSS语法两个部分。
HTML语法
📖官方文档 HTML Abbreviations
初始化HTML结构
输入!
再按TAB
键即可生成HTML初始化结构:
生成带id
的标签
使用标签名和操作符#
即可生成一个带有id
的标签,如输入button#main
:
当标签为div
时,直接输入#main
即可生成id
为main的div
标签:
生成带有class的标签
使用标签名和操作符.
,即可生成一个带有class
的标签,如输入button.mian
:
类似,当标签为div
时,可以省略div
,直接输入.main
即可生成class
为main的div
标签
生成带有属性的标签
使用操作符[]
可生成带有属性的标签,如输入button[name=demo data=btn1]
。生成带div
的标签同样可以省略div
直接输入[name=demo data=d1]
生成多个相同的标签
使用标签名和操作符*
后面数字,如果不带数字默认生成一个。如输入div*3
:
生成标签属性带数字编号
使用操作符$
即可生成带有数字编号的标签属性值,如输入li.bar$*3
更改标签属性带数字的顺序
使用@
修饰符,可以更改数字的顺序(升序或降序)同时还可以修改数字的起始值。
- ul>li.item$@-*6
- ul>li.item$@2*5
生成标签内文本
使用操作符{}
即可生成带文本内容的标签。如输入div{我是文本内容}
子节点生成
使用操作符>
即可生成一对分子节点,如输入div>span
兄弟节点生成
使用操作符+
即可生成一对兄弟节点,如输入.container+.content
父级别兄弟节点
使用操作符^
即可生成一个父级兄弟节点,父级兄弟节点生成通常和子节点生成同时使用,如输入.container>.content^p
还可以使用多个^
操作符来返回到多个父级。如输入div>ul>li^^p
分组节点
使用操作符()
即可将部分节点分组生成一个整体,将()
内的节点与后面的节点隔离,避免产生嵌套关系。如输入div>(ul>li*3)+nav
上面例子div>(ul>li*3)+nav
中(ul>li*3)
是一个整体,这个整体的兄弟节点是nav
。如果不加上()
那么生成的片段如下:
<div>
<ul>
<li></li>
<li></li>
<li></li>
<nav></nav>
</ul>
</div>
可以看出nav
成为了li
的兄弟节点。
Lorem Ipsum 生成器
lorem可以自动生成虚拟文本来测试HTML模板在真实数据中的外观。
- 输入文本
ul.list>li.content*4>lorem*10
- Lorem的隐式转换
- Emmet 都会查看父标签名称。以下是它如何解析某些父元素的名称:
- li对于ul和ol
- tr对于table, tbody,thead和tfoot
- td为了tr
- option对于select和optgroup
输入文本ul.list>lorem10.content*4
- Emmet 都会查看父标签名称。以下是它如何解析某些父元素的名称:
CSS语法
📖官方文档 CSS Abbreviations
width和height
- width:
w100
—>width:100px
w100p
—>width:100%
w100vh
—>width:100vh
w100vw
—>width: 100vw
w100e
—>width: 100em
w100e
—>width: 100ex
- height
- 和
width
同理,只需要将w
换为h
- 和
margin 和 padding
- margin
m10
—>marign:10px
m10px10px10px10px
—>margin: 10px 10px 10px 10px
- padding
- 和
margin
同理,只需要将m
换为h
- 和
生成同级属性和!重要修饰符
操作符+
:生成同级样式;操作符!
生成!important
。输入代码p10!+m10!
颜色值
使用操作符#
,此操作符是一个值分隔符。
c#3
—>color: #333
bd1#0s
---->border:1px #000 solid
表示十六进制颜色值可以写一个、两个、三个或六个字符:
#1
→#111111
#e0
→#e0e0e0
#fc0
→#ffcc00
属性值生成
- 输入
jc:sa
---->justify-content: space-around
- 输入
ai:c
---->align-items: center
- 输入
ta:c
---->text-align: center
- 输入
d:f
---->display: flex
- 输入
t:a
---->top: auto
- …
通过上面可以发现,Emmet
中属性生成的格式为:
属性名各个单词首字母:具体值各个单词首字母