Emmet文档缩写语法

2024-04-21 02:18
文章标签 文档 缩写 语法 emmet

本文主要是介绍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文档缩写语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/921925

相关文章

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典(dict)有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字