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: 第一步:下载 ...
随机推荐
- 万全R630服务器组装RAID5阵列
随笔, 昨天领导让我给一台服务器做系统,本身作为开发的我有一些挑战.而且领导说的事,怎么着也得努努力试试不是? 下午去机房找到服务器本以为仅仅是装个系统完事,而且据我了解服务器本身有系统,以为拿着系统 ...
- 基于STM32和W5500的Modbus TCP通讯
在最近的一个项目中需要实现Modbus TCP通讯,而选用的硬件平台则是STM32F103和W5500,软件平台则选用IAR EWAR6.4来实现. 1.移植千的准备工作 为了实现Modbus TCP ...
- javaSE基础02
javaSE基础02 一.javac命令和java命令做什么事情? javac:负责编译,当执行javac时,会启动java的编译程序,对指定扩展名的.java文件进行编译,生成了jvm可以识别的字节 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列
ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言 http://www.cnblogs.com/panzi/p/5742089.html ASP.NET S ...
- Java基础之集合与泛型
话不多说,直接上图 1.Collection集合小结 注意: 凡是使用哈希表保存对象的容器,保存的对象在容器中都是唯一的,唯一性是通过被保存对象的hashCode和equals方法共同确定: 凡是使用 ...
- 测试Oracle 11gr2 RAC 非归档模式下，offline drop数据文件后的数据库的停止与启动测试全过程
测试Oracle 11gr2 RAC 非归档模式下,offline drop数据文件后的数据库的停止与启动测试全过程 最近系统出现问题,由于数据库产生的日志量太大无法开启归档模式,导致offline的 ...
- oracle 11g RAC安装节点二执行结果错误CRS-5005: IP Address: 192.168.1.24 is already in use in the network
[root@testdb11b ~]# /u01/app/oraInventory/orainstRoot.sh Changing permissions of /u01/app/oraInvento ...
- WPF MVVM中在ViewModel中关闭或者打开Window
这篇博客将介绍在MVVM模式ViewModel中关闭和打开View的方法. 1. ViewModel中关闭View public class MainViewModel { public Delega ...
- java中的权限修饰符的理解
首先了解概念: 在java中有四种权限修饰符:范围从大到小分别是:public.protect.default(friendly).private,它们之间的区别是: public: Java语言中访 ...
- EventBus 一
一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...