Emmet初探2

关于Emmet

Emmet插件的前身是Zen coding，可以大幅度提高前端开发效率的一个工具，也有人说类似于jade（高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用）。再官方一些的官方语言的叽叽喳喳我就不详写了，直接百度可以找到。

Emmet支持的编辑器：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat （通过“Install Mixin”对话框添加)
Komodo Edit/IDE （通过Tools → Add-ons菜单添加)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。

Emmet安装方法(Sublime text 3安装emmet插件的方法：http://blog.csdn.net/mengke1124/article/details/41696779)

因为我用的是Sublime text 3，其他编辑器安装的方法可能要根据自己的需要在网上搜刮了

Emmet插件实用常用方法

（http://www.w3cplus.com/tools/emmet-cheat-sheet.html）

这篇文档写的很清晰，也有安装插件的方法。但是介绍的方法太多，感觉有点冗长，我汇总了一些我个人觉得比较实用常用的方法。

略写版：

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
h.item${hhh $}*5({}括号内为显示文本)
ul>li.item$$$*5($为自增,三个$为三位数字)
ul>li.item$@3*5(@从3开始自增+1)
ul>li.item$@-*5(@-,自减)
ul>li.item$@-3*5(@-3,自减最小数字为3)
form#search.wide(#为id,.为类)
p[title='hello word'](自定义属性)

(隐式标签)

.class
em>.class
ul>.class
table>.row>.col
!(页面html开始代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img

详写版：

div+div>p>span+em^bq(^为上级元素)

<div></div>

<div>

    <p><span></span><em></em></p>

    <blockquote></blockquote>

</div>

div+div>p>span+em^^bq

<div></div>

<div>

    <p><span></span><em></em></p>

</div>

<blockquote></blockquote>

ul>li*5(>为后代缩写,*表示有几个)

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)

<div>

    <header>

        <ul>

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

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

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>

(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)

<div>

    <dl>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

    </dl>

</div>

<footer>

    <p></p>

</footer>

ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)

<ul>

    <li1 title="item1">hhh 1</li1>

    <li2 title="item2">hhh 2</li2>

    <li3 title="item3">hhh 3</li3>

    <li4 title="item4">hhh 4</li4>

    <li5 title="item5">hhh 5</li5>

</ul>

h.item${hhh $}*5({}括号内为显示文本)

<h class="item1">hhh 1</h>

<h class="item2">hhh 2</h>

<h class="item3">hhh 3</h>

<h class="item4">hhh 4</h>

<h class="item5">hhh 5</h>

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$@3*5(@从3开始自增+1)

<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$@-*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$@-3*5(@-3,自减最小数字为3)

<ul>

    <li class="item7"></li>

    <li class="item6"></li>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

</ul>

form#search.wide(#为id,.为类)

<form action="" id="search" class="wide"></form>

p[title='hello word'](自定义属性)

<p title="hello word"></p>

(隐式标签)
.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul>

    <li class="class"></li>

</ul>

table>.row>.col

<table>

    <tr class="row">

        <td class="col"></td>

    </tr>

</table>

!(页面html开始代码缩写)

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

(缩写)
a

<a href=""></a>

a:link

<a href="http://"></a>

<hr>

link

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

link.css

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

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

script:src

<script src=""></script>

img

<img src="" alt="">

官方api：http://docs.emmet.io/cheat-sheet/

api表：http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

Emmet初探2的更多相关文章

Emmet初探
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
初探领域驱动设计（2）Repository在DDD中的应用
概述上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
从273二手车的M站点初探js模块化编程
前言这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
.NET文件并发与RabbitMQ（初探RabbitMQ）
本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...
React Native初探
前言很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
emmet 系列（1）基础语法
emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

随机推荐

redhat 各种版本下载
http://www.linuxfly.org/post/659/ http://pan.baidu.com/share/home?uk=3742764079&view=share#categ ...
C#中,什么时候用yield return
yield关键字用于遍历循环中,yield return用于返回IEnumerable<T>,yield break用于终止循环遍历. 有这样的一个int类型的集合: static Lis ...
OLEDB Excel 与C# 的数据流通方法
一. 名词解释: OleDbCommand 是对数据源执行各种操作的SQL语句或者存储过程,连接access.excel等数据文件进行数据操作时候用到的,其实和sqlcomma ...
配置quartz数据源的三种方式
如果是使用了JDBC JobStore或JobStoreCMT获得持久的Job时,就要配置相关的数据源了. 方式一:使用quartz.properties文件,这时只需要在property文件中增加如 ...
Android图片加载框架最全解析（一），Glide的基本用法
现在Android上的图片加载框架非常成熟,从最早的老牌图片加载框架UniversalImageLoader,到后来Google推出的Volley,再到后来的新兴军Glide和Picasso,当然还有 ...
简明python教程 --C++程序员的视角（五）：面向对象的编程
面向对象的编程在大多数时候你可以使用过程性编程,但是有些时候当你想要编写大型程序或是寻求一个更加合适的解决方案的时候,你就得使用面向对象的编程技术. 对象可以使用普通的属于对象的变量存储数据.属于一 ...
卷积神经网络用于视觉识别Convolutional Neural Networks for Visual Recognition
Table of Contents: Architecture Overview ConvNet Layers Convolutional Layer Pooling Layer Normalizat ...
IIS HTTP 错误 404.17 - Not Found 解决方法
错误提示如下图: 出现这种情况的原因通常是因为先安装了Framework,后安装的IIS: 运行cmd,输入: C:\Windows\Microsoft.NET\Framework\V4.0.30 ...
Linux C Socket编程原理及简单实例
部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1. 什么是TCP/IP.UDP? 2. Socket在哪里 ...
QtWebKit
WekKit官网:http://www.webkit.org/ QtWebKit官网及安装:http://trac.webkit.org/wiki/QtWebKit#GettingInvolved Q ...

Emmet初探2

Emmet初探2的更多相关文章

随机推荐

热门专题