博学谷 - CSS笔记04 - emmet语法

1.作用

• 快速生成HTNL结构语法
• 快速生成CSS样式语法

2.快速生成HTML结构语法

• 生成标签：输入标签名，按tab键
  
• 生成多个相同标签，例如:div*3，生成3个div标签
  
• 父子标签，用>即可
  
• 兄弟标签，加+
  
• 生成带类名或者带id的标签，加.demo 或者#demo
  
  
• 生成的标签的类名带顺序的，用$
  
• 标签内写内容，加{}
  

3.快速生成CSS样式语法

• 使用英文首字母的简写即可
  

4.快速格式化代码

• 快捷键：shift+alt+f
• 设置自动格式化：文件 -> 首选项 -> 设置 -> 搜索emmet.include -> 在 settings.json最下面添加
  “editor.formatOnType”: true,
  “editor.formatOnSave”: true
  

{
     
    "emmet.preferences": {
     },
    "emmet.includeLanguages": {
     
    
    },
    "editor.formatOnType": true,
    "editor.formatOnSave": true
}

5.文章参考链接
a. https://www.boxuegu.com/