介绍

  • 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>

参考文献

[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/

四、Emmet：快速编写HTML,CSS代码的有力工具的更多相关文章

  1. 快速编写HTML,CSS代码的有力工具Emmet插件

    Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...

  2. 转:Emmet：快速编写HTML,CSS代码的有力工具

    http://www.cnblogs.com/xiazdong/p/3562179.html  试着用用

  3. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  4. Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧

    Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...

  5. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  6. Sublime Text 2/3 安装Emmet(Zencoding)以及常见使用，一种快速编写HTML/CSS代码的方法

    原文链接http://blog.csdn.net/shirley254/article/details/52336744

  7. Emmet快速编写代码

    Emmet快速编写代码 ★div → <div></div>, span → <span></span> ★CSS选择器 ​ 给标签指定id选择器 di ...

  8. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

  9. Emmet 快速编写html代码

    简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...

随机推荐

  1. javascript 注意事项

    1.submit input 标签的 type里的submit是提交表单的按钮 提交时应注意 为 标签加上 “name=""”字段和form标签,才能达到想要的效果  2.正则表达 ...

  2. mysql 事务提交过程

     打开binlog选项后,执行事务提交命令时,就会进入两阶段提交模式.两阶段提交分为prepare阶段和commit两个阶段.流程如下 :这里面涉及到两个重要的参数:innodb_flush_log_ ...

  3. (转) C++ static、const和static const 以及它们的初始化

    const定义的常量在超出其作用域之后其空间会被释放,而static定义的静态常量在函数执行后不会释放其存储空间. static表示的是静态的.类的静态成员函数.静态成员变量是和类相关的,而不是和类的 ...

  4. HDU 1142 A Walk Through the Forest (记忆化搜索 最短路)

    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  5. WCF分布式开发步步为赢(4):WCF服务可靠性传输配置与编程开发

    今天继续WCF分布式开发步步为赢系列的第4节:WCF服务可靠性传输配置与编程开发.这个章节,我们要介绍什么是WCF服务的可靠性传输,随便介绍网络协议的概念,Web Service为什么不支持可靠性传出 ...

  6. 简易解说拉格朗日对偶（Lagrange duality）(转载)

    引言:尝试用最简单易懂的描述解释清楚机器学习中会用到的拉格朗日对偶性知识,非科班出身,如有数学专业博友,望多提意见! 1.原始问题 假设是定义在上的连续可微函数(为什么要求连续可微呢,后面再说,这里不 ...

  7. 经典SQL查询语句大全

    一.基础1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份数 ...

  8. wamp中的phpmyadmin打开出现:#1045 - Access denied for user 'root'@'localhost' (using password: NO)

    详细内容: MySQL said: #1045 - Access denied for user 'root'@'localhost' (using password: NO) phpMyAdmin ...

  9. Java-马士兵设计模式学习笔记-桥接模式

    一.概述 1.桥接模式的应用情况:(1)两个维度扩展(2)排列组合 二.代码 1.Gift.java public class Gift { protected GiftImpl giftImpl; ...

  10. Mysql笔记——DQL

    DQL就是数据查询语言,数据库执行DQL语句不会对数据进行改变,而是让数据库发送结果集给客户端. 语法: SELECTselection_list /*要查询的列名称*/ FROM table_lis ...