缩写语法
- 缩略语法
Emmet使用类似CSS选择器的语法来描述元素在生成的树中的位置和元素的属性。 - 元素
可以使用div或p等元素的名称来生成HTML标记。Emmet没有预定义的可用标记名集。可以编写任何单词并将其转换为标记:div、foo等。 - 嵌套运算符
嵌套运算符用于在生成的树中定位缩写元素:是否应该将其放置在上下元素内部或附近。
1. 单个元素:元素+tab键
<!-- p 按下tab键扩展后得到下面代码 -->
<p></p>
2. 子元素:>
可以使用>操作符将元素嵌套在彼此内部
<!-- div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>
3. 兄弟元素:+
使用+运算符将图元彼此靠近放置在同一标高上
<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>
4. 爬升:^
- 使用>操作符,从生成的树中向下下降,所有同级元素的位置将根据最深的元素进行解析
<!-- 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>
5. 乘法:*
通过*运算符可以定义元素的输出次数
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>