原文链接：http://m.blog.csdn.net/article/details?id=53484535

不错 —— 由都不要欺负我分享

Emmet 是一个可用在许多流行文本编辑器上的极大简化HTML和CSS工作流程的插件。

Emmet的所有功能，都是在输入后按tab键，就会显示出你所想要的。

本文中所有例子是基于windows下的Sublime Text3

HTML

文档初始格式化

html:5

-> 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

元素

可以用任何元素名字来创建标签

div -> <div></div>

嵌套操作

child：>

使用>符号，将大于号右面元素嵌套在左面的元素之中。

div>ul>li

->

<div>

    <ul>

        <li></li>

    </ul>

</div>

Sibling: +

使用+符号，使两者成为兄弟元素。

div + p

->

<div></div>

<p></p>

Climb-up: ^

使用^，可以让元素在DOM中向上升一级。

div+div>p>span^p

->

<div></div>

<div>

    <p><span></span></p>

    <p></p>

</div>

多个^,可以升多级。

div+div>p>span^^p

->

<div></div>

<div>

    <p><span></span></p>

</div>

<p></p>

multiplication:*

用*可以定义需要创建多少次元素。

ul>li*5

->

<ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

</ul>

Grouping:()

在复杂的缩写中，使用()将同一个父元素的元素连在一起。

