Emmet使用
emmet官方文档
【翻译】Emmet (ZenCoding) 缩写语法
<!-- 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="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></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$@-*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="item3-"></li>
<li class="item4-"></li>
<li class="item5-"></li>
<li class="item6-"></li>
<li class="item7-"></li>
</ul> <!-- ul>li.item$@3-s*5 -->
<ul>
<li class="item3-s"></li>
<li class="item4-s"></li>
<li class="item5-s"></li>
<li class="item6-s"></li>
<li class="item7-s"></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> <!-- a[href]{click} -->
<!-- a{click} -->
<!-- a>{click} -->
<a href="">click</a> <!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a> <!-- p>{click}+a{here}+{to continue} -->
<p>click<a href="">here</a>to continue</p>
<!-- p{Click }+a{here}+{ to continue} -->
<p>Click </p>
<a href="">here</a> to continue <!-- (header > ul.nav > li*5) + footer 有空格:停止缩写解析 -->
(header > ul.nav > li*5) + <footer></footer>
<!-- (header>ul.nav>li*5)+footer -->
<header>
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
Emmet：HTML/CSS代码快速编写神器
<!-- 用于HTML5文档类型 -->
<!-- ! -->
<!-- html:5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html> <!-- html:xt：用于XHTML过渡文档类型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body> </body>
</html> <!-- html:5s不存在 -->
<!-- html:4s：用于HTML4严格文档类型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> <!-- 隐式标签 :
在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>,
现在如果只输入.item，则Emmet会根据父标签进行判定。 比如在<ul>中输入.item，就会生成<li class="item"></li>。 --> <!-- 下面是所有的隐式标签名称： li：用于ul和ol中
tr：用于table、tbody、thead和tfoot中
td：用于tr中
option：用于select和optgroup中 --> <!-- .item -->
<div class="item"></div> <ul>
<!-- .item -->
<li class="item"></li>
<!-- .item*5 -->
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<!-- #item$@2*5 -->
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul> <tr>
<!-- .item -->
<td class="item"></td>
</tr> <select name="" id="">
<!-- .item -->
<option class="item"></option>
</select>
</body>
</html>
<style>
body{
/*二、CSS缩写 */
/*p 表示%
e 表示 em
x 表示 ex*/
/*m5e*/
margin: 5em;
/*w100*/
width: 100px;
/*h10p+m5e*/
height: 10%;
margin: 5em;
/*p10x*/
padding: 10ex;
/*模糊匹配 */
/*如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，
比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的： */
/*ov-h*/
overflow: hidden;
}
/*@f*/
@font-face {
font-family:;
src:url();
}
/*一些其他的属性，
比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成： */
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
/*如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：*/
/*trs*/
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
/*你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo*/
/*-super-foo*/
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
/*如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀： */
/*-wm-trf*/
-webkit-transform: ;
-moz-transform: ;
transform: ;
/* 前缀缩写如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-*/
/*w-trs*/
-webkit-transition: prop time;
transition: prop time;
/*lg(left, #fff 50%, #000)*/
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);
</style>
Emmet插件使用方法小结
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body{
/*c#3*/
color: #333;
/*c#e0*/
color: #e0e0e0;
/*c#fc0 */
color: #fc0;
} /* CSS3前缀：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-*/ /*-wmso-transform */
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
/*-o-transform*/
-o-transform: ;
transform: ; </style>
<!-- link -->
<link rel="stylesheet" href="">
<!-- script:src -->
<script src=""></script> </head>
<body> <!-- img -->
<img src="" alt="">
<!-- inp -->
<input type="text" name="" id="">
<!-- input:p -->
<input type="password" name="" id="">
<!-- btn -->
<button></button>
<!-- btn:s -->
<button type="submit"></button>
<!-- btn:r -->
<button type="reset"></button> </body>
</html>
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: 第一步:下载 ...
随机推荐
- android so调试时遇到的坑 - arm流水线
直接看下面这段ARM汇编: 此时运行到的代码为ADD R3,PC 此时看一下寄存器窗口的值: 按理来说执行完ADD R3,PC后的效果应该是R3=R3+PC ,R3=40A1D5C8 但是我们可以执行 ...
- .NET Attributes
Attributes 特性 公共语言运行时允许添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Microso ...
- ionic扩展插件
1.ionic-timepicker 时间选择 https://github.com/rajeshwarpatlolla/ionic-timepicker 2.ionic-datepicker 日 ...
- imageNamed和imageWithContentsOfFile区别
在 Apple 官方帮助文档提供了两个加载图片的方法 imageNamed , 其参数为图片的名字 imageWithContentsOfFile , 其参数是图片文件的路径 下面主要是说一下他们的区 ...
- iOS10 SiriKit QQ适配详解
原文连接 1. 概述 苹果在 iOS10 开放了 SiriKit 接口给第三方应用.目前,QQ已经率先适配了 Siri 的发消息和打电话功能.这意味着在 iOS10 中你可以直接告诉 Siri 让它帮 ...
- Swift - 界面的跳转模式
iOS开发中界面跳转有两种方式,上下跳转和左右跳转. 上下跳转_TO: let secondViewController = SecondViewController() self.presentVi ...
- ldd 命令用于判断某个可执行的binary档案含有什么动态链接库(so)
[root@NB ok]# ldd /bin/ls linux-vdso.so. => (0x00007ffd7dbf6000) libselinux.so. => /lib64/libs ...
- 【Javascript】解决Ajax轮询造成的线程阻塞问题（过渡方案）
一.背景 开发Web平台时,经常会需要定时向服务器轮询获取数据状态,并且通常不仅只开一个轮询,而是根据业务需要会产生数个轮询.这种情况下,性能低下的Ajax长轮询已经不能满足需求,频繁的访问还会造成线 ...
- Spring Web MVC 多viewResolver视图解析器解决方案
viewResolver的定义如下: public interface ViewResolver { View resolveViewName(String viewName, Locale loca ...
- UVA 11464 暴力+位运算 ***
题意:给你一个 n * n 的 01 矩阵,现在你的任务是将这个矩阵中尽量少的 0 转化为 1 ,使得每个数的上下左右四个相邻的数加起来是偶数.求最少的转化个数. 新风格代码 lrj书上说的很清楚了, ...