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常用语法
原文链接:segmentfault.com

上一篇:diet-yadda
下一篇:tls

相关推荐

官方社区

扫码加入 JavaScript 社区