Sublime Text是我目前最喜爱的一款代码编辑器。有着丰富的插件及超强的扩展功能。
Emmet (原先为Zen Coding) 是一个前端代码辅助神器,能够大大提高HTML/CSS代码编写的速度
下面分享一些常用的快捷键功能,自己制作了gif动画,超级详细哦!相信看完后一定会更加了解Emmet 的快捷键用法,可以在文章目录查找相关快捷键
默认按“tab
”键生成,也可以直接“enter”
一、HTML
1、快速生成HTML格式文档类型
当输入html:4s
,按下“tab”便会生成一个用于HTML4严格文档类型
输入html:5
或者英文下的“!”会生成一个用于HTML5文档类型
html:5 或者 ! 生成 HTML5 结构
html:xt 生成 HTML4 过渡型
html:4s 生成 HTML4 严格型
2、Head头部声明
当前语法默认字符集
meta:
utf
当前页面的适应声明
meta:
vp
一个兼容游览器的声明
meta:
compat
引用外部CSS文件
link:css
引用脚本文件
3、生成带ID 的标签
4、生成带类样式的标签
p.
header
5、“a”标签的生成
6、兄弟标签(同级标签)
7、 后代标签(下级标签)
div>ul>li
8、当前标签的父级(上级标签)
9、生成标签,同时创建文本
10、生成标签,同时创建标签属性
div[style="color:red"]
,[style="color:red"],属性添加在内
11、生成标签,同时加入编号
编号是“$”符号
div#
header$*4
倒着排序
div#header*5>{编号$@-}
- <!-- 倒着排序-->
- <div id="header">编号5</div>
- <div id="header">编号4</div>
- <div id="header">编号3</div>
- <div id="header">编号2</div>
- <div id="header">编号1</div>
指定序号开始
div#header*5>{编号$@50}
- <!-- 指定序号开始-->
- <div id="header">编号50</div>
- <div id="header">编号51</div>
- <div id="header">编号52</div>
- <div id="header">编号53</div>
- <div id="header">编号54</div>
先写这点了,更多的Emmet使用方法可以登陆官方网址查看。有时间在更新
顺便问下,你是觉得fig演示好呢?还是直观的代码好呢?个人感觉视频多了,一起跳动有些别扭。欢迎下方留言指教
继续阅读
- 扫扫关注公众号
-
- 扫扫体验小程序
-
2017年10月18日 下午8:24 1F
觉得视频好些,直观演示