07 Emmet语法

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

• Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。

1.快速生成HTML结构语法

• 生成标签：直接输入标签名按下tab键即可。例如div按下tab键，就可以生成
• 如果想要生成多个相同标签，加上*就可以了。例如div*3就可以生成3个div
• 如果有父子级关系的标签，可以用>。例如ul>li就可以了
• 如果有兄弟关系的标签，用+就可以了。例如 div+p
• 如果生成带有类名或id名字的，直接写.demo或#two tab键就可以了
• 如果生成的div类名是有顺序的，可以用自增符号$，从1开始排序。
• 如果想要在生成的标签内部写内容可以用{}表示

    
      
  
      
      
      
  
      
  
      
  
      
  
      
      
  
          
  
      
      
      
  
      
  
      
      
  
      
      
  
      
      
  
      
      
      
      
  
          
  
      
      
      
  
      
  
      
  
      
  
      
  
      
      
  pink老师不是gay
      
      
  我是你爸爸，哈哈
      
  我是你爸爸，哈哈
      
  我是你爸爸，哈哈
      
  我是你爸爸，哈哈
      
  我是你爸爸，哈哈
      
      
  1
      
  2
      
  3
      
  4
      
  5
  

2.快速生成CSS样式语法

• CSS基本采用简写形式即可，如下所示：
  • 例如w200，按下tab键就可以生成width: 200px;
  • 例如lh26，按下tab键就可以生成line-height: 26px;

3.快速格式化代码

• Vscode中快速格式化代码快捷键：shift + alt + f
• 也可以设置当前保存页面的时候自动格式化代码：
  • 文件->首选项->设置;
  • 搜索emmet.include;
  • 在settings.json下的工作区设置中添加下面的语句：

  "editor.formatOnType": true,
  "editor.formatOnSave": true
  

资料下载

• 笔记及代码，欢迎star,follow,fork......