缩写语法
Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性。
嵌套操作符
> （子元素）
可以使用 > 运算符将元素嵌套在彼此内部
较准确的含义是：使用 **>** 运算符，您将下降生成的树，所有兄弟元素的位置将根据最深的元素解析
div>ul>li
表现为：
<div>
<ul>
<li></li>
</ul>
</div>
+ （兄弟元素）
使用 + 运算符将元素以相同层级放在同一父元素上
div+p+bq
表现为：
<div></div>
<p></p>
<blockquote></blockquote>
^ 返回上层
- 使用 ^运算符，您可以爬上树的一个层次，并更改上下文
div+div>p>span+em^bq
表现为：
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
// 此时的上下文返回到两个div所在的这一层了
- 当然了，^ 也可以多个并用，有几个 ^ 就返回几层
div+div>p>span+em^^bq
表现为：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
// 此时上下文已经返回到最外层了
这里要注意，最多返回到跟第一个元素同级的,以上面的例子，^^ 已经返回到了最外层，跟 ^^^ 的效果是一样的
* 乘法
使用 ***** 操作符，您可以定义应该输出多少次该元素，跟我们加减乘除里的乘法含义相近
ul>li*5
表现为：
<ul>
<li></li>
<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>
可以将分组当作 Document Fragments，后续元素将与分组第一个元素同级。
分组嵌套，并且使用 * 操作法：
(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]
属性操作符(Attribute operators)
顾名思义，就是HTML中的属性，因为我们的页面不光有单纯的HTML，还有各式各样的属性，操作或者创建这些属性就需要用到属性操作符了
ID 和 Class
Emmet使用类似于CSS选择器的语法给元素添加属性
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>
那我们在实际开发中可能除了常用的属性外，还会用一些自定义的属性，那如果创建呢？
自定义属性(Custom attributes)
您可以使用类似CSS中的符号 [attr="xxx"] 向元素添加自定义属性
div[title="Hello world!" colspan=3]
表现为：
<div title="Hello world!" colspan="3"></div>
需要说明的是：
- 方括号内的属性数量不限，如果你喜欢，可以一直加
- 如果不是默认属性值的话会生成插入占位 比如：div[title colspan] 会变成 <div title="" colspan=""> 前提是编辑器支持这样的写法
- 属性值可以使用单引号或者双引号都可以
- 属性值如果不包含空格可以省去引号
$编号(Item numbering)
操作符可以生成重复元素，而 放在元素名、属性名或者属性值里
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>
如果想实现00x的格式，该怎么办呢？
可以连写多个$就可以生成带有前导的编号了
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>
那如果我想实现降序呢？
使用 @ 修饰符，可以改变编号的方向以及起点
ul>li.item$@-*5
理论上，应该表现为[2]：
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
如果想改变起点，不从1开始，可以使用 @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>
当然了，你也可以将多种修饰符混合使用[3]
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>
Text: {}文本
可以使用大括号 {}为元素添加文本，就类似于模板的插入符
div{hello world}
表现为：
<div>hello world</div>
需要注意的是{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 me }+a{here}+{ to continue}
表现为：
<p>Click me <a href="">here</a> to continue</p>
在上面的例子里，我们为了让p标签包含Click me，所以用 > 进入子结构，因为现在的上下文已经是p标签的子结构，所以a标签也在p标签内
如果我们想让 p 和 a 在同一层级，同时两者都包含文本的话，我们应该怎么做呢？
p{click me}+a{here}+{ to continue}
表现为：
<p>Click me</p>
<a href="">here</a> to continue
这样p和a都在同一层级，就满足要求咯~
注意事项
以上所有的语法，都不能出现空格，除非是在特定的括号中。因为Emmet在遇到空格时，就认为已经结束，会停止解析。
网友评论