emmet语法使用

496 阅读1分钟

emmet语法前身原名为Zen coding,使用所写以用于提高html/css的编写速度,Vs code内部已经集成该语法

emmet语法用于快速生成html标签以及css样式(输入单词首字母以及数字后摁下tab键):
快速生成css样式:

快速生成文本居中: text align: center; tac
快速生成首行缩进: text-indent: 2em; ti2e
快速生成文本装饰: text-decoration: none; tdn

快速生成html标签:

生成标签(手动输入):<标签名></标签名>
标签名+tab键
一次生成多个相同的标签:<标签名></标签名>(重复输入)
标签名*n+tab键
生成父子级关系的标签:<父级标签><子级标签></父级标签></子级标签>
父级标签>子级标签+tab键
生成相同级关系的标签:<标签名1></标签名1><标签名2></标签名2>
标签名1+标签名2+tab键
生成带有类名或者ID的标签:<?div class="标签名"></?div>/<?div id="标签名"></?div>
.标签名+tab键/#标签名+tab键
生成的多个div类名标签按顺序分布:<?div class="name1"></?div><?div class="name2"></?div>
.name$*2+tab键
生成的标签里默认输入内容:<?div>这是内容</?div>
div{这是内容}+tab键

以上为emmet语法使用的部分使用实例,emmet语法对我们进行代码的输入具有着巨大的意义,是前端代码书写所不可缺少的一项工具