Emmet: 高级的代码补全,让我们写代码更快。

话不多说,开干!


1.写某个标签然后按tab键自动补全【缩写补全】

一文学会HTML速写Emmet语法

一文学会HTML速写Emmet语法

2.  嵌套的缩写

一文学会HTML速写Emmet语法

一文学会HTML速写Emmet语法

 

其中 嵌套中有这些字符:> + ^ * () 

 > 代表父子关系

* 代表重复

+一文学会HTML速写Emmet语法一文学会HTML速写Emmet语法

所以,+代表同级元素

^ 代表一文学会HTML速写Emmet语法一文学会HTML速写Emmet语法

所以^ 代表网上爬升一级。

()代表让逻辑关系更加清晰:

一文学会HTML速写Emmet语法

3. 属性:

特殊符号:# .

# 代表id

. 代表class

一文学会HTML速写Emmet语法

关于自定义属性:[]

 

一文学会HTML速写Emmet语法

一文学会HTML速写Emmet语法

4. 带有数字编号的class: $符号

一文学会HTML速写Emmet语法

5. 填充文本: {}

一文学会HTML速写Emmet语法

6. 填补无意义的文字:

一文学会HTML速写Emmet语法

如果想规定生成的单词个数,可以像这样:

一文学会HTML速写Emmet语法

Emmet语法注意:中间不要加空格,光标要移到末尾。

Emmet还可以在css中应用:

一文学会HTML速写Emmet语法

一文学会HTML速写Emmet语法

 

一文学会HTML速写Emmet语法

 一文学会HTML速写Emmet语法

一文学会HTML速写Emmet语法

 等等

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章:

  • 2021-11-19
  • 2021-11-23
  • 2022-12-23
  • 2021-05-31
  • 2021-11-13
  • 2021-06-13
  • 2021-09-30
猜你喜欢
  • 2021-11-21
  • 2021-05-26
  • 2022-12-23
  • 2022-12-23
  • 2021-09-27
  • 2022-01-14
  • 2022-12-23
相关资源
相似解决方案