Emmet文档缩写语法

本文主要是介绍Emmet文档缩写语法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• 缩略语法
  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 -->

这篇关于Emmet文档缩写语法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---