Emmet 快速编写html代码

简介

快速编写HTML代码

语法简单，语法类似css选择器，30分钟内你就可以搞定它。开发商为sublime、atom、brackets、hbuilder、webstrom等编辑器或IDE提供对应的插件，你可以在你喜欢的编辑器中使用它。它还支持对css快速编辑功能。

• Emmet官网
• Emmet官方文档
• Emmet官方下载

缩写

缩写是emmet工具包的核心：这些特殊的表达式在运行时被解析，并转化为对应的结构化代码块（例如html)。缩写语法像css选择器，这样web开发人员可以轻易的使用它，通常情况下按下tab或ctrl+e会生成对应的代码。

#page>div.logo+ul#navigation>li*5>a{Item $}

可以转换为...

div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

语法

官网语法介绍文档：http://docs.emmet.io/abbreviations/syntax/

元素

比如p、h1元素，会生成标签<p></p>、<h1></h1>，并且你可以写任意文字将会转化为标签tt-><tt></tt，意味着emmet可以用于编辑xml等标记语言。

嵌套的运算符

用嵌套的运算符来代表html中dom元素的树形结构

子层：>

div>ul>li

生成...

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

兄弟层：+

header+nav+section+footer

生成...

<header></header>
<nav></nav>
<section></section>
<footer></footer>

上层：^

header>h1^nav

生成...

<header>
		<h1></h1>
	</header>
	<nav></nav>

乘法：*

ul>li*4

生成...

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

分组：()

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>

属性运算符

用于修改输出元素的属性。例如，可以在html和xml中生成元素的class属性。

ID和CLASS：# .

在css中可以使用div#id和div.class来设置指定元素并指定id或class的样式。在emmet中，同样可以使用这些语法来为html元素添加属性，并指定值。

div#header+div.navigation+div.footer

生成...

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性：[]

您可以使用[attr1="value1" attr2=value2]的形式来添加元素属性值。

a[href=index.html title=index]

生成...

<a href="index.html" title="index"></a>

• 空格分隔多个属性
• 值处的引号可以省略
• emmet自动为元素生成必须的属性

项目编号： `###

随着乘法*运算符可以重复的元素，但$你可以编号它们。

ul>li.item$*3

生成...

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

您可以使用多个$成一排用零垫编号：

ul>li.item$$$*3

生成...

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

修改编号方向：$@-

在序号$后添加@-，实现项目标号的反序。

ul>li.item$@-*3

生成...

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

开始值：$@3

修改计算基值，在序号$后添加@数字。

ul>li.item$@2*3

...转换为

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

您可以一起使用这些修饰符：

ul>li.item$@-3*5

文本：{}

a{hello}

生成...

<a href="">hello</a>

复杂一点的

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

隐式标记

emmet解析器根据表达式上下文（父子关系），推导出被省略元素的类型。从而对emmet语法的表达式再次简写。

	.header>h1#title+ul>.item*2

生成...

<div class="header">
    <h1 id="title"></h1>
    <ul>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

常见规则：

1. 上下文无法获得元素时，产生div元素；
2. li对应于ul ol，例如，ul>.item -> <ul><li class="item"></li></ul>；
3. tr对应于table thead tbody tfoot；
4. td对应于tr；
5. option对于select optgroup；

填充文本：lorem

编写的静态网页常常做为动态网页的模版，你不得不填写一些无用的文本来撑起整个页面。

ul>li*2>lorem2

生成...

<ul>
    <li>Lorem ipsum.</li>
    <li>Alias, dolorum?</li>
</ul>

• lorem然后执行emmet会生成30个单词;
• lorem10会生成10个单词;