参考文章1
参考文章2
HTML简写,一种是在模板上改,一种是使用简写规则。
简写方法,主要是Emmet(常用项目)和Haml(ruby项目),本文主要介绍使用Emmet简写规则。
Emmet是一个插件,基本用法是简写形式+转化键。
- 转化键,不同IDE不同,MAC OS的是“tab键”,Wins是"<Ctr+y>,"(ctrl键+y键+逗号键)
- 简写形式举例(原理就是类似于css定位形式):
标签名(使用p代替举例)
1.p
例:输入p 按Tab键,===> <p></p>
2.p#id
例:p#addr 按Tab键,===> <p id="attr"></p>
3.p.class
例:p.addr 按Tab键,===> <p class="attr"></p>
4.p[属性]
例:p[a=attr] 按Tab键,===> <p a="attr"></p>
5.p{包含的内容}
例:p{显示的内容} 按Tab键,===> <p>显示的内容</p>
6.标签>子标签
例:div>p (代表p是div 的子元素)按Tab键,===><div> <p></p> </div>
7.标签+标签
例:div+p (代表p和div 是同级元素)按Tab键,===><div></div> <p></p>
8.重复N个标签(块)*数字
例:div>p*3 按Tab键,===><div> <p></p> <p></p> <p></p> </div>
9.标签属性自动编号,使用符号$
例:div#id$.class$$*3 按Tab键,===><div id="id1" class="class01"></div> <div id="id2" class="class02"></div> <div id="id3" class="class03"></div>
10.以上进行排列组合
例:html:5ul.menu>li*6>a[href=#]{显示内容$}
更多推荐
webstorm自动补全,即HTML标签简写规则
发布评论