Emmet插件比较实用常用的写法

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

杂话

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

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

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

关于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插件比较实用常用的写法的更多相关文章

sublime课程3 emmet插件中的常用符号有哪些
sublime课程3 emmet插件中的常用符号有哪些一.总结一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...
前端emmet插件的一些常用用法
以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...
【转】sublime text 2中Emmet插件8个常用的技巧
因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding.html神插件可以说是.文章部分内容转自http://www.cnblogs.com/ ...
Sublime Text 2 安装emmet插件和常用快捷键
一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...
“一键”生成HTML——Emmet插件常用语法
Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...
Emmet插件使用方法总结
Emmet插件使用方法总结在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...
第 30 章使用 Emmet 插件
学习要点: 1.安装方式 2.自定义!生成 3.快速生成主讲教师:李炎恢本章主要探讨了解一下 Sublime Text3 的一个 HTML5 代码提示插件:Emmet,这个插件比自带原生的要强 ...
Sublime 插件安装、常用配置
安装:sublime + 插件安装Sublime: 官网:http://www.sublimetext.com/ 安装package control组件,之后我们会使用该组件给Sublime安装常用 ...
Emmet插件详解
http://www.ithao123.cn/content-10512551.html (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...

随机推荐

MVC5入门
http://www.cnblogs.com/youring2/p/mvc-5-examining-the-edit-methods-and-edit-view.html
React Native Android增加本地图片
将图片文件 UePbdph.png 放入与index.android.js的同目录中,在index.android.js中引入: <Image source={require('./UePbdp ...
ServiceStack 介绍
关于ServiceStack ServiceStack 官网介绍: Opensource .NET and Mono REST Web Services framework 什么是 ServiceSt ...
进阶学习js中的执行上下文
在js中的执行上下文,菜鸟入门基础这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...
c++中基类与派生类中隐含的this指针的分析
先不要看结果,看一下你是否真正了解了this指针? #include<iostream> using namespace std; class Parent{ public: int x; ...
Tips7:Unity中 Scene视图和 Game视图中视角(Camera)的控制
选中你要改变的相机,然后点击GameObject-->Align With View 选项(快捷键Ctrl+Shift+F)使相机视角和当前Sence视图中一样通过这样可以控制在Game视图( ...
【转载】利用shell脚本获取一个文件的绝对路径readlink
转载自:http://os.chinaunix.net/a2007/1118/976/000000976787.shtml #! /bin/bash echo "Path to $(base ...
[python]非常小的下载图片脚本（非通用）
说在最前面:这不是一个十分通用的下载图片脚本,只是根据我的一个小问题,为了减少我的重复性工作写的脚本. 问题起因:我的这篇博文什么是真正的程序员浏览量超过了4000+. 问题来了:里面的图片我都是用 ...
js实现页面a向页面b传参的方法
方法一:使用HTML5本地化存储(localStorage) 组件(本地最大能存储5M数据)localStorage是本地永久存储数据,是cookie的优化方法二:使用cookie将数据存放在客户的 ...
Android 学习笔记之Volley(八)实现网络图片的数据加载
PS:最后一篇关于Volley框架的博客... 学习内容: 1.使用ImageRequest.java实现网络图片加载 2.使用ImageLoader.java实现网络图片加载 3.使用NetWork ...

Emmet插件比较实用常用的写法

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

随机推荐

热门专题