Emmet 是一个编辑器插件，它以一种简写的语法规则可用于快速编写html或css文档内容，它支持多种编辑器。

从官网：http://emmet.io/ 可下载各个编辑器的插件。
notepad++ 插件下载地址为：https://github.com/emmetio/npp#readme
也可以从Notepad++ “插件”->“插件管理器”菜单中安装Emmet插件，如果是手动下载安装包方式安装还需要安装Python插件。
安装好插件后可以在“设置”-》“快捷键管理”菜单中修改快捷键配置为Tab键，这样只需要在编辑器中输入Emmet代码然后按Tab键就可以生成对应的html代码了。

Emmet支持的简写规则，类似于CSS选择器。（大写的E代表一个HTML标签）：

E: 生成<E></E>

E#N: 生成<E id="N"></E>

E.N: 生成<E class="N"></E>

E{value}: 生成<E>value</E>

E+N: 生成<E></E><N></N>

E>N: 生成<E><N></N><E>

B>E^N: 生成<B><E></E></B><N></N>. >表示下级，^表示上级

E[attr1="foo1" attr2="foo2"]: 生成<E attr1="foo1" attr2="foo2"></E>

E*n:生成n个<E></E>

E$*n: 自动编号，生成<E1></E1><E2></E2>...<EN></EN>, $表示一位数字，如果$$表示01开始编号，$$$表示001开始编号

E$@m*n: 从m开始自动编号。

E$@-*n: 倒序自动编号，生成<EN></EN>...<E1></E1>

(E): 分组

请看下面的例子。

p

　　

p#main.item

　　

a[href=http://wikipedia.org]{维基百科}

　　

div>p

　　

div+p

　　

p>span^div

对应的HTML代码为：

<p></p>

　　

<p id="main" class="item"></p>

　　

<a href="http://wikipedia.org">维基百科</a>

　　

<div>

　　<p></p>

</div>

　　

<div></div>

<p></p>

　　

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

<div></div>

html:5或！ : 生成html5骨架代码，如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

html:xt :生成html4 traditional 骨架代码。
html:4s : 生成html4 strict 骨架代码。

[1] 不错的Emmet教程：http://www.tedlife.com/qian_duan_dai_ma_li_qi_emmet.html

[2] Emmet的高级功能：http://salonglong.com/emmet-advanced.html

[3] Emmet全部符号介绍：http://docs.emmet.io/cheat-sheet/

快速编写HTML,CSS代码的有力工具Emmet插件的更多相关文章

  1. 四、Emmet：快速编写HTML,CSS代码的有力工具

    介绍 Emmet是一个插件,在IDE中安装该插件后即可使用该功能. HTML代码写起来虽简单,但是重复代码很多,Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法),比如 div.c ...

  2. 转:Emmet：快速编写HTML,CSS代码的有力工具

    http://www.cnblogs.com/xiazdong/p/3562179.html  试着用用

  3. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  4. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  5. Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧

    Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...

  6. Sublime Text 2/3 安装Emmet(Zencoding)以及常见使用，一种快速编写HTML/CSS代码的方法

    原文链接http://blog.csdn.net/shirley254/article/details/52336744

  7. 编写优秀 CSS 代码的 8 个策略

    编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / H ...

  8. 编写优秀CSS代码的8个策略

    编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / H ...

  9. 20个编写现代 CSS 代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

随机推荐

  1. psql: 致命错误: 用户 "postgres" Ident 认证失败

    RedHat: 问题: psql -U postgres 时出现:psql: 致命错误:  用户 "postgres" Ident 认证失败 解决: 修改 /var/lib/pgs ...

  2. 《Prism 5.0源码走读》Prism 5.0简介

    Prism是一个开发和设计模块化WPF应用的基础框架,里面包含了MVVM pattern和设计示例.当前最新的版本是Prism 5.0,官方网站:https://compositewpf.codepl ...

  3. Map，HashMap

    Map(映射),又称为字典(Dictionary),是由关键字(Key)及其对应的元素值(Value)所组成的元素单元(Element)的表单式集合. 通常,对于Map而言,使用给定的Key,可以迅速 ...

  4. NOJ1018-深度遍历二叉树

    题目要求很简单,前中后序遍历一棵二叉树.坑爹的是这道题的输入数据和测试数据压根不一样,找了好久原因,去讨论区看见有别人发的测试样例,修改了一下就AC了 测试样例是这个:DEH##FJ##G#CK### ...

  5. Knockout应用开发指南 第一章：入门

    2011-11-21 14:20 by 汤姆大叔, 20165 阅读, 17 评论, 收藏,  编辑 1    Knockout简介 (Introduction) Knockout是一个轻量级的UI类 ...

  6. 开启Objective-C --- OC基础知识

    一.Objective-C简述      Objective-C通常写作ObjC和较少用的Objective C或Obj-C,是扩充C的面向对象编程语言.Objective-C主要用于:编写iOS操作 ...

  7. 自学asp.net mvc(一)

    之前一直做asp.net的webform,现在想学习一下mvc,把自学中遇到的问题记录到博客. 一.codeplex上托管代码 1. 2. 3. 4. 5. 6. 7. 8. 9.

  8. java程序用做windows服务

    具体步骤在这里 http://www.doc88.com/p-360144091164.html 遇到错误: JVM did not exit on request, terminated 通过下面的 ...

  9. Asp.NET网站Session浅谈

    .NET网站在Web.config的<configuration>下<system.web>下<sessionState>配置session. sessionSta ...

  10. Protocol-RS-232/422/485标准

    引: 通常的微处理器都集成有1路或多路硬件UART通道,可以非常方便地实现串行通讯.在工业控制.电力控制.智能仪表等领域中,也常常使用简便易用的串行通讯方式作为数据交换的手段. 但是,在工业控制等环境 ...