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: 第一步:下载 ...
随机推荐
- UIImage加载本地图片的两种方式
UIImage加载图片方式一般有两种: (1)imagedNamed初始化:默认加载图片成功后会内存中缓存图片,这个方法用一个指定的名字在系统缓存中查找并返回一个图片对象.如果缓存中没有找到相应的图片 ...
- RSA加密(C语言)
/** * \file rsa.h * * \brief The RSA public-key cryptosystem * * Copyright (C) 2006-2010, Brainspark ...
- windo phone8.1 样式的基本使用（一）
样式的基本使用(一) 当一个项目中有多个控件出现相同的属性设置,那么可以使用以下解决办法 方法一: <Page.Resources> <!--向资源字典中添加一个键为Buttongr ...
- [LeetCode]Lowest Common Ancestor of a Binary Search Tree
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- ASP.NET MVC与ASP.NET Web Form简单区别与适用场景
概论: Asp.net 微软 提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form 优点: 1.支持丰富的服务器控件.如:Gr ...
- 你不知道的this—JS异步编程中的this
Javascript小学生都知道了javascript中的函数调用时会 隐性的接收两个附加的参数:this和arguments.参数this在javascript编程中占据中非常重要的地位,它的值取决 ...
- html基本知识点
<hr />定义下划线 <br/>定义换行<p>段落</p> <h1>标题</h1>h后的数字逐渐增大,字体逐渐减小;<h ...
- 【Cocos2d-x游戏开发】Cocos2d-x中的弱联网技术
在上一篇博客中,我们一起学习了如何在Cocos2d-x中存储数据和读取信息,本篇博客我们将一起讨论和数据存储同样重要的联网技术. 一.弱联网技术介绍 在网络游戏中许多重要的功能都需要网络连接,而根据需 ...
- [数据库]redis与redis操作
网上搜了以下redis的入门操作,全TM的关于怎么安装配置和性能特点的. 基本的CRUD(Create, Read, Update, Delete)就谁也没说,简直气疯了. 先记录下自己常用的命令,后 ...
- table sorting–angularjs
1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0. ...