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罕用语法