介绍:Emmet是许多流行文本编辑器的插件,它极大地改进了HTML和CSS工作流程 、为大部分流行的编辑器都提供了安装插件,核心是缩写语法+tab键(不同编辑器可自行设置),以下是我整理的常用知识点。

一、特性

1、支持定制:

添加新缩写或更新现有缩写,可修改snippets.json文件
更改Emmet过滤器和操作的行为,可修改preferences.json文件
定义如何生成HTML或XML代码,可修改syntaxProfiles.json文件

2、支持大部分的编辑器:(此处无提供以下插件链接,附上官网链接:https://www.emmet.io/)

Sublime Text 3/2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat
Komodo Edit/IDE
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

二、基本语法

1、后代:> 示例:div>ul>li>a

<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>

2、兄弟:+ 示例:h1+p

<h1></h1>
<p></p>

3、上级:^ ^^ 示例:div>ul>li>span+a^p div>ul>li>span+a^^p

<div>
<ul>
<li><span></span><a href=""></a></li>
<p></p>
</ul>
</div> <div>
<ul>
<li><span></span><a href=""></a></li>
</ul>
<p></p>
</div>

4、分组:() 示例:div>(header>ul>li*2>a)+footer>div

<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<div></div>
</footer>
</div>

5、乘法: 示例:ul>li2

<ul>
<li></li>
<li></li>
</ul>

6、自增减:$ 示例:ul>li.lis$3 ul>li.lis$@-*3 div>h$[title=th$]{Header$}3

<ul>
<li class="lis1"></li>
<li class="lis2"></li>
<li class="lis3"></li>
</ul> <ul>
<li class="lis3"></li>
<li class="lis2"></li>
<li class="lis1"></li>
</ul> <div>
<h1 title="th1">Header1</h1>
<h2 title="th2">Header2</h2>
<h3 title="th3">Header3</h3>
</div>

7、命名、属性:#head .head p.p1.p2.p3

<div id="head"></div>
<div class="head"></div>
<p class="p1 p2 p3"></p>

8、自定义属性:[] 示例div[title="HelloWorld"] div[rowspan=2 colspan=3 title]

<div title="HelloWorld"></div>
<div rowspan="2" colspan="3" title=""></div>

9、文本:{} 示例:div>{请点击 }+a{这里}+{ 跳转}

<div>请点击 <a href="">这里</a> 跳转</div>

三、HTML标签语法

1、所有未知的缩写都会转换成标签

<gg></gg>

2、基本html标签:!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>

3、缩写:link

<link rel="stylesheet" href="">

4、简写:style、script

四、CSS语法

1、值:p(%)、e(em)、x(ex) 、不写默认px、 如w100

width:100px;

2、附加属性:@f:
@font-face {

font-family:;
src:url();

}

3、模糊匹配:ov:h、ov-h、ovh、oh

overflow:hidden;

4、供应商前缀:trs

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

5、渐变:lg(left,yellow 50%,@pink)

background-image: -webkit-linear-gradient(left, yellow 50%, @pink);
background-image: -o-linear-gradient(left, yellow 50%, @pink);
background-image: linear-gradient(to right, yellow 50%, @pink);

前端工具【0】—— Emmet插件的更多相关文章

  1. Sublime Text3开发工具安装emmet插件

    第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...

  2. 前端工具-定制ESLint 插件以及了解ESLint的运行原理

    这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule,用以帮助我们更深入的理解ESLint的运行原理,并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则. 插 ...

  3. 解决 TextMate 2 无法安装 Emmet 插件

    本篇文章由:http://xinpure.com/solving-textmate-2-cannot-install-emmet-plugin/ 前端神器 Emmet 插件原名为 ZedCoding ...

  4. 【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法

    这篇关于 Emmet 插件使用的博文之前就想写了,今天刚好闲暇时间,就花了一些时间进行了总结. 我们都这道 Emmet 这款插件在前端设计里被称为神器,确实,神器称号名不虚传.因为这款插件可以帮助我们 ...

  5. 快速编写HTML,CSS代码的有力工具Emmet插件

    Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...

  6. 前端emmet插件的一些常用用法

    以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...

  7. Dearmweaver CS6 如何添加emmet 插件

     一.关于emmet插件 已经接触前端工具的小伙伴们早听说过这个插件的鼎鼎大名了吧,emmet可以说是前端工程师的利器,就连老牌dreamweaver 都可以支持,我们怎么好意思拒绝这个好东西呢? 有 ...

  8. sublime Text emmet插件使用手册

    转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工 ...

  9. 前端工具之-- Sublime

    开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS ...

  10. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

随机推荐

  1. Redux 中间件与函数式编程

    为什么需要中间件 接触过 Express 的同学对"中间件"这个名词应该并不陌生.在 Express 中,中间件就是一些用于定制对特定请求的处理过程的函数.作为中间件的函数是相互独 ...

  2. 前端 CSS层叠性 CSS选择器优先级

    层叠性 层叠性:权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了 权重:谁的权重大,浏览器就会显示谁的属性 我们现在已经学过了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并 ...

  3. JavaSE编码试题强化练习6

    1.写出选择排序的代码实现,对一个int数组进行排序 public class TestSelectSort { public static void main(String[] args) { in ...

  4. Vue 基础 day02

    Vue Devtools 安装 https://chrome.google.com/webstore/search/vue%20devtools?hl=zh-CN 需要翻墙 过滤器 概念: Vue.j ...

  5. TCP 和 UDP 的区别---还有一个UTP一

    面试的时候会经常问到这些问题,所以要对比了解一下他们之间的差别,能讲出个所以然来.多积累多总结,懵逼中... TCP 和 UDP TCP与UDP基本区别 : 1.基于连接与无连接 2.TCP要求系统资 ...

  6. org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.lang.NumberFormatException: For input string: "W%" ### Cause: java.lang.NumberFormatException: For input s

    一个常见的myBatis xml文件中的引号错误: org.apache.ibatis.exceptions.PersistenceException: ### Error querying data ...

  7. Thinkphp 获取最大值id值

    有时候项目需要获取数据库最大的id值,比如生成订单,做排序号,那么Thinkphp 如何获取最大值id值. $info=D('Customer')->where('1=1')->order ...

  8. P2517 [HAOI2010]订货(dp)

    P2517 [HAOI2010]订货 设$f[i][j]$表示第$i$个月,库存为$j$的最小代价 枚举上个月的库存$k$,那么$f[i][j]=f[i-1][k]+(j+U[i]-k)*D[i]+j ...

  9. .net core jessetalk资料合集

    资料推荐集合贴 By Jesse • 2018-01-10 • 5064次浏览 流程图在线预览地址:https://9o90oe.axshare.com/#g=1&p=home OAuth2  ...

  10. CentOS7搭建Docker镜像实战

    开发十年,就只剩下这套架构体系了! >>>   一.搭建环境 使用的是VMWare 12虚拟机安装的CentOS7 安装成功后修改ip: 1. ip addr查看相关信息: 2. 修 ...