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

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


相关文章
|
5月前
|
前端开发 JavaScript 安全
使用 JSX 书写标签语言
使用 JSX 书写标签语言
|
小程序
uniapp使用scss 嵌套语法
uniapp使用scss 嵌套语法
305 1
|
6月前
|
Web App开发 前端开发 JavaScript
CSS 原生嵌套语法来了!
CSS 原生嵌套语法来了!
|
程序员
markdown模式的一些语法
markdown模式的一些语法
54 0
|
JavaScript 前端开发
javaScript的基本语法结构
javascript区分大小写。这就意味着他的关键字,变量,函数名和其他标识符必须始终保持一致的大小写格式
|
前端开发
一文解读:CSS语法、注释、使用方式、选择器。
一文解读:CSS语法、注释、使用方式、选择器。
109 0
|
C#
Markdown各标签使用用法
标签和文本之间要有一个空格
131 0
|
Prometheus Kubernetes Cloud Native
Markdown编辑文档语法格式详解
Markdown编辑文档语法格式详解
支持mermaid语法
支持mermaid语法
123 0
|
存储 前端开发 程序员
【网页前端】CSS样式表入门概述以及基本语法格式和选择器
【网页前端】CSS样式表入门概述以及基本语法格式和选择器
179 0
【网页前端】CSS样式表入门概述以及基本语法格式和选择器