介绍
Emmet语法是针对HTML,CSS的一种快速生成代码的语法
能够帮助我们用最少的代码生成复杂冗余的代码
使用Emmet语法写HTML,效率非常非常高
只要编辑器安装对应的插件即可
语法
HTML结构
只需要按下!
号,然后按一下Tab
键,就能生成HTML的基本结构
自增符
$
美元符号,这个符号是一个自增符,默认从1开始
快速生成标签
标签名#id/.class{文本内容}*数量
例如
div.ss*3
p#first{这是文本}
div.class${我是第$个div}*3
多个不同标签
^
上级节点
+
兄弟节点
>
父子节点
例子
div > p >span
div+h2+p>ul>li
div>p+h2>ul^h1
分组
还可以使用()
来进行分组
div>(ul>li>span)+p
属性
把标签的属性写在[]
中
input[type=radio name=abc]*3
隐式标签
默认的标签是div
.first
在一些默认具有父子结构的标签
例如:
ul
和 li
select
和 option
ol
和 li
table
和 tr
和 td
举个例子
ul>.id$*3
table#Table>#tr$*3>#$*3
这个语法,越用越熟练