IntelliJ家的编辑器都支持Emmet,输入部分约定的字符后再按tab键就会自动生成html标签,很爽的,这里总结一下使用方法:
1. 生成 HTML 文档初始结构
html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型
2. 生成带有 id 、class 的 HTML 标签
生成id为aaa的div:#aaa
生成id为aaa的span:span#aaa
3. 生成后代 >
div.aaa>ul>li可以生成:
4. 生成兄弟 +
div+p+bq 可以生成:
5.生成上级元素:^
div>ul>li^span 可以生成:
如果我想相对与 div 生成一个平级元素,那么就再上升一个层次,多用一个“^”符号: div>ul>li^^span
6. 重复生成多份:*
``ul>li*3``` 可以生成:
7. 生成分组:()
div>(header>ul>li*2>a)+footer>p 可以生成:
此外,分组还可以很方便的结合上面说的 “*” 符号生成重复结构:(div>dl>(dt+dd)*3)+footer>p
8. 生成自定义属性:[attr]
a[href="http://xxxx.com" title="这里是title"]
9. 对生成内容编号:$
ul>li.item$*5 可以生成
$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:
ul>li.item$$$*5 输出:
只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:
ul>li.item$@-*5
生成如下结构:
同样,我们也可以使用[@N] 指定开始的序号:
ul>li.item$@3*5
这样就会从 3 开始排序,生成如下代码:
配合上面倒序输出,可以这样写:
ul>li.item$@-3*5
生成的就是以 3 为底倒序:
10.生成文本内容:{}
clickhere
11. 隐式标签
隐式标签表示 Emmet 可以省略某些标签名,例如,声明一个带类的div,只需输入.item,就会生成
另外,Emmet 还会根据父标签进行判定,例如,在中输入ul>.item$*5,就可以生成:
下面是所有的隐式标签名称:
li:用于 ul 和 ol 中
tr:用于 table、tbody、thead 和 tfoot 中
td:用于 tr 中
option:用于 select 和 optgroup 中
12. 参考: