一、简介

　　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. 2014 Super Training #7 B Continuous Login --二分

    原题:ZOJ 3768 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3768 一个结论:一个正整数总能用不超过三个前n项相 ...

  2. ssm中使用hibernate-validator验证BO

    目前比较流行的验证做法:前端jquery-form-validate + 后端hibernate-validate 在pom中添加相关jar: <!-- use hibernate-valida ...

  3. UltraISO制作U盘启动盘安装Win7/10系统攻略

    UltraISO制作U盘启动盘安装Win7/9/10系统攻略 U盘安装好处就是不用使用笨拙的光盘,光盘还容易出现问题,无法读取的问题.U盘体积小,携带方便,随时都可以制作系统启动盘. U盘建议选择8G ...

  4. java14-4 Pattern和Matcher类的使用

     获取功能  Pattern和Matcher类的使用  模式和匹配器的基本使用顺序 import java.util.regex.Matcher; import java.util.regex.Pat ...

  5. java11-6 String类的其它功能

    String类的其他功能: 替换功能: String replace(char old,char new) String replace(String old,String new) 去除字符串两空格 ...

  6. 【C#】【Thread】上下文同步域SynchronizationAttribute

    上下文同步:使用SynchronizationAttribute为ContextBoundObject对象创建一个简单的自动的同步. 这种同步方式仅用于实例化的方法和域的同步.所有在同一个上下文域的对 ...

  7. Contains Duplicate II

    Given an array of integers and an integer k, find out whether there there are two distinct indices i ...

  8. bootstrap modal的data-dismiss属性

    <button type="button" class="btn default" data-dismiss="modal">关 ...

  9. Fragment中监听onKey事件，没你想象的那么难。

    项目中越来越多的用到Fragment,在用Fragment取代TabHost的时候遇到了一个问题,我们都知道,TabHost的Tab为Activity实例,有OnKey事件,但是Fragment中没有 ...

  10. [CareerCup] 4.5 Validate Binary Search Tree 验证二叉搜索树

    4.5 Implement a function to check if a binary tree is a binary search tree. LeetCode上的原题,请参见我之前的博客Va ...