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

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


相关文章
|
1月前
|
缓存 JavaScript
Vue3 的模板语法:指令、插值语法和其他相关特性
Vue3 的模板语法:指令、插值语法和其他相关特性
124 4
Vue3 的模板语法:指令、插值语法和其他相关特性
|
10天前
|
前端开发 JavaScript 安全
使用 JSX 书写标签语言
使用 JSX 书写标签语言
|
1月前
|
前端开发 JavaScript 安全
对象属性值的黑魔法:ES8的简化语法让你的代码更简洁
对象属性值的黑魔法:ES8的简化语法让你的代码更简洁
|
7月前
|
程序员
markdown模式的一些语法
markdown模式的一些语法
37 0
|
7月前
|
JavaScript
【Vue】大悟!模板语法-插值语法&指令语法
【Vue】大悟!模板语法-插值语法&指令语法
|
10月前
|
JavaScript 前端开发
javaScript的基本语法结构
javascript区分大小写。这就意味着他的关键字,变量,函数名和其他标识符必须始终保持一致的大小写格式
|
11月前
|
JavaScript 前端开发 C#
js基础③—注释、快捷键、命名规则、打印、面向对象?
head标签中添加<script type="text/javascript"></script>
|
C#
Markdown各标签使用用法
标签和文本之间要有一个空格
114 0
支持mermaid语法
支持mermaid语法
97 0
|
前端开发 JavaScript PHP
25个有用的 JavaScript 单行代码
JavaScript 有很多单行代码的实用例子,它们可以做很多强大的事情,无论你是 JavaScript 新手还是经验丰富的开发人员,学习些新东西总是好的。
25个有用的 JavaScript 单行代码

热门文章

最新文章