Emmet in html/css 语法总结-前端必知必会快捷键

Emmet语法生成HTML标签

  • 空白文档输入“!(英文)+table键”即可生成HTML骨架

示例(必须是英文输入)

Emmet in html/css 语法总结-前端必知必会快捷键
Emmet in html/css 语法总结-前端必知必会快捷键

  • 直接打标签名,按下table键自动生成<>
  • 如果想要生成多个标签名,则可直接标签名数字。例如:div3可生成三个div。
  • 想生成父子关系标签,可使用>, 例如:ul>li
  • 如果想生成兄弟标签,可使用+, 例如:div+p
  • 如果想生成带类名或带ID名的,直接写.demo和#two +table键即可
  • 如果想生成的div名是有顺序的,使用自增符号$.
    Emmet in html/css 语法总结-前端必知必会快捷键
    Emmet in html/css 语法总结-前端必知必会快捷键
  • 想要在生成的标签里面自带内容,可以使用{}。例如:div{…}+table

Emmet 快速生成css语句

  • css基本上采取简写的方法
    例如:
    w200+table 生成 width:200px;
    h200+table 生成 height:200px;
    lh26+table 生成 line-height:26px;