Emmet语法预览
Emmet 是一个能提高前端开发效率的编辑器插件，支持 Sublime，Atom，TextMate，Nodepad++ 等主流编辑器。Emmet 定义了一些缩写，当我们输入缩写代码后，按展开键（默认是 Tab 键）后会展开成完整的代码。如，我们在 HTML 文件中输入 ul.list>li{第$个}*2 ， 然后按展开键，会展开成如下代码
<ul class="list">
<li>第1个</li>
<li>第2个</li>
</ul>
在 CSS 文件中输入 posa 会展开成
position: absolute;
是不是很方便~
Emmet 的 HTML 缩写支持 CSS 选择器风格的写法。如我们要写一个 id 为 box， 类名为 news-box 的div，div 下面有 a元素，其 href 为 xxx 。只需这么写 div#box.news-box>a[href=xxx] ，和 CSS 选择器的写法完全一致。
下面就介绍下 Emmet 提供的一些常用的缩写。
HTML 简写
html:5 展开为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
link:css 展开为
<link rel="stylesheet" href="style.css">
btn 展开为
<button></button>
select+ 展开为
<select name="" id="">
<option value=""></option>
</select>
ul+ 展开为
<ul>
<li></li>
</ul>
ol+ 展开为
<ol>
<li></li>
</ol>
dl+ 展开为
<dl>
<dt></dt>
<dd></dd>
</dl>
table+ 展开为
<table>
<tr>
<td></td>
</tr>
</table>
tr+ 展开为
<tr>
<td></td>
</tr>
cc:ie6 展开为
<!--[if lte IE 6]> <![endif]-->
cc:ie 展开为
<!--[if IE]> <![endif]-->
cc:noie 展开为
<!--[if !IE]><!--> <!--<![endif]-->
CSS 缩写
盒模型相关
- d 展开为 display: block;
- d:n 展开为 display:none;
- d:f 展开为 display:flex;
- d:i 展开为 display:inline;
- d:ib 展开为 display: inline-block;
- fl 展开为 float: left;
- fl:r 展开为 float: right;
- fl:n 展开为 float: none;
- pos 展开为 position:relative;
- pos:a 展开为 position: absolute;
- pos:f 展开为 position:fixed;
- m 展开为 margin: ;
- m:a 展开为 margin: auto;
- mt 展开为 margin-top: ; 类型的还有 mt,mb,mr
- p 展开为 padding: ; 其他和margin类型
- bxz 展开为 box-sizing: border-box;
字体相关
- f 展开为 font: ;
- fz 展开为 font-size: ;
- ff 展开为 font-family: ;
- fs 展开为 font-style: italic;
文本相关
- va 展开为 vertical-align: top;
- va:m 展开为 vertical-align: middle;
- ta 展开为 text-align: left;
- ta:c 展开为 text-align: center;
- td:n 展开为 text-decoration: none;
- wos 展开为 word-spacing: ;
- c 展开为 color: #000;
- c:r 展开为 color: rgb(0, 0, 0);
- c:ra 展开为 color: rgba(0, 0, 0, .5);
- op 展开为 opacity: ;
- op+ 展开为
opacity: ;
filter: alpha(opacity=);
背景
- bg 展开为 background: #000;
- bg+ 展开为 background: #fff url() 0 0 no-repeat;
- bgc 展开为
- bgi 展开为 background-image: url();
- bgr 展开为 background-repeat: ;
- bgp 展开为 background-position: 0 0;
- bgsz 展开为 background-size: ;
边框和轮廓
- bd 展开为 border: ;
- bd+ 展开为 border: 1px solid #000;
- bd:n 展开为 border: none;
- bdl 展开为 border-left: ;
- bdl+ 展开为 border-left: 1px solid #000;
- bdrs 展开为 border-radius: ;
- bdc:t 展开为 border-color: transparent;
- ol 展开为 outline: ;
列表
- lis 展开为 list-style: ;
- lst 展开为 list-style-type: ;
- list:n 展开为 list-style-type:none;
其他
- ! 展开为 !important
- anim 展开为 animation: ;
- anim- 展开为 animation:name duration timing-function delay iteration-count direction fill-mode;
- trf 展开为 transform: ;
- trf:r 展开为 transform: rotate(angle);
- trf:rx 展开为 transform: rotateX(angle);
- trf:sc 展开为 transform: scale(x, y);
- trf:t 展开为 transform: translate(x, y);
- trf:t3 展开为 transform: translate3d(tx, ty, tz);
- trs 展开为 transition: prop time;
- us 展开为 user-select: none;
@m 展开为
@media screen {
}
@kf 展开为
@keyframes identifier {
from { }
to { }
}
以上缩写展开时，都会一起生成带浏览器前缀（vendor-prefixed）的。
Emmet 的命令
- 展开缩写 Tab
- 每按一下，扩大选择范围：选择当前元素及其父级元素 ⌃D / Ctrl+,
- 每按一下，缩小选择范围：选择当前元素的第一个字元素 ⌃J / Shift+Ctrl+0
- 光标移动移动至匹配的标签，多次按时在标签内容的结尾和标签的头部位置切换 – ⇧⌃T / Ctrl+Alt+J
- 用简写来包裹选中内容 — ⌃W / Shift+Ctrl+G
- 光标到下一个编辑点。编辑点指的是，没有内容元素内部 — Ctrl+Alt+→ 或 Ctrl+Alt+←
- 选择元素。多次按会在元素，元素属性，元素属性值之间切换 – ⇧⌘. 或 ⇧⌘, / Shift+Ctrl+. 或 Shift+Ctrl+,
- 删除标签，但不包括其innerHTML的内容 – ⌘' / Shift+Ctrl+;
- 数学表达式求值。如：3+2 求值 5 — ⇧⌘Y / Shift+Ctrl+Y
- 重构CSS3带浏览器前缀（vendor-prefixed）的值 – ⇧⌘R / Shift+Ctrl+R
- 修改标签的名称 – ⇧⌘K / Shift+Ctrl+'
增减数值类别
- 增加1: Ctrl+↑ 这个与Mac的按键冲突，需要修改快捷键
- 减少1: Ctrl+↓
- 增加0.1: Alt+↑
- 减少0.1: Alt+↓
- 增加10: ⌥⌘↑ / Shift+Alt+↑
- 减少10: ⌥⌘↓ / Shift+Alt+↓
- ⌃W / Shift+Ctrl+G
注：/ 左边是Mac的快捷键，右边是Windows的快捷键
浏览器前缀补全
-浏览器前缀-属性名其中浏览器前缀包括
- w: webkit
- m: moz
- s: ms
- o: o
例如： 输入 -wm-somepop + Tab 展开为
-webkit-somepop: ;
-moz-somepop: ;
somepop: ;
渐变（Gradients）
lg(属性)如 bg:lg(to right, #f60,#f00); + Tab 展开为
background:-webkit-linear-gradient(left, #f60, #f00);
background:-o-linear-gradient(left, #f60, #f00);
background:linear-gradient(to right, #f60, #f00);
附：Mac上图标与按键的对应
- ⌘ Command 键
- ⌃ Control 键
- ⌥ Option 键
- ⇧ Shift 键
- ⇪ Caps Lock
- fn 功能键
引用：http://www.itnose.net/detail/6495159.html
想了解更多见 Emmet 文档中心 -> http://docs.emmet.io/ 。
Emmet语法大全手册（所有快捷键）：http://www.cnblogs.com/daysme/articles/6117462.html
简洁版：http://www.cnblogs.com/daysme/articles/6117700.html
动态图演示：http://www.cnblogs.com/daysme/articles/6117745.html
Emmet语法预览的更多相关文章
- 【Markdown】notepad++ 支持 markdown语法、预览
Notepad++中支持Markdown 最近在学习Markdown语言的使用,很想在XP主机上使用Markdown的离线编辑器,但MarkdownPad.作业部分的离线客户端都不能再XP上运行, ...
- Notepad++中实现Markdown语法高亮与实时预览
Notepad ++是一个十分强大的编辑器,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码.Notepad ++不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的 ...
- 如何将Emmet安装到到 Sublime text 3？第二部分该插件还能让我们自定义快捷键呼出某个浏览器以预览页面
看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: ...
- sublime 如何安装插件实现高效输入，如何支持markdown 语法，并实时预览
啊,一直想鼓捣markdown的语法,但是配置什么的有点麻烦.不过用起来的话,真心顺手.无需考虑格式与语法点来点去影响效率, 用心去搬砖,用脚修bug 一.初识 Package Control 首先, ...
- Vim安装插件支持 MarkDown 语法、实时预览等
使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...
- Visual Studio Code预览版Ver 0.3.0试用体验
当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...
- sublime3下载安装及常用插件、浏览器预览设置
之前与学习前端有关的软件都安装在了实验室电脑上,最近由于要放寒假(也许我寒假回去会学习呢),于是得在笔记本电脑上重新安装一遍.几个软件各种出错,花了一下午才安装好,必须记录下来啊! 这篇文章主要介绍s ...
- markdown预览-快速入门
最近要写文档,领导指定用markdown. 这个两三年前用过两次的神器工具,都忘的差不多了. 为了熟练一点这个技能,决定好好的重新学一次. 于是乎:看快速入门文档 ...30分钟...看完文档发现要来 ...
- C# 6.0 功能预览 （二）
在Language Feature Status上面看到,其实更新的并不是特别多,为了不会误导看了C# 6.0 功能预览 (一)的园友,现在把官方的更新列表拿了过来,供大家参考 Roslyn 编译平台 ...
随机推荐
- 开发板通过UART向主机发送数据
/********************************* 代码功能:开发板通过UART向主机发送数据 使用函数: Serial.begin(数据传输的波特率); Serial.printl ...
- 使用spring 4.0 + maven 构建超简单的web项目
一.需求 使用spring去管理web项目,是目前非常流行的一种思路,本文将介绍使用maven+spring 4.0.2 来构建一个简单的web项目. 二.实现 1.新建一个maven项目,如下图所示 ...
- snmp switch traffic交换机带宽
上代码 <?php function getstr1($strall,$str1,$str2,$html_charset='utf-8'){ $i1=mb_strpos($strall,$str ...
- LeetCode340 Longest Substring with At Most K Distinct Characters
This is a question needs pay for , I have no money to pay ,so just write some test case by myself. I ...
- server 2008 IIS 搭建PHP运行环境
本文以windows server 2008 r2 Enterprise作为操作系统,以IIS为web部署服务组件,配置PHP的服务器端执行环境,其中IIS版本为7.5,PHP版本为5.3. 注意:本 ...
- PyMongo下载及安装
PyMongo最新版本下载地址: http://pypi.python.org/pypi/pymongo/#downloads PyMongo旧版本下载地址: http://pypi.python.o ...
- php中文截取无乱码方法
直接使用PHP函数substr截取中文字符可能会出现乱码,主要是substr可能硬生生的将一个中文字符“锯”成两半.解决办法: 1.使用mbstring扩展库的mb_substr截取就不会出现乱码了. ...
- 【洛谷P1080】国王游戏
我们按照左右手数的乘积升序排序,就能使最多金币数最小了 为什么呢? 我们知道: 1)如果相邻的两个人交换位置,只会影响到这两个人的值,不会影响他人 2)假设相邻的两个人i, i + 1.设A[i] B ...
- Jade之Includes
Includes jade允许利用include将其他文件(支持filters所支持的类型)中的代码嵌入当前代码中. jade: //- index.jade doctype html html in ...
- web兼容性测试
1.前端的兼容性问题 a. 客户端操作系统 -pc电脑 -windows -mac os -Linux -平板 -手机 -智能终端 -响应式布局 借助于css3 b.客户端浏览器 IE firefo ...