HTML速写之Emmet语法规则

缩写语法

Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性。

嵌套操作符

> （子元素）

可以使用 > 运算符将元素嵌套在彼此内部

较准确的含义是：使用 **>** 运算符，您将下降生成的树，所有兄弟元素的位置将根据最深的元素解析

div>ul>li

表现为：

+ （兄弟元素）

使用 + 运算符将元素以相同层级放在同一父元素上

div+p+bq

表现为：

^ 返回上层

• 使用 ^运算符，您可以爬上树的一个层次，并更改上下文

div+div>p>span+em^bq

表现为：

    

    


// 此时的上下文返回到两个div所在的这一层了

• 当然了，^ 也可以多个并用，有几个 ^ 就返回几层

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

表现为：

    



// 此时上下文已经返回到最外层了

这里要注意，最多返回到跟第一个元素同级的,以上面的例子，^^ 已经返回到了最外层，跟 ^^^ 的效果是一样的

* 乘法

使用 ***** 操作符，您可以定义应该输出多少次该元素，跟我们加减乘除里的乘法含义相近

ul>li*5

表现为：

()分组

() 操作符对复杂的子元素进行分组，简而言之，每个()中都是一个独立的子元素

适用于某个子元素比较复杂的情况

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

表现为：

可以将分组当作 Document Fragments，后续元素将与分组第一个元素同级。

分组嵌套，并且使用 * 操作法：

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

表现为：

使用分组后，可以用一个缩写来生成整个页面，不过不建议这么做。[1]

属性操作符(Attribute operators)

顾名思义，就是HTML中的属性，因为我们的页面不光有单纯的HTML，还有各式各样的属性，操作或者创建这些属性就需要用到属性操作符了

ID 和 Class

Emmet使用类似于CSS选择器的语法给元素添加属性

div#header+div.page+div#footer.class1.class2.class3

表现为：

那我们在实际开发中可能除了常用的属性外，还会用一些自定义的属性，那如果创建呢？

自定义属性(Custom attributes)

您可以使用类似CSS中的符号 [attr="xxx"] 向元素添加自定义属性

div[title="Hello world!" colspan=3]

表现为：

需要说明的是：

1. 方括号内的属性数量不限，如果你喜欢，可以一直加
2. 如果不是默认属性值的话会生成插入占位 比如：div[title colspan] 会变成
   前提是编辑器支持这样的写法
3. 属性值可以使用单引号或者双引号都可以
4. 属性值如果不包含空格可以省去引号

$编号(Item numbering)

操作符可以生成重复元素，而 放在元素名、属性名或者属性值里

ul>li.item$*5

表现为：

如果想实现00x的格式，该怎么办呢？

可以连写多个$就可以生成带有前导的编号了

ul>li.item$$$*5

表现为：

那如果我想实现降序呢？

使用 @ 修饰符，可以改变编号的方向以及起点

ul>li.item$@-*5

理论上，应该表现为[2]：

如果想改变起点，不从1开始，可以使用 @N 放在 $ 后面

ul>li.item$@3*5

表现为：

当然了，你也可以将多种修饰符混合使用[3]

ul>li.item$@-3*5

理论上的表现：

Text: {}文本

可以使用大括号 {}为元素添加文本，就类似于模板的插入符

div{hello world}

表现为：

hello world

需要注意的是{text}类似于独立元素(例如div,p)。不过当它紧跟在元素后面时就有特殊的含义了

比如 a{click} 和 a>{click} 结果一样，而 a{click}+b{here} 和 *a>{click}+b{here}* 结果不一样

clickhere


clickhere

在第二个例子中的b标签是在a标签内。这就是不同点：当{text}紧跟在元素后面时，它没有改变父元素的上下文

可以再用一个比较复杂的例子来说明：

p>{Click me }+a{here}+{ to continue}

表现为：

Click me here to continue

在上面的例子里，我们为了让p标签包含Click me，所以用 > 进入子结构，因为现在的上下文已经是p标签的子结构，所以a标签也在p标签内

如果我们想让 p 和 a 在同一层级，同时两者都包含文本的话，我们应该怎么做呢？

p{click me}+a{here}+{ to continue}

表现为：

Click me
here to continue

这样p和a都在同一层级，就满足要求咯~

注意事项

以上所有的语法，都不能出现空格，除非是在特定的括号中。因为Emmet在遇到空格时，就认为已经结束，会停止解析。