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 →

, foo → 等等。

1.2 嵌套操作

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

1.2.1 子类：>

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

div>ul>li
输出

    

        

    

1.2.2 兄弟：+

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

div+p+dq
输出

1.2.3 向上：^

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

div+div>p>span+em
输出


    

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

div+div>p>span+em^bq
输出


    

    

你还可以使用多个^，每个^可以提升一个级别：

div+div>p>span+em^^^bq
输出


    

1.2.4 乘法：*

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

ul>li*5
输出

    

    

    

    

    

1.2.5 分组：()

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

div>(header>ul>li*2>a)+footer>p
输出

    

        

            

            

        
    
    

        

    

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

(div>dl>(dt+dd)*3)+footer>p
输出

    

        

        

        

        

        

        

    


    

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
输出

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

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

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

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

1.3.3 项目编号：$

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

ul>li.item$*5
输出

    

    

    

    

    

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

ul>li.item$$$*5
输出

    

    

    

    

    

1.3.3.1 改变编号初始值和顺序

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

ul>li.item$@-*5
输出

    

    

    

    

    

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

ul>li.item$@3*5
输出

    

    

    

    

    

一起使用顺序和初始值：

ul>li.item$@-3*5（注意：优秀级，先顺序后初始值）
输出

    

    

    

    

    

1.4 内容: {}

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

a{click me}
输出
click me

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

clickhere


clickhere

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

p>{Click }+a{here}+{ to continue}
输出
Click here to continue

在这个例子中，Click 会写入到

元素里面，因为p后面是>。

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

p{Click }+a{here}+{ to continue}
输出
Click 
here to continue

1.5 缩写格式的注意事项

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