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: 第一步:下载 ...
随机推荐
- 关于XSS（跨站脚本攻击）和CSRF（跨站请求伪造）
我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...
- 可以改变this指向的方法
this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike',' ...
- LeetCode之136. Single Number
-------------------------------------- 一个数异或它自己会得到0,0异或n会得到n,所以可以用异或来消除重复项. AC代码如下: public class Sol ...
- UVALive5031 Graph and Queries(Treap)
反向操作,先求出最终状态,再反向操作. 然后就是Treap 的合并,求第K大值. #include<cstdio> #include<iostream> #include< ...
- 基于AgileEAS.NET SOA 平台SAAS架构技术的开源分销ERP系统-SmartERP.NET下载配置说明
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- Knockout.js随手记(3)
下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...
- 【CentOS】磁盘管理与vim编译器
一.查看硬盘或目录容量 1.df [-hmkiT] -h 查看系统磁盘使用情况 -m 使用MBytes显示结果 -k 使用KBytes显示结果 -i 查看inode -T 查看Type 2 ...
- iOS导航控制器常用函数与navigationBar常用属性
导航控制器常用函数触发时机 当视图控制器的View将要出现时触发 - (void)viewWillAppear:(BOOL)animated 当视图控制器的View已经出现时触发 - (void)vi ...
- python函数
一.函数: 创建函数:使用def语句 举例:定义一个返回斐波那楔数列列表的函数 def fibs(num): result = [0,1] for i in range(num-2): result. ...
- JavaScript字符串的操作-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...