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插件的下载地址:点我下 ...

随机推荐

(转)js中的hasOwnProperty和isPrototypeOf方法
hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象.不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员.isPrototypeOf ...
html在线编辑器汇总
1. TinyMCE 免费,开源,轻量的在线编辑器,基于 JavaScript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI E ...
AFNetworking 2.0使用(持续更新)
本人视频教程系列导入AFNetworking 2.0 文件夹,引入头文件AFNetworking.h --------------- *使用NSURLSessionDownloadTask来下载一张 ...
Android之多媒体扫描过程
转自:http://blog.csdn.net/yan8024/article/details/6620359下面是系统图 MediaScannerReceiver会在任何的ACTION_B ...
2、COCOS2D-X内存管理机制
在C++中.动态内存分配是一把双刃剑,一方面,直接訪问内存地址提高了应用程序的性能,与使用内存的灵活性.还有一方面.因为程序没有正确地分配与释放造成的比如野指针,反复释放,内存泄漏等问题又严重影响着应 ...
mybatis 针对SQL Server 的主键id生成策略
SQL Server中命令: select newId() ,可以得到SQL server数据库原生的UUID值,因此我们可以将这条指令写到 Mybatis的主键生成策略配置selectKey中. ...
C#中Serializable序列化
序列化就是是将对象转换为容易传输的格式的过程,一般情况下转化打流文件,放入内存或者IO文件中.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象,或 ...
解决LayoutItem lable 太长的问题
<Style TargetType="dxlc:LayoutItem"> <Setter Property="AddColonToLabel" ...
转码：gcc在代码中禁止某些warning
http://www.itye.org/archives/3125 gcc 禁止warning 熟悉windows编程的人都知道,禁止编译器输出某个warning,在代码中可以这样 #pragma w ...
php各版本下载
Index of /php5/ File name File size Date Parent directory/ - - pecl-5.0.0-Win32.zip 954306 13-Jul-20 ...

Emmet初探2

Emmet初探2的更多相关文章

随机推荐

热门专题