关于html:Emmet-开发

64次阅读

共计 1075 个字符，预计需要花费 3 分钟才能阅读完成。

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*/