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: 第一步:下载 ...
随机推荐
- 解决NetBeans 8.x的字体问题
笔者喜欢用 Consolas 编码,而NetBeans的默认字体是 Monospaced 13. 尽管可以通过"选项-字体和颜色-所有语言"改变默认的字体,比如 Consolas ...
- 关于搭建webservice以及无法通过URL访问的简易解决办法
之前工作天天在用webservice,但是从没有自己独立的搭建一个全新的项目,今天好不容易自己搭了一个webservice,报错不少,记录下来免得以后又忘了. 一.搭建webservice需要做的几点 ...
- Java控件（日常笔记）
Java的一些控件 text:文本区域 readonly属性:是否只读.password:密码区域,输入的文本以'*'展示checkbox:复选框 checked属性:是否选中:radio:单选框: ...
- Java笔记：对象，方法，类
1.数据类型(类) 对象名; 这里要求数据类型必须为复合数据类型,基本数据类型声明的结构只能称为变量,而不能称为对象. 对象的初始化 对象名= new 构造方法(参数); 2.方法: 访问控制符 [修 ...
- ios原声音频播放AVAudioSession 总结
//音频播放/*英译:record:录音 */ 1 导入头文件#import<AVFoundation/AVFoundation.h>//AVAudioSession是一个单例模式.在IO ...
- Android Studio增加NDK代码编译支持--Mac环境
Android的APP开发基本都是使用Java或者跨平台框架进行开发的,对于很多APP来说已经足够了,但是,对于提供功能给外部使用或者性能要求很高的需求下,如图像处理等,可能会需要C/C++库的支持, ...
- Nhibernate随手记（1）
学习Nhibernate的萌芽 今早有群里有人问Nhibernate的问题,没学过,刚好来了兴趣,无意很快在园子里下载到了一本Nhibernate3.0的电子书,内容非常不错,很快地看了扫了一下,再记 ...
- selenium实战-Compound class names not permitted
这个复合类其实就是嵌套类,使用最后一个作为类名即可
- vaadin_demo
简介:主要一个登陆界面,登陆后跳转到主界面: 主界面功能是点新增,新增人员数据会保存到显示列表中: 一个很简单的demo 下面是截图
- Struts2 文件上传和文件下载
一.单个文件上传 文件上传需要两个jar包: 首先制作一个简单的页面,用于实现文件上传 <h1>单个文件上传</h1> <s:form action="uplo ...