• 欢迎访问没有钱是我网站,投资期货、现货信息,外汇教程,推荐使本网站,欢迎加入没有钱是我

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

未分类 linux 0次浏览 未收录 0个评论 扫描二维码

关于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的功能和特性。

  • SynWrite
  • WebStorm
  • PhpStorm
  • Vim
  • HTML-Kit
  • HippoEDIT
  • CodeLobster PHP Edition
  • TinyMCE

 

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>[email protected]*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(>为后代缩写,*表示有几个)

Emmet插件比较实用常用的写法
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Emmet插件比较实用常用的写法

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

Emmet插件比较实用常用的写法
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
Emmet插件比较实用常用的写法

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

Emmet插件比较实用常用的写法
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>
Emmet插件比较实用常用的写法

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

Emmet插件比较实用常用的写法
<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>
Emmet插件比较实用常用的写法

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($为自增,三个$为三位数字)

Emmet插件比较实用常用的写法
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
Emmet插件比较实用常用的写法

ul>[email protected]*5(@从3开始自增+1)

Emmet插件比较实用常用的写法
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>
Emmet插件比较实用常用的写法

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

Emmet插件比较实用常用的写法
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
Emmet插件比较实用常用的写法

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

Emmet插件比较实用常用的写法
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>
Emmet插件比较实用常用的写法

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开始代码缩写)

Emmet插件比较实用常用的写法
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Emmet插件比较实用常用的写法

(缩写)
a

<a href=""></a>

a:link

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

hr

<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


励志走下去 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Emmet插件比较实用常用的写法
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址