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快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

SpringBoot3集成swagger文档的使用方法

《SpringBoot3集成swagger文档的使用方法》本文介绍了Swagger的诞生背景、主要功能以及如何在SpringBoot3中集成Swagger文档,Swagger可以帮助自动生成API文档... 目录一、前言1. API 文档自动生成2. 交互式 API 测试3. API 设计和开发协作二、使用

基于C#实现将图片转换为PDF文档

《基于C#实现将图片转换为PDF文档》将图片(JPG、PNG)转换为PDF文件可以帮助我们更好地保存和分享图片,所以本文将介绍如何使用C#将JPG/PNG图片转换为PDF文档,需要的可以参考下... 目录介绍C# 将单张图片转换为PDF文档C# 将多张图片转换到一个PDF文档介绍将图片(JPG、PNG)转

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

C++语法知识点合集:11.模板

文章目录 一、非类型模板参数1.非类型模板参数的基本形式2.指针作为非类型模板参数3.引用作为非类型模板参数4.非类型模板参数的限制和陷阱:5.几个问题 二、模板的特化1.概念2.函数模板特化3.类模板特化(1)全特化(2)偏特化(3)类模板特化应用示例 三、模板分离编译1.概念2.模板的分离编译 模版总结 一、非类型模板参数 模板参数分类类型形参与非类型形参 非类型模板

Java基础回顾系列-第一天-基本语法

基本语法 Java基础回顾系列-第一天-基本语法基础常识人机交互方式常用的DOS命令什么是计算机语言(编程语言) Java语言简介Java程序运行机制Java虚拟机(Java Virtual Machine)垃圾收集机制(Garbage Collection) Java语言的特点面向对象健壮性跨平台性 编写第一个Java程序什么是JDK, JRE下载及安装 JDK配置环境变量 pathHe

Python脚本:TXT文档行数统计

count = 0 #计数变量file_dirs = input('请输入您要统计的文件根路径:')filename = open(file_dirs,'r') #以只读方式打开文件file_contents = filename.read() #读取文档内容到file_contentsfor file_content in file_contents:

bcolz文档

原文:http://bcolz.blosc.org/en/latest/reference.html First level variables bcolz.__version__'''bcolz包的版本。''' bcolz.dask_here'''是否检测到dask的最低版本。''' bcolz.min_dask_version'''需要dask的最低版本(dask是可选