(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>

属性操作

ID和Class

同css一样，用#表示ID，.表示类。

div#header+div.page

->

<div id="header"></div>

<div class="page"></div>

定制属性

使用[attr]添加你所想要的属性

td[title="hello world" colspan=3]

->

<td title="Hello world!" colspan="3"></td>

项目编号：$

使用*可以重复元素，使用$对其进行编号。

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>

也可以用多重$，用零填补不够的数字。

ul>li.item$$*5

->

<ul>

        <li class="item01"></li>

        <li class="item02"></li>

        <li class="item03"></li>

        <li class="item04"></li>

        <li class="item05"></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>

一同使用的结果：

ul>li.item$@-3*5

->

<ul>

    <li class="item7"></li>

    <li class="item6"></li>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

</ul>

Text:{}

元素后加{}，就可以给元素添加文本值。

a{Click me}

->

<a href="">Click me</a>

注意{}的位置

p>{Click }+a{here}+{ to continue}

->

<p>Click <a href="">here</a> to continue</p>

注意格式

有的时候为了阅读方便，会加入空格，可是这样会导致Emmet无法使用。

(header > ul.nav > li*5) + footer

上例就无法使用，如果将元素之间空格取消就可以了。

隐式标签名

在不同标签名下使用缩写，会生成指定的标签。

li for ul and ol
tr for table, tbody, thead and tfoot
td for tr
option for select and optgroup

<div>.item</div>

->

<div class=item></div>

<ul>.item</ul>

->

<ul><li class="item"></li></ul>

生成Lorem ipsum文本

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，

CSS

带单位的值

使用整数的缩写，会自动在后面添加px单位

m10 -> margin:10px;

m10-20 -> margin:10px 20px;

m-10--20 -> margin:-10px -20px;

使用浮点值的缩写,会自动在后面添加em单位

m1.5 -> margin:1.5em;

使用字母字符，就会自动明确单位

m1.5ex -> margin:1.5ex;

如果已经明确单位了，就不需要使用连字符了

m10ex20em -> margin:10ex 20em;

m10ex-5 -> margin:10ex -5px;

值的别名

p -> %

e -> em

x -> ex

颜色

Emmet支持十六进制的颜色，

c#3 -> color:#333;

#是一个值的分离器，所以不需要连字符来分离。

bd5#0s -> border:5px #000 solid;

可以写一个、两个、三个字符作为颜色的值

#1 -> #11111

#e0 -> #e0e0e0

#fc0 -> #ffcc00

无单位属性

一些CSS属性是没有单位，

lh2 -> line-height: 2;

fw400 -> font-weight: 400;

!important

可以在css缩写后加!，会自动添加!important

p! -> padding: !important;

p!+ m10e -> padding: !important; margin : 10em;

供应商前缀

属性前加-，会自动添加供应商前缀，

-bdrs ->

        -webkit-border-radius: ;

        -moz-border-radius: ;

        -ms-border-radius: ;

        -o-border-radius: ;

        border-radius: ;

输入之后，只需要输入一次数值，就会给所有属性添加此数值。

如果不需要所有供应商前缀，则使用缩写来指定

w: webkit
m: moz
s: ms
o: o

-wm-bdrs ->

    -webkit-border-radius: ;

    -moz-border-radius: ;

渐变

使用lg(...)，就会自动添加渐变属性

lg(left,#0,top,black)

->

background-image: -webkit-linear-gradient(left, #0, top, black);

background-image: -o-linear-gradient(left, #0, top, black);

background-image: linear-gradient(to right, #0, top, black);

参考资料

Emmet官方文档

Emmet：HTML/CSS代码快速编写神器

emmet, 让你的 html 飞起来

Emmet，让你爱上敲代码的更多相关文章

Emmet的HTML语法（敲代码的快捷方式）
Emmet的HTML语法(敲代码的快捷方式) 版权声明:本文为网上转载. 所有操作按下“tab”键即可瞬间完成元素 1.在编辑器中输入元素名称,即可自动补全生成 HTML 标签,即使不是标准 ...
VsCode中使用Emmet神器快速编写HTML代码
一.Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML ...
积极主动敲代码，使用Junit学习Java程序设计
积极主动敲代码,使用JUnit学习Java 早起看到周筠老师在知乎的回答软件专业成绩很好但是实际能力很差怎么办?,很有感触. 从读大学算起,我敲过不下100本程序设计图书的代码,我的学习经验带来我的程 ...
使用Alcatraz为Xcode安装XActivatePowerMode插件, 从此敲代码逼格大大滴~
Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCode的插件.模版以及颜色配置的工具. 关于Alcatraz的安装,这里有一篇不错的博文,请参考安装:http://www.cnb ...
敲代码非常难之logstash之file input插件实现分析
版权声明:本文为横云断岭原创文章,未经博主同意不得转载.微信公众号:横云断岭的专栏 https://blog.csdn.net/hengyunabc/article/details/25665877 ...
20145314郑凯杰《Java程序设计》第9周学习总结积极主动敲代码
20145314郑凯杰 <Java程序设计>第9周学习总结教材学习内容总结第十六章 ①JDBC(Java DataBase Connectivity) 即java数据库连接,是一种用于 ...
Android 你可能忽略的提高敲代码效率的方式
Android 你可能忽略的提高敲代码效率的方式
014敲代码将一个栈按升序排序,对这个栈是怎样实现的，你不应该做不论什么特殊的如果(keep it up)
敲代码将一个栈按升序排序. 对这个栈是怎样实现的,你不应该做不论什么特殊的如果. 程序中能用到的栈操作有:push | pop |isEmpty 最easy想到的就是优先队列来做此题.easy实现. ...
(016)给定一个有序数组(递增)，敲代码构建一棵具有最小高度的二叉树(keep it up)
给定一个有序数组(递增),敲代码构建一棵具有最小高度的二叉树. 因为数组是递增有序的.每次都在中间创建结点,类似二分查找的方法来间最小树. struct TreeNode { int data; Tr ...

随机推荐

Android开发自学笔记(Android Studio)—4.5 ProgressBar及其子类
一.前言 ProgressBar本身代表了进度条组件,它还派生出了两个常用的组件:SeekBar和RatingBar,他们的使用方法类似,只是显示界面有一定的区别.我们看一下API文档中的说明: 从图 ...
transformClassesWithDexForDebug
转自:http://blog.sina.com.cn/s/blog_6f3828770102w30b.html
【UOJ #244】【UER #7】短路
http://uoj.ac/contest/35/problem/244 对其他人来说好简单的一道题,我当时却不会做TWT 注定滚粗啊题解很好的~ #include<cstdio> #i ...
Java语法
java语法: 一个java程序可以说是一系列对象的集合,而这些对象都要通过调用彼此的方法来协同工作. 对象: 对象是一个实例,例如:一只猫,它是一个对象,有状态和行为.它的状态状态有:颜色,名字,品 ...
php cli配置文件问题
引言今天在教别人使用protobuf的时候,无意中发现了一个php cli模式下的诡异问题,费了老半天的找到解决方法了,这里拿出来分享下. 问题描述我们这边最先引入了protobuf协议,使用的是 ...
网站访问量大怎样优化mysql数据库
MySQL优化的一些建议,单机MySQL的优化我分为三个部分,一是服务器物理硬件的优化,二是 MySQL安装时的编译优化,三是自身配置文件my.cnf的优化:如果单机的优化也解决不了你的数据库的压力的 ...
Java都有什么进阶技术
Java都有什么进阶技术? 看到有人给题主推荐<代码整洁之道>,评论有人说那不是JAVA进阶的书- 私以为,一些人对JAVA进阶的理解片面了,JAVA不过也是一门语言,提升和进阶还是内 ...
morse code
morse code,摩斯电码,是一种时通时断的信号代码,通过不同的排列顺序来表达不同的英文字母.数字和标点符号. 摩斯电码,是一种早期的数字化通信形式,但是它不同于现代只使用0和1两种状态的二进制代 ...
大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ProcessBar）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是如何设计一个插件的,两种方式各有利 ...
alpha版、beta版、rc版的意思
很多软件在正式发布前都会发布一些预览版或者测试版,一般都叫“beta版”或者 “rc版”,特别是开源软件,甚至有“alpha版”,下面来解释一下各个版本的意思. alpha版:内部测试版.α是希腊字母 ...

Emmet，让你爱上敲代码