Emmet 开发

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
.container
ul>.sss*2
table>tr.row*5>td.col4*5
table>.aa*2>.bb*3

• 默认属性生成

a:tel
a:mail
a:link
script:src
meta

• 表单生成

select>option[value=item$$]*3

• XML生成

root>plaer{$$}*3
root>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常用语法