Emmet 开发

Emmet是一款编辑插件,反对多种编辑器文件,在前段开发中,Emmet应用缩写语法疾速编写HTML,CSS以及实现其余性能,极大的进步了前段开发效率。
官网地址

官网地址 https://emmet.io
vscode教程: https://code.visualstudio.com/docs/editor/emmet
练习: https://gitee.com/komavideo/LearnMarkdown

语法
  • id,class属性指定(# .)
  • 批量生成(*)
  • 嵌套生成
    计算符号     >:父子关系     +:兄弟关系     ^:父层标记     main>section*3    main>section*3+button.btn.aaa    main>section*3+button.btn.aaa^footer    main.section*3^footer    div>ul*2>li*3^footer    (ul>li*3)*2
  • 默认tag生成
div.container.containerul>.sss*2table>tr.row*5>td.col4*5table>.aa*2>.bb*3
  • 默认属性生成
a:tela:maila:linkscript:srcmeta
  • 表单生成
select>option[value=item$$]*3
  • XML生成
root>plaer{$$}*3root>player#$root>player.$root>player#$.$[title="aa",name="bbb"] child>player#id*5>name{$}+age{$*2}+sex{$}+addr{$}
  • CSS更简略
***margin padding***  m10  margin: 10px;  p10  padding: 10px;  m10p  margin: 10%;  p10p  padding: 10%;  m.32r  margin: .32rem;  m10-20-30-40  margin: 10px 20px 30px 40px;  mt10  margin-top: 10px;  mb10  margin-bottom: 10px;  ml10  margin-left: 10rem;  mr.32r  margin-right: .32rem;  m-10  margin: -10px;  m-10-20  margin: -10px 20px;  margin: -10px -20px;    /*c*/  /*c#f*/  /*color: #ffffff;*/  /*color: #f0f0f0;*/  /*fz.32r*/  font-size: .32rem;  /*ta*/  /*fw:n*/  /*fw:b*/
  • CSS色彩生成
  • CSS罕用语法