前端开发技巧Emmet使用手册

江枫| 阅读0发表时间:2016-02-18 15:50 前端


介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。

基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。


Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。

使用方法

emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。(如果与已有的快捷键有冲突的话,可以自行在编辑器中将拓展键设为其他快捷键)。

后代:>

缩写:nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul></nav>

兄弟:+

缩写:div+p+bq

<div></div><p></p><blockquote></blockquote>

上级:^

缩写: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>

分组:()

缩写: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*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

自增符号:$

缩写:ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li></ul>

缩写:h$[title=item$]{Header $}*3

h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>

缩写: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$@-*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

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li></ul>

ID和类属性

上一篇:门户网站常用大气jQuery多图相册代码 下一篇:已经没有了