Emmet
一、简介
Emmet (前身为 Zen Coding) ，不是软件也不是代码，是编辑器(如sublime text)的插件，相应的后缀文件（.html/.css）输入指定的缩写语法，按下tab键就能生成相应的html/css代码，是一个高效编写前端代码的工具。
二、使用方法
简单的教程
https://www.youtube.com/embed/sxW-V24MTXI?feature=player_embedded
官网，上面有教程
使用文档
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的更多相关文章
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- emmet 系列（1）基础语法
emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...
- 前端开发必备！Emmet使用手册
介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...
- emmet的使用
http://blog.wpjam.com/m/emmet-grammar/ 使用 Emmet 生成 HTML 的语法详解 开源程序 浏览:21537 2013年05月09日 文章目录[隐藏] 生成 ...
- Sublime Text 3 Emmet插件安装
一.手动安装: 1. Emmet (ex-Zen Coding) for Sublime Text http://emmet.io (1) 下载:https://github.com/serge ...
- sublime Text 3 安装emmet
Emmet简介 Emmet是一个支持大部分流行文本编辑器的插件,能够极大得提高编写HTML和CSS的工作效率. 官网:http://emmet.io/ 在Sublime Text 3中安装 前提Sub ...
- 如何将Emmet安装到到 Sublime text 3？
看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. ONE:建议到官方下载Sublime ...
- 前端开发必备！Emmet语法
使用方法 emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段.(如果与已有的快捷键有冲突的话,可以 ...
- Emmet，让你爱上敲代码
原文链接:http://m.blog.csdn.net/article/details?id=53484535 不错 —— 由 都不要欺负我 分享 Emmet 是一个可用在许多流行文本编辑器上的极大简 ...
- Sublime text 3安装Emmet
这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: 第一步:下载 ...
随机推荐
- HDU 3333 Turing Tree --树状数组+离线处理
题意:统计一段序列[L,R]的和,重复元素只算一次. 解法:容易看出在线做很难处理重复的情况,干脆全部讲查询读进来,然后将查询根据右端点排个序,然后离散化数据以后就可以操作了. 每次读入一个数,如果这 ...
- 在springmvc中使用hibernate-validate
在springmvc.xml中加入 <!-- 国际化配置 --> <bean id="localeResolver" class="org.spring ...
- Windows安装 ANT
apache-ant-1.7.1-bin.zip 下载地址:http://ant.apache.org/bindownload.cgi 第一步 解压apache-ant-1.7.1-bin. ...
- java7-3 继承
1.继承概述: 把多个类中相同的内容给提取出来定义到一个类中. 如何实现继承呢? Java提供了关键字:extends 格式: class 子类名 extends 父类名 {} 父类也称为基类.超类: ...
- 转: java学习路线图
http://www.java1234.com/javaxuexiluxiantu.html
- 介绍Git版本控制器的使用
Git 简介 Git 是什么?大家肯定会说不就是版本控制器嘛,是的Git是目前世界上最先进的分布式版本控制系统(没有之一). 1.那什么是版本控制器呢? 举个简单的例子,比如我们用Word写文章,那你 ...
- C语言 百炼成钢2
//题目4:输入某年某月某日,判断这一天是这一年的第几天? #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<st ...
- .NET编译的目标平台(AnyCPU,x86,x64)
转载:http://blog.sina.com.cn/s/blog_78b94aa301014i8r.html 今天有项目的代码收到客户的反馈,要求所有的EXE工程的目标平台全部指定成x86,而所有D ...
- 在 WinForm 中使用 Direct2D
在 C# 的 WinForm 应用中,界面的绘制使用的是 GDI+.不过在一些特别的应用中,可能需要用硬件加速来提高绘制的效率.下面就来介绍两种在 WinForm 应用中嵌入 Direct2D 的方法 ...
- Go视频教程整理
[Go Web基础]01博客项目设计 |Go视频教程|Go语言基础 http://www.tudou.com/programs/view/gXZb9tGNsGU/ [Go Web基础]02初窥 Web ...