Sublime Text插件：Emmet快捷键介绍

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

引用脚本文件

script:src

 

3、生成带ID 的标签

div#head

 

4、生成带类样式的标签

p.header

div.one

 

5、“a”标签的生成

a:link，带http://的快捷键

 

6、兄弟标签（同级标签）

div+p+h5，如果同级之间是相同的标签：div*3

 

7、 后代标签（下级标签）

div>ul>li

ul>li*3

 

8、当前标签的父级（上级标签）

div>span^div#fu，“^”后面带父级的标签

 

9、生成标签，同时创建文本

a{我是文本}，“{我是花括号}”花括号内带文本

 

10、生成标签，同时创建标签属性

div[style="color:red"]，[style="color:red"]，属性添加在内

 

11、生成标签，同时加入编号

编号是“$”符号

div#header$*4

div#header*5>{编号$}

倒着排序

div#header*5>{编号$@-}

 

指定序号开始

div#header*5>{编号$@50}

 

先写这点了，更多的Emmet使用方法可以登陆官方网址查看。有时间在更新

顺便问下，你是觉得fig演示好呢？还是直观的代码好呢？个人感觉视频多了，一起跳动有些别扭。欢迎下方留言指教