Sublime Text插件:Emmet快捷键介绍

  • A+
所属分类:前端开发

Sublime Text是我目前最喜爱的一款代码编辑器。有着丰富的插件及超强的扩展功能。

Emmet (原先为Zen Coding) 是一个前端代码辅助神器,能够大大提高HTML/CSS代码编写的速度

 

下面分享一些常用的快捷键功能,自己制作了gif动画,超级详细哦!相信看完后一定会更加了解Emmet 的快捷键用法,可以在文章目录查找相关快捷键

默认按“tab”键生成,也可以直接“enter”

一、HTML

1、快速生成HTML格式文档类型

当输入html:4s,按下“tab”便会生成一个用于HTML4严格文档类型

输入html:5或者英文下的“!”会生成一个用于HTML5文档类型

Sublime Text插件:Emmet快捷键介绍

html:5 或者 ! 生成 HTML5 结构

html:xt 生成 HTML4 过渡型

html:4s 生成 HTML4 严格型

 

2、Head头部声明

当前语法默认字符集

meta:utf

当前页面的适应声明

meta:vp

一个兼容游览器的声明

meta:compat

引用外部CSS文件

link:css

引用脚本文件

script:src
Sublime Text插件:Emmet快捷键介绍

 

3、生成带ID 的标签

div#head
Sublime Text插件:Emmet快捷键介绍

 

4、生成带类样式的标签

p.header

div.one
Sublime Text插件:Emmet快捷键介绍

 

5、“a”标签的生成

a:link,带http://的快捷键
Sublime Text插件:Emmet快捷键介绍

 

6、兄弟标签(同级标签)

div+p+h5,如果同级之间是相同的标签:div*3
Sublime Text插件:Emmet快捷键介绍

 

7、 后代标签(下级标签)

div>ul>li

ul>li*3
Sublime Text插件:Emmet快捷键介绍

 

8、当前标签的父级(上级标签)

div>span^div#fu,“^”后面带父级的标签
Sublime Text插件:Emmet快捷键介绍

 

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

a{我是文本},“{我是花括号}”花括号内带文本
Sublime Text插件:Emmet快捷键介绍

 

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

div[style="color:red"],[style="color:red"],属性添加在内
Sublime Text插件:Emmet快捷键介绍

 

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

编号是“$”符号

div#header$*4

div#header*5>{编号$}
Sublime Text插件:Emmet快捷键介绍

倒着排序

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

  1. <!-- 倒着排序-->
  2. <div id="header">编号5</div>
  3. <div id="header">编号4</div>
  4. <div id="header">编号3</div>
  5. <div id="header">编号2</div>
  6. <div id="header">编号1</div>

 

指定序号开始

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

  1. <!-- 指定序号开始-->
  2. <div id="header">编号50</div>
  3. <div id="header">编号51</div>
  4. <div id="header">编号52</div>
  5. <div id="header">编号53</div>
  6. <div id="header">编号54</div>

 

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

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

 

  • 扫扫关注公众号
  • weinxin
  • 扫扫体验小程序
  • weinxin
亦枫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 呵 .少年 1

      觉得视频好些,直观演示