看了一些关于Emmet插件写法的文档，港真，怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊

杂话

我前面有一篇【今天发现新大陆：haml和Emmet 】，其实一开始的想法是写给自己看的。

有人去阅读我的博客和评论，虽然不算多，但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)

嗯，跑偏了。总之，以后写东西不管是给自己看也好，给别人看都好。秉持着分享的精神一定认真好好的写(~Q~)

关于Emmet

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

Emmet支持的编辑器：

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有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(^为上级元素)

  1. <div></div>
  2. <div>
  3.     <p><span></span><em></em></p>
  4.     <blockquote></blockquote>
  5. </div>

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

  1. <div></div>
  2. <div>
  3.     <p><span></span><em></em></p>
  4. </div>
  5. <blockquote></blockquote>

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

  1. <ul>
  2.     <li></li>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6.     <li></li>
  7. </ul>

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

  1. <div>
  2.     <header>
  3.         <ul>
  4.             <li><a href=""></a></li>
  5.             <li><a href=""></a></li>
  6.         </ul>
  7.     </header>
  8.     <footer>
  9.         <p></p>
  10.     </footer>
  11. </div>

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

  1. <div>
  2.     <dl>
  3.         <dt></dt>
  4.         <dd></dd>
  5.         <dt></dt>
  6.         <dd></dd>
  7.         <dt></dt>
  8.         <dd></dd>
  9.     </dl>
  10. </div>
  11. <footer>
  12.     <p></p>
  13. </footer>

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

  1. <ul>
  2.     <li1 title="item1">hhh 1</li1>
  3.     <li2 title="item2">hhh 2</li2>
  4.     <li3 title="item3">hhh 3</li3>
  5.     <li4 title="item4">hhh 4</li4>
  6.     <li5 title="item5">hhh 5</li5>
  7. </ul>

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

  1. <h class="item1">hhh 1</h>
  2. <h class="item2">hhh 2</h>
  3. <h class="item3">hhh 3</h>
  4. <h class="item4">hhh 4</h>
  5. <h class="item5">hhh 5</h>

ul>li.item$$$*5($为自增,三个$为三位数字)

  1. <ul>
  2.     <li class="item001"></li>
  3.     <li class="item002"></li>
  4.     <li class="item003"></li>
  5.     <li class="item004"></li>
  6.     <li class="item005"></li>
  7. </ul>

ul>li.item$@3*5(@从3开始自增+1)

  1. <ul>
  2.     <li class="item3"></li>
  3.     <li class="item4"></li>
  4.     <li class="item5"></li>
  5.     <li class="item6"></li>
  6.     <li class="item7"></li>
  7. </ul>

ul>li.item$@-*5(@-,自减)

  1. <ul>
  2.     <li class="item5"></li>
  3.     <li class="item4"></li>
  4.     <li class="item3"></li>
  5.     <li class="item2"></li>
  6.     <li class="item1"></li>
  7. </ul>

ul>li.item$@-3*5(@-3,自减最小数字为3)

  1. <ul>
  2.     <li class="item7"></li>
  3.     <li class="item6"></li>
  4.     <li class="item5"></li>
  5.     <li class="item4"></li>
  6.     <li class="item3"></li>
  7. </ul>

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

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

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

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

(隐式标签)
.class

  1. <div class="class"></div>

em>.class

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

ul>.class

  1. <ul>
  2.     <li class="class"></li>
  3. </ul>

table>.row>.col

  1. <table>
  2.     <tr class="row">
  3.         <td class="col"></td>
  4.     </tr>
  5. </table>

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

(缩写)
a

  1. <a href=""></a>

a:link

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

hr

  1. <hr>

link

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

link.css

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

meta:utf

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

script:src

  1. <script src=""></script>

img

  1. <img src="" alt="">

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

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

(●-●) 真心讨厌弄文本格式，感觉好浪费时间……

Emmet插件比较实用常用的写法的更多相关文章

  1. sublime课程3 emmet插件中的常用符号有哪些

    sublime课程3 emmet插件中的常用符号有哪些 一.总结 一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...

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

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

  3. 【转】sublime text 2中Emmet插件8个常用的技巧

    因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding.html神插件可以说是.文章部分内容转自http://www.cnblogs.com/ ...

  4. Sublime Text 2 安装emmet插件和常用快捷键

    一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...

  5. “一键”生成HTML——Emmet插件常用语法

    Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...

  6. Emmet插件使用方法总结

    Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...

  7. 第 30 章 使用 Emmet 插件

    学习要点: 1.安装方式 2.自定义!生成 3.快速生成   主讲教师:李炎恢 本章主要探讨了解一下 Sublime Text3 的一个 HTML5 代码提示插件:Emmet,这个插件比自带原生的要强 ...

  8. Sublime 插件安装、常用配置

    安装:sublime + 插件 安装Sublime: 官网:http://www.sublimetext.com/ 安装package control组件,之后我们会使用该组件给Sublime安装常用 ...

  9. Emmet插件详解

    http://www.ithao123.cn/content-10512551.html   (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...

随机推荐

  1. 安装cvxpy遇到的问题与解决方案（ubuntu14.10,python 2.7.8）

    应该说,cvxpy的安装说明是很棒的,一步一步非常清楚,www.cvxpy.org/en/latest/install/index.html 可是,我照着做完之后,还是不能import cvxpy,不 ...

  2. [LeetCode] Combination Sum 回溯

    Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...

  3. Ubuntu 12.10

    上海交通大学更新服务器(教育网千兆接入,联通/电信线路情况不详),包含其他开源镜像: deb http://ftp.sjtu.edu.cn/ubuntu/ quantal main multivers ...

  4. maven中文乱码问题——编译错误

    新建了个web应用,用maven配置的. Java源代码采用了utf-8编码格式. 本地编译打包,报错误.   由于系统默认编码是GBK,因此需要采用utf-8来编译. 采用如下方式: 在pom中添加 ...

  5. 后端码农谈前端（CSS篇）第二课：CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  6. 调用Ajax返回500错误的解决方法

    看代码: public ActionResult UserLogin(LogOnModel model) { #region 验证码验证 #endregion OperationResult resu ...

  7. 【转载】Serial NOR Flash and U-Boot

    转载自:http://blackfin.uclinux.org/doku.php?id=bootloaders:u-boot:serial-flash U-Boot supports serial N ...

  8. Android 学习笔记之Volley开源框架解析（四）

    学习内容: 1.NetWorkDispatcher网络请求线程调度... 2.NetWork网络请求抽象类... 3.BasicNetWork网络请求抽象类的具体实现... 4.NetWorkResp ...

  9. Android学习笔记之蓝牙通信...

    PS:最近同学问我蓝牙的事,因此自己也就脑补了一下蓝牙... 学习内容: 1.如何实现蓝牙通信技术...   蓝牙通信其实是手机里很常用的一种通信方式,现在的手机中是必然存在蓝牙的,蓝牙通信也是有一部 ...

  10. HTML的学习

    PS:最近已经进入实验室了,已经算是正式的成为其中的核心成员了,虽然自己学习的并不多.但是 相信自己通过努力能够走的越来越好.条件还是蛮不错的.这次给了一个关于WEB的项目,自己的还是 没有学完JAV ...