1：Emmet语法

原文地址：http://docs.emmet.io/abbreviations/syntax/

下面是本人对原文的翻译和理解，本人四级没过，翻译不好的地方请见谅

Emmet插件支持Sublime Text、eclipse、Notepad++、NetBeans、DW等，Emmet默认的解析快捷键是ctrl+e或tab键，更具不用的使用环境不同

缩写语法

EMMET使用类似于CSS选择器的语法，用来描述生成的标签树中元素的位置和元素的属性

1.1 元素

你可以使用元素（比如：div、p）来生成HTML标签。emmet没有预定义一组可用的标记名，你可以使用任意的单词，转换成标签： div → <div></div>, foo → <foo></foo>等等。

1.2 嵌套操作

嵌套操作符用来定位生成的元素树中缩写元素的位置：是否应该放在元素里面或者靠近元素。

1.2.1 子类：>

你可以使用>来嵌套元素在此元素里面：

div>ul>li输出<div>    <ul>        <li></li>    </ul></div>

1.2.2 兄弟：+

使用+来生成同一级的元素

div+p+dq输出<div></div><p></p><blockquote></blockquote>

1.2.3 向上：^

使用>，来描述生成的树的子类和所有兄弟元素的位置，这将会对最里层的元素产生很大的影响：

div+div>p>span+em输出<div></div><div>    <p><span></span><em></em></p></div>

使用^，使元素提升一个级别，改变相邻的元素应该出现语境：

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>

1.2.4 乘法：*

使用*，你可以定义元素要输出多少次：

ul>li*5输出<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>

1.2.5 分组：()

用户使用()来对复杂的缩写语法进行分组：

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>

如果你正在使用浏览器DOM，你会觉得分组相当于文档片段：每个片段包含缩写子树，且所有相邻的元素被插入到同一级的第一个元素组。
你可以在分组里面嵌套使用*

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

1.3 属性操作

属性操作是用来修改出处元素的属性的。例如，在HTML或者XML中，你可以快速的为生成的元素添加class属性。

1.3.1 ID和CLASS

在CSS中，使用elem#id 或者 elem.class来指定ID和class属性。在Emmet中，你可以使用非常相似的语法来添加这些属性到指定的元素：

div#header+div.page+div#footer.class1.class2.class3输出<div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div>

1.3.2 自定义属性：使用方括号“[]”

你可以使用[attr]表示法（同样在CSS中）在你的元素中添加自定义属性：

td[title="Hello world!" colspan=3]输出<td title="Hello world!" colspan="3"></td>

你可以放置任意多个属性在方括号内。
你不必指定属性值：td[colspan title]将使用制表位来替换空属性值，输出<td colspan="" title="">
你可以使用单引号“'”或者双引号“"”把属性值引起来。
如果属性值不为空，你可以不使用引号引起来：td[title=hello colspan=3]可以正常工作

1.3.3 项目编号：$

使用*，你可以重复输出元素，当然，使用$，你可以这些元素进行编号。在元素名、属性名或者属性值后面，放置$来重复输出元素、编号属性名或者属性值：

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>

在一排中，你也可以使用多个$来补0：

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>

1.3.3.1 改变编号初始值和顺序

通过使用@修饰符，你可以变换编号的顺序（升序或降序）和初始值
例如，变换顺序，在$后面添加@-

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>

变换初始值，在$后面添加@N，N表示初始值

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>

一起使用顺序和初始值：

ul>li.item$@-3*5（注意：优秀级，先顺序后初始值）输出<ul>    <li class="item7"></li>    <li class="item6"></li>    <li class="item5"></li>    <li class="item4"></li>    <li class="item3"></li></ul>

1.4 内容: {}

你可以使用大括号为元素添加文本内容：

a{click me}输出<a href="">click me</a>

注意，{text}被使用和解析成一个独立的元素（像div、p等等），当放置在元素右边，有特殊的意义：比如，a{click} 或 a>{click}将输出一样，但是a{click}+b{here} 或 a>{click}+b{here}输出：

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

在这个例子中，<b>元素是在<a>元素中。这就是区别：当{text}直接放置在元素右边，它不会改变父类语境。下面有更加复杂的例子来说明它的重要性：

p>{Click }+a{here}+{ to continue}输出<p>Click <a href="">here</a> to continue</p>

在这个例子中，Click 会写入到<p>元素里面，因为p后面是>。

为了进行对比，下面这个例子，没有使用>

p{Click }+a{here}+{ to continue}输出<p>Click </p><a href="">here</a> to continue

1.5 缩写格式的注意事项

当你熟悉Emmet的缩写语法之后，你可能会想使用一些格式让你的代买看起来更加具有可读性。比如，在元素和操作符之间使用空格，就像下面：
(header > ul.nav > li*5) + footer
但它不会起作用，因为空格是一个停止符号来让Emmet停止解析