前言：本篇文章简单讲述了HTML和CSS中的Emmet语法，更多详细语法内容可以参见此文章
https://code.z01.com/Emmet/

Emmet 语法

Emmet语法的前身是Zen coding，它使用缩写来提高 HTML/CSS 的编写速度，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面介绍如何使用。

1.1 快速生成HTML标签

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>

如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div

如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了

如果有兄弟关系的标签，用 + 就可以了比如 div+p

如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

如果生成的div 类名是有顺序的，可以用自增符号 $

如果想要在生成的标签内部写内容可以用 { } 表示

下面分别举例讲解上述生成操作，注释内是快速生成的代码，注意每次要按 Tab 键

生成标签直接输入标签名按tab键即可

 <!-- div --><div></div>

生成多个相同标签

    <!-- div*3 --><div></div><div></div><div></div>

生成父子级关系的标签

 <!-- ul>li --><ul><li></li></ul><!-- div>s --><div><san></san></div>

生成兄弟关系的标签

 <!-- div+p --><div></div><p></p>

生成带有类名或者id名的标签

 <!-- .nav 默认在div标签中生成--> <div class="nav"></div><!-- #banner --><div id="banner"></div><!-- p.one 指定标签中生成--><p class="one"></p><!-- ul>li#two --><ul><li id="two"></li></ul>

生成的div 类名是有顺序的

 <!-- .demo*5 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div><!-- div{$}*3 --><div>1</div><div>2</div><div>3</div>

在生成的标签内部写内容

 <!-- div{emmet语法真好用} --><div>emmet语法真好用</div><!-- div{爽歪歪}*5 --><div>爽歪歪</div><div>爽歪歪</div><div>爽歪歪</div><div>爽歪歪</div><div>爽歪歪</div>

1.2 快速生成CSS样式

如 w100 按 Tab键可以生成 width: 100px;
如 lh26px 按 Tab键可以生成 line-height: 26px;

基本上输入首字母就可以出现提示，然后进行自动生成，这里不再一一赘述

1.3 快速格式化代码

VS code 快速格式化代码：Shift + Alt + F

此外，VS code 打开设置搜索format可以直接勾选自动格式化

Emmet语法——HTML和CSS快速生成代码/VS code如何快速格式化代码相关推荐

vscode 中写完代码 Ctrl + s 保存即可格式化代码或者（Shift+Alt+f）
vscode 中写完代码 Ctrl + s 保存即可格式化代码找到设置搜索emmet.include 选择在settings.json中编辑添加代码下面两行代码别忘记逗号 "edit ...
vs code保存自动格式化代码及eslint/tslint修复-太爽（丝滑般的感觉）
现在没有前后端分离的开发模式都不好意思跟同行交流.前后端分离的好处这里就不再赘述了. 本司开发的系统是基于Angular(ng zorro),TypeScript,后台采用Spring Boot.写前 ...
pycharm 怎么快速生成文件夹结构_为什么Python代码能运行但是PyCharm给我画红线？...
PyCharm在遇到模块找不到时,会使用红色波浪线提醒开发者.这本来是一个非常好的功能,但却由于另外一个问题,会给一些Python初学者造成困扰. 这一篇文章,我们讲讲工作区导致的这个问题. 首先我们 ...
mybaitis快速生成_关于Mybatis-Plus代码生成器快速使用心得
1.使用背景偶然情况下,同事介绍Mybatis-Plus有一个代码生成的功能,能够通过 AutoGenerator 快速生成 Entity.Mapper.Mapper XML.Service.Con ...
idea快速生成crud_Java / Spring：如何快速生成完整的Swagger文档CRUD REST API
idea快速生成crud 作为开发人员,我们在日常生活中经常面临的最繁琐的任务之一就是编写良好且易于理解的文档. 无论我们的文档只有几行来解释功能的核心功能,还是表明系统的来龙去脉的成熟文章都没关系. ...
vscode中怎样格式化js代码_如何在Visual Studio代码（VSCode）中格式化代码
回答(30) 2 years ago 对于那些想要自定义要格式化的JavaScript文件的人,可以使用 JSfiles 属性上的任何扩展名同样适用于HTML . { "beautify.o ...
微信小程序代码保存后，自动格式化代码
步骤: 1.在文件中找到首选项,然后点击设置,找到setting.json点击 2.在末尾添加 "editor.formatOnSave": true 3.保存之后,每次编辑保 ...
CSS基础知识（六）格式化代码及工具使用
文章目录一.格式化代码 2. 快速生成HTML结构语法 3.快速生成CSS样式语法 4.快速格式化代码 5.去掉li前面的项目符号二.snipaste工具的使用三.PS工具的使用一.格式化代码 ...
【 Sublime Text 】如何使用Sublime Text快速生成代码模板
目录背景实现 Verilog模板参考文章背景写的代码多了,会发现几乎每次都要敲那几行代码,例如写三段式状态机,我们只需要改变下内容即可,外壳永远都是一样,有没有方法来快速生成这样的模板呢? ...

Emmet语法——HTML和CSS快速生成代码/VS code如何快速格式化代码

Emmet 语法

1.1 快速生成HTML标签

1.2 快速生成CSS样式

1.3 快速格式化代码

Emmet语法——HTML和CSS快速生成代码/VS code如何快速格式化代码相关推荐

最新文章

热门文章