Sublime Text Emmet插件 : 生成html，css 快捷键
（输入下面简写，按Tab键可触发效果,或者 ctrl + e）
html缩写
输入 !后 按下 ctrl + e : 结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
自动生成 id 或者 class 或者属性
id : div#dd + 按下ctrl + e =======> <div id="dd"></div>
class: div.dd + 按下ctrl + e =======> <div class="dd"></div>
attr: div[dd=11] + 按下ctrl + e =======> <div dd="11"></div>
生成多个元素
div*3 按下 ctrl + e
<div></div>
<div></div>
<div></div>
生成子元素
div>span 按下 ctrl + e
<div><span></span></div>
同级标签
div+span 按下 ctrl + e
<div></div>
<span></span>
分组
(.foo>h1)+(.bar>h2) 按下 ctrl + e
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
隐藏标签
在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>
- li：用于ul和ol中
- tr：用于table、tbody、thead和tfoot中
- td：用于tr中
- option：用于select和optgroup中
组合例子：
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
css
（输入下面简写，按Tab键可触发效果,或者 ctrl + e）
高宽缩写：
- w100 结果 width: 100px;
- w10r 结果 width: 10rem;
- w10e 结果 width: 10em;
- w10p 结果 width: 10%;
- h100 结果 height: 100px;
- h10r 结果 height: 10rem;
- h10e 结果 height: 10em;
- h10p 结果 height: 10%;
- p 表示%
- e 表示 em
- x 表示 ex
- r 表示 rem
混合
h10p+m5e ：
height: 10%;
margin: 5em;
其它
@f :
@font-face {
font-family:;
src:url();
}@f+:
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;}
- oh : overflow: hidden;
- bg : background: #000;
- bgi : background-image: url();
- mg : margin:
- mgl5 : margin-left:5px;
- pd : padding:
- pdr4 : padding-right:4px;
Ctrl+U ： 即可让 Emmet 自动读取图片的尺寸添加上
用 Shift+Ctrl+. 和 Shift+Ctrl+,分别向下或者向上移动，选取的是一整块，先从标签开始，再是整个属性，再是属性值
lorem ： 作为测试数据填充用的 ， 只需要使用 lorem 这一条命令即可，敲击 Tab 键之后
语法及标签缩写方法如下：
后代：>
缩写：nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>兄弟：+
缩写：div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>上级：^
缩写：div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>缩写：div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>分组：()
缩写：div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>缩写：(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>乘法：*
缩写：ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>自增符号：$
缩写：ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>缩写：h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>缩写：ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>缩写：ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>缩写：ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>ID和类属性
缩写：#header
<div id="header"></div>缩写：.title
<div class="title"></div>缩写：form#search.wide
<form id="search" class="wide"></form>缩写：p.class1.class2.class3
<p class="class1 class2 class3"></p>自定义属性
缩写：p[title="Hello world"]
<p title="Hello world"></p>缩写：td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>缩写：[a='value1' b="value2"]
<div a="value1" b="value2"></div>文本：{}
缩写：a{Click me}
<a href="">Click me</a>缩写：p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>隐式标签
缩写：.class
<div class="class"></div>缩写：em>.class
<em><span class="class"></span></em>缩写：ul>.class
<ul>
<li class="class"></li>
</ul>缩写：table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>HTML
所有未知的缩写都会转换成标签，例如，foo → <foo></foo>
缩写：!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>缩写：a
<a href=""></a>缩写：a:link
<a href="http://"></a>缩写：a:mail
<a href="mailto:"></a>缩写：abbr
<abbr title=""></abbr>缩写：acronym
<acronym title=""></acronym>缩写：base
<base href="" />缩写：basefont
<basefont />缩写：br
<br />缩写：frame
<frame />缩写：hr
<hr />缩写：bdo
<bdo dir=""></bdo>缩写：bdo:r
<bdo dir="rtl"></bdo>缩写：bdo:l
<bdo dir="ltr"></bdo>缩写：col
<col />缩写：link
<link rel="stylesheet" href="" />缩写：link:css
<link rel="stylesheet" href="style.css" />缩写：link:print
<link rel="stylesheet" href="print.css" media="print" />缩写：link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />缩写：link:touch
<link rel="apple-touch-icon" href="favicon.png" />缩写：link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />缩写：link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />缩写：meta
<meta />缩写：meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />缩写：meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />缩写：meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />缩写：meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />缩写：style
<style></style>缩写：script
<script></script>缩写：script:src
<script src=""></script>缩写：img
<img src="" alt="" />缩写：iframe
<iframe src="" frameborder="0"></iframe>缩写：embed
<embed src="" type="" />缩写：object
<object data="" type=""></object>缩写：param
<param name="" value="" />缩写：map
<map name=""></map>缩写：area
<area shape="" coords="" href="" alt="" />缩写：area:d
<area shape="default" href="" alt="" />缩写：area:c
<area shape="circle" coords="" href="" alt="" />缩写：area:r
<area shape="rect" coords="" href="" alt="" />缩写：area:p
<area shape="poly" coords="" href="" alt="" />缩写：form
<form action=""></form>缩写：form:get
<form action="" method="get"></form>缩写：form:post
<form action="" method="post"></form>缩写：label
<label for=""></label>缩写：input
<input type="text" />缩写：inp
<input type="text" name="" id="" />缩写：input:hidden
别名：input[type=hidden name]
<input type="hidden" name="" />缩写：input:h
别名：input:hidden
<input type="hidden" name="" />缩写：input:text, input:t
别名：inp
<input type="text" name="" id="" />缩写：input:search
别名：inp[type=search]
<input type="search" name="" id="" />缩写：input:email
别名：inp[type=email]
<input type="email" name="" id="" />缩写：input:url
别名：inp[type=url]
<input type="url" name="" id="" />缩写：input:password
别名：inp[type=password]
<input type="password" name="" id="" />缩写：input:p
别名：input:password
<input type="password" name="" id="" />缩写：input:datetime
别名：inp[type=datetime]
<input type="datetime" name="" id="" />缩写：input:date
别名：inp[type=date]
<input type="date" name="" id="" />缩写：input:datetime-local
别名：inp[type=datetime-local]
<input type="datetime-local" name="" id="" />缩写：input:month
别名：inp[type=month]
<input type="month" name="" id="" />缩写：input:week
别名：inp[type=week]
<input type="week" name="" id="" />缩写：input:time
别名：inp[type=time]
<input type="time" name="" id="" />缩写：input:number
别名：inp[type=number]
<input type="number" name="" id="" />缩写：input:color
别名：inp[type=color]
<input type="color" name="" id="" />缩写：input:checkbox
别名：inp[type=checkbox]
<input type="checkbox" name="" id="" />缩写：input:c
别名：input:checkbox
<input type="checkbox" name="" id="" />缩写：input:radio
别名：inp[type=radio]
<input type="radio" name="" id="" />缩写：input:r
别名：input:radio
<input type="radio" name="" id="" />缩写：input:range
别名：inp[type=range]
<input type="range" name="" id="" />缩写：input:file
别名：inp[type=file]
<input type="file" name="" id="" />缩写：input:f
别名：input:file
<input type="file" name="" id="" />缩写：input:submit
<input type="submit" value="" />缩写：input:s
别名：input:submit
<input type="submit" value="" />缩写：input:image
<input type="image" src="" alt="" />缩写：input:i
别名：input:image
<input type="image" src="" alt="" />缩写：input:button
<input type="button" value="" />缩写：input:b
别名：input:button
<input type="button" value="" />缩写：isindex
<isindex />缩写：input:reset
别名：input:button[type=reset]
<input type="reset" value="" />缩写：select
<select name="" id=""></select>缩写：option
<option value=""></option>缩写：textarea
<textarea name="" id="" cols="30" rows="10"></textarea>缩写：menu:context
别名：menu[type=context]>
<menu type="context"></menu>缩写：menu:c
别名：menu:context
<menu type="context"></menu>缩写：menu:toolbar
别名：menu[type=toolbar]>
<menu type="toolbar"></menu>缩写：menu:t
别名：menu:toolbar
<menu type="toolbar"></menu>缩写：video
<video src=""></video>缩写：audio
<audio src=""></audio>缩写：html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>缩写：keygen
<keygen />缩写：command
<command />缩写：bq
别名：blockquote
<blockquote></blockquote>缩写：acr
别名：acronym
<acronym title=""></acronym>缩写：fig
别名：figure
<figure></figure>缩写：figc
别名：figcaption
<figcaption></figcaption>缩写：ifr
别名：iframe
<iframe src="" frameborder="0"></iframe>缩写：emb
别名：embed
<embed src="" type="" />缩写：obj
别名：object
<object data="" type=""></object>缩写：src
别名：source
<source></source>缩写：cap
别名：caption
<caption></caption>缩写：colg
别名：colgroup
<colgroup></colgroup>缩写：fst, fset
别名：fieldset
<fieldset></fieldset>缩写：btn
别名：button
<button></button>缩写：btn:b
别名：button[type=button]
<button type="button"></button>缩写：btn:r
别名：button[type=reset]
<button type="reset"></button>缩写：btn:s
别名：button[type=submit]
<button type="submit"></button>
Sublime Text Emmet插件 : 生成html，css 快捷键的更多相关文章
- sublime Text emmet插件使用手册
转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工 ...
- 转: sublime text常用插件和快捷键
Sublime Text 2是一个轻量.简洁.高效.跨平台的编辑器.博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就 ...
- Sublime Text通过插件编译Sass为CSS及中文编译异常解决
虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...
- Sublime Text 3 插件整理
Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述.界面整洁美观.文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记.Sublime Text还支持Mac.Windows和 ...
- 开发者常用的 Sublime Text 3 插件
1.官网下载 Sublime Text 3 (已有安装包的,请忽略) Sublime Text 官网下载地址 : http://www.sublimetext.com/ 2.打开 Sublime Te ...
- 开发者最常用的 8 款 Sublime Text 3 插件
转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0228/177.html?1456925631Sublime Text作为一个尽为人知的代码编辑器, ...
- 安装Sublime Text 3插件的方法
直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Contr ...
- sublime text常用插件
这个比较重要,不会装插件的时候找了好久 sublime text常用插件 1.插件的安装方法 第一种:用package control 这个是用来管理插件的,必备啊,安装package control ...
- 推荐！Sublime Text 最佳插件列表
本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...
随机推荐
- P3272 [SCOI2011]地板
\(\color{#0066ff}{ 题目描述 }\) lxhgww的小名叫"小L",这是因为他总是很喜欢L型的东西.小L家的客厅是一个R*C的矩形,现在他想用L型的地板来铺满整个 ...
- City Game UVALive - 3029（悬线法求最大子矩阵）
题意:多组数据(国外题好像都这样),每次n*m矩形,F表示空地,R表示障碍 求最大子矩阵(悬线法模板) 把每个格子向上延伸的空格看做一条悬线 以le[i][j],re[i][j],up[i][j]分别 ...
- 洛谷2685 [TJOI2012]桥
[TJOI2012]桥 题目大意:给定一无向图,求删除一条边后1到n最短路的最大值,以及方案数. 做法:我们先从1为起点.从n为起点跑两边dij,获得每一个点到起点1.终点n的最短距离,其实距离和边权 ...
- 解决三星官方移植的内核默认是没有打开支持V4L USB devices
在linux比较新的kernel,都标配了各类摄像头的驱动支持,不用我们自己移植驱动,只需通过make menuconfig配置内核支持我们所需的摄像头类型即可.以下是在三星官方内核中配置V ...
- js判断字符串是否有下划线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Pandas基本功能详解
Pandas基本功能详解 Pandas Pandas基本功能详解 |轻松玩转Pandas(2) 参考:Pandas基本功能详解 |轻松玩转Pandas(2)
- 75th LeetCode Weekly Contest Rotate String
We are given two strings, A and B. A shift on A consists of taking string A and moving the leftmost ...
- Linux系统调用接口添加简单示例
1. Linux体系结构 Linux系统的地址空间分为用户空间和内核空间,通过系统调用和硬件中断能够完成从用户空间到内核空间的转移. 2. 系统调用接口 ① 一般情况下,用户进程不能访问内核空间.Li ...
- 关于在JS中设置标签属性
Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性.且适用于自定义属性. setAttribute("属性名",属性值“”):这个是用来设置标签属性的: re ...
- bios-----> grub
系统有两块硬盘, 第一块安装的win7, 第二块安装ubuntu 默认从sda加载grub 如果在bios页面选择从sdb启动,会找不到grub 进入原来的sda系统, grub-install / ...