emmet语法快速生成结构

简介: ①父子级关系用> ②兄弟级关系用+ ③生成带类 or id名字的 直接(.demo or #two )+tab ④类名带有顺序自增符号$ ⑤在生成的标签内部写内容用{}表示

emmet语法快速生成结构


emmet语法

  • 生成HTML结构语法
  • 生成css样式
  • 格式化代码


生成HTML结构语法


1.HTML框架

"!+ tab键"

1.png

(注意是第一个感叹号)

生成之后---->

1.png

2.生成标签

输入标签名按tab键

1.png

①父子级关系用>  
 ②兄弟级关系用+
 ③生成带类  or id名字的  直接(.demo or #two )+tab
 ④类名带有顺序自增符号$
 ⑤在生成的标签内部写内容用{}表示

上图片~

1.png1.png

1.png

1.png

1.png

滚轮按住往下拉(或者shift+alt往下拉),同时书写

1.png

生成css样式


  1. w200 + tab 生成 width:200px;
  2. lh26 + tab 生成 line-height:36px;

1.png

1.png

一般来说,开头第一个字母即可。


格式化代码


设置

1.png

1.png

1.png

还有更多可秀的操作等着去探索。。。


相关文章
|
存储 Shell
Mac终端工具Terminal (3):在Mac上的终端中执行命令和运行工具
Mac终端工具Terminal (3):在Mac上的终端中执行命令和运行工具
912 0
|
JavaScript
使用Webstorm快速启动Vue项目配置
使用Webstorm快速启动Vue项目配置
228 0
|
存储 安全 Java
jdk21的外部函数和内存API(MemorySegment)(官方翻译)
本文介绍了JDK 21中引入的外部函数和内存API(MemorySegment),这些API使得Java程序能够更安全、高效地与JVM外部的代码和数据进行互操作,包括调用外部函数、访问外部内存,以及使用不同的Arena竞技场来分配和管理MemorySegment。
448 1
jdk21的外部函数和内存API(MemorySegment)(官方翻译)
|
IDE 开发工具 C++
插件:CLion中使用C/C++ Single File Execution插件编译和运行单个文件
插件:CLion中使用C/C++ Single File Execution插件编译和运行单个文件
1140 0
|
程序员 开发者
IDEA插件-Rainbow Brackets彩虹括号
DEA插件-Rainbow Brackets是一款用于增强IDEA开发环境的工具,它可以帮助开发者更好地管理和展示代码中的括号。
3806 0
IDEA插件-Rainbow Brackets彩虹括号
Typora 主题,设置代码块Mac风格三个小圆点
Typora 编辑器让人们能更简单地用**Markdown语言**书写文字,解决了使用传统的Markdown编辑器写文的痛点,并且界面简洁优美,实现了实时预览等功能。
1022 1
|
Shell 程序员
Mac终端工具Terminal (1):打开和关闭终端
Mac终端工具Terminal (1):打开和关闭终端
5018 0
|
程序员 Linux
Typora文档中图片无法显示的原因及解决
Typora文档中图片无法显示的原因及解决
2796 0
Typora文档中图片无法显示的原因及解决