emmet语法简介及在Vscode中使用Emmet快速编辑代码
Emmet语法
一、Emmet语法简介
1、什么是Emmet？
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码
请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!
语法基本规则如下:
E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
二、基础用法
1、元素(Elements)
我们可以使用元素的名称，如div或p来生成HTML标签。Emmet没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>2、文本操作符(Text)
如果想在生成元素的同时添加文本内容可以使用{}
Copydiv{这是一段文本}
<div>这是一段文本</div>
a{点我点我}
<a href="">点我点我</a> 3、属性操作符(Attribute operators)
属性运算符用于修改输出元素的属性.
Id和Class (elem#id and elem.class )
Copydiv.test => <div class="test"></div>
div#pageId => <div id="pageId"></div>1
2
隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不同的.
Copy.class
=>
<div class></div>
em>.class
=>
<em><span class></span></em>
table>.row>.col
=>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
绑定多个类名用.符号连续起来即可
Copydiv.test1.test2.test3
=>
<div class="test1 test2 test3"></div>自定义属性使用 [attr1=’’ attr2=’’]
Copya[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
