一、简介

　　Emmet (前身为 Zen Coding) ，不是软件也不是代码，是编辑器(如sublime text)的插件，相应的后缀文件（.html/.css）输入指定的缩写语法，按下tab键就能生成相应的html/css代码，是一个高效编写前端代码的工具。

二、使用方法

简单的教程

https://www.youtube.com/embed/sxW-V24MTXI?feature=player_embedded

官网，上面有教程

http://docs.emmet.io/

使用文档

http://docs.emmet.io/cheat-sheet/

后代：>

缩写：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>(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>

乘法：*

缩写：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>

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>

缩写：link:css

<link rel="stylesheet" href="style.css" />

缩写：link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

缩写：meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

缩写：script:src

<script src=""></script>

缩写：img

<img src="" alt="" />

缩写：embed

<embed src="" type="" />

缩写：form:get

<form action="" method="get"></form>

缩写：inp

<input type="text" name="" id="" />

缩写：input:p

别名：input:password

<input type="password" name="" id="" />

缩写：input:s

别名：input:submit

<input type="submit" value="" />

缩写：btn:b

别名：button[type=button]

<button type="button"></button>

Emmet的更多相关文章

  1. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  2. emmet 系列（1）基础语法

    emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

  3. 前端开发必备！Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  4. emmet的使用

    http://blog.wpjam.com/m/emmet-grammar/ 使用 Emmet 生成 HTML 的语法详解 开源程序 浏览:21537 2013年05月09日 文章目录[隐藏] 生成 ...

  5. Sublime Text 3 Emmet插件安装

    一.手动安装:   1. Emmet (ex-Zen Coding) for Sublime Text  http://emmet.io (1) 下载:https://github.com/serge ...

  6. sublime Text 3 安装emmet

    Emmet简介 Emmet是一个支持大部分流行文本编辑器的插件,能够极大得提高编写HTML和CSS的工作效率. 官网:http://emmet.io/ 在Sublime Text 3中安装 前提Sub ...

  7. 如何将Emmet安装到到 Sublime text 3？

    看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. ONE:建议到官方下载Sublime  ...

  8. 前端开发必备！Emmet语法

    使用方法 emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段.(如果与已有的快捷键有冲突的话,可以 ...

  9. Emmet，让你爱上敲代码

    原文链接:http://m.blog.csdn.net/article/details?id=53484535 不错 —— 由 都不要欺负我 分享 Emmet 是一个可用在许多流行文本编辑器上的极大简 ...

  10. Sublime text 3安装Emmet

    这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: 第一步:下载 ...

随机推荐

  1. JAVA版Kafka代码及配置解释

    伟大的程序员版权所有,转载请注明:http://www.lenggirl.com/bigdata/java-kafka.html.html 一.JAVA代码 kafka是吞吐量巨大的一个消息系统,它是 ...

  2. 第20章 DLL高级技术（1）

    20.1 DLL模块的显式载入和符号链接 20.1.1 显式载入DLL模块 (1)构建DLL时,如果至少导出一个函数/变量,那么链接器会同时生成一个.lib文件,但这个文件只是在隐式链接DLL时使用( ...

  3. .NET深入 c#数据类型2

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 查询各个商品分类中各有多少商品的SQL语句

    SELECT goods_category_id ,count(*) FROM `sw_goods` group by goods_category_id

  5. ralitive absolute

    3.relative与absolute的主要区别: 首先,是上面已经提到过的在正常流中的位置存在与否. 其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式.如图3: 图 ...

  6. 23Spring_JdbcTemplate来实现单表的增删改查

    第一步建表:

  7. Android view中的requestLayout和invalidate方法

    Android view中的requestLayout和invalidate方法 requestLayout:当view确定自身已经不再适合现有的区域时,该view本身调用这个方法要求parent v ...

  8. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  9. [android界面]android中src和background区别——前景与背景

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  10. ROWNUMBER() OVER( PARTITION BY COL1 ORDER BY COL2)用法

    今天在使用多字段去重时,由于某些字段有多种可能性,只需根据部分字段进行去重,在网上看到了rownumber() over(partition by col1 order by col2)去重的方法,很 ...