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經常使用語法