特若网络 工具插件 HTML速写插件Emmet

HTML速写插件Emmet

Emmet的前身是大名鼎鼎的Zen coding,可以极大的提高html的开发效率,而且很多编辑器都有针对他的…

Emmet的前身是大名鼎鼎的Zen coding,可以极大的提高html的开发效率,而且很多编辑器都有针对他的插件,如:notepad++、eclipse、vscode等等,下面以vscode为例做一个演示:

如图是就是用emmet插件快速创建了一个html的demo代码,下面我们继续演示其他的快捷指令:

当然emmet的语法还有很多,上面的动图只是做了个简单的演示,它可以让你在开发前端的时候可以更快的完成工作。



1.生成html
!,html:5
 
2.生成meta utf
meta:utf
 
3.生成meta viewport
meta:vp
 
4.生成IE兼容
meta:compat
 
5.生成Link
link:css
 
6.生成script
script:src
 
7.生成a标签详情
a:link a:mail
 
8.元素同级
h2>span^p
 
9.给重复标签排序
ul>li>a{导航$}
倒序ul>li>a{导航$@-}
从固定数值开始ul>li>a{导航$@2}
 
10.给标签创建文本内容
a{文本内容}
 
11.给标签加上属性
img[alt="图片名称"]
 
12.多个重复标签
ul>li*12
 
13.加上class或者id
p.demo
p#demo
 
14.a标签的详细
a:link
a:mail
本文原创,禁止转载。http://www.gjxblog.com/2020/02/15/167/

作者: GJX

广告位
联系我们

联系我们

邮箱: gjx.xin@qq.com

说明:投稿请邮箱联系我,可获得5-50的酬劳。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部