Emmet快速入门

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。
通过下面的教程,我们只需要5分钟即可快速入门

Emmet语法规则

刚才说了,它使用仿CSS选择器的语法来生成代码,所以如果懂CSS的同学,对于下面的语法定义一定不会陌生。

1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。
9. Emmet还提供了连写(E*N)和自动编号(E$*N)功能。

案例

Emmet 语法

div.row#div1>button.btn.btn-success{Success Button $}$*3+button.btn.btn-danger{Danger Button $}$*3

生成的HTML

<!-- 
div.row#div1>button.btn.btn-success{Success Button $}$*3+button.btn.btn-danger{Danger Button $}$*3 
-->  
<div class="row" id="div1">  
    <button class="btn btn-success">  
        Success Button 1  
    </button>  
    <button class="btn btn-success">  
        Success Button 2  
    </button>  
    <button class="btn btn-success">  
        Success Button 3  
    </button>  
    <button class="btn btn-danger">  
        Danger Button 1  
    </button>  
    <button class="btn btn-danger">  
        Danger Button 2  
    </button>  
    <button class="btn btn-danger">  
        Danger Button 3  
    </button>  
</div>

效果

添加Boostrap CSS引用后的效果

完整文件

<html>
<head>
    <title>demo</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
</head>
<style type="text/css">
    body{
        margin: 300px 0 0 300px
    }
</style>
<body>
    <div class="row" id="div1">  
        <button class="btn btn-success">  
            Success Button 1  
        </button>  
        <button class="btn btn-success">  
            Success Button 2  
        </button>  
        <button class="btn btn-success">  
            Success Button 3  
        </button>  
        <button class="btn btn-danger">  
            Danger Button 1  
        </button>  
        <button class="btn btn-danger">  
            Danger Button 2  
        </button>  
        <button class="btn btn-danger">  
            Danger Button 3  
        </button>  
    </div>  
</div>  
</body>
</html>

热评文章