新浪微博 Github

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

介绍

  • Emmet是一个插件，在IDE中安装该插件后即可使用该功能。
  • HTML代码写起来虽简单，但是重复代码很多，Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法)，比如
div.c1>ul>li*4

 (按下tab)将生成如下HTML代码，是不是非常方便：

<div class="c1">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

支持Emmet插件的编辑器

基本用法

  • 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): 分组
  • html:5或！ : 生成html5骨架代码，如下：
  • html:xt :生成html4 traditional 骨架代码。
  • html:4s : 生成html4 strict 骨架代码。

例子

这个例子可以自己试试看最后的结果是什么。

html:5>div.container>(nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}+ul.nav.navbar-nav>li*2>a.menu-\${Menu Item \$})+(div.jumbotron.text-center>h1{Crazy Fast HTML}+p+a#go-button.btn.btn-danger{Learn More})+(div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmmet}+p))

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <a href="" class="navbar-brand">Crazy Fast</a>
                <ul class="nav navbar-nav">
                    <li><a href="" class="menu-1">Menu Item 1</a></li>
                    <li><a href="" class="menu-2">Menu Item 2</a></li>
                </ul>
            </div>
        </nav>
        <div class="jumbotron text-center">
            <h1>Crazy Fast HTML</h1>
            <p></p>
            <a href="" id="go-button" class="btn btn-danger">Learn More</a>
        </div>
        <div class="row text-center">
            <div class="col-sm-4">
                <div class="info-box">
                    <span class="glyphicon glyphicon-fire"></span>
                    <h2>Lions</h2>
                    <p></p>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="info-box">
                    <span class="glyphicon glyphicon-send"></span>
                    <h2>Emmmet</h2>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
View Code

参考文献

[1] Emmet入门：http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

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

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

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

posted @ 2014-02-24 08:52  xiazdong  阅读(2125)  评论(3)  编辑  收藏  举报