本文主要是介绍Emmet文档缩写语法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
缩写语法
- 1. 单个元素:元素+tab键
- 2. 子元素:>
- 3. 兄弟元素:+
- 4. 爬升:^
- 5. 乘法:*
- 6. 分组:( )
- 7. 属性:#id、.class、[ ]自定义
- 8. 编号:$
- 9. 更改编号基础和方向:@
- 10. 文本:{ }
- 11. 缩写格式注释:在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文档缩写语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!