emmet语法简介及在Vscode中使用Emmet快速编辑代码
emmet语法简介及在Vscode中使用Emmet快速编辑代码
三、常见用法及举例
Emmet语法是有很多高级用法的。例如模拟文本/随机文本和包装文本等等之类的操作。还有一些特别特别复杂的组合
比如下面这段东西:
table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)
1
生成的东西：
<table class="table-row" role="table">
<thead>
<tr>
<td>item 120</td>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
</td>
<td>
<td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
</td>
<td>
<td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
</td>
<td>
<td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
</td>
<td>
<td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td>
</td>
</tr>
</tbody>
</table>
但是在我看来，不好意思， 我宁愿自己去敲下面这些代码，也不愿意去记这些花里胡哨的东西。本身我们使用Emmet语法就是为了偷懒而不用写大量的重复性的HTML代码而来的。如果使用了那些过于复杂的Emmet语法。是不是我们就失去了一开始的偷懒的初心呢？虽然看起来很牛逼，但是没有必要。
所以，我仅在下面举例一些比较常用，和普通程序员可能用到的使用方式。如果有大佬想要了解那些高级用法。可以去Emmet官网文档自行了解
1.生成后代元素：>
tag1>tag2表示在标签(元素)tag1内生成后代标签(元素)tag2
ul>li>a>img
1
效果:
<ul>
<li><a href=""><img src="" alt=""></a></li>
</ul>
2.生成兄弟元素：+
tag1+tag2表示在标签(元素)tag1后生成兄弟标签(元素)tag2
ul+li+a+img
1
效果:
<ul></ul>
<li></li>
<a href=""></a>
<img src="" alt="">
3.生成上级元素：^
tag1^tag2表示在标签(元素)tag1的父级后生成兄弟标签(元素)tag2，如果有两个^符号，则再提升一级(向上找父亲)，以此类推
ul>li>a^li>span^^input
1
效果
<ul>
<li><a href=""></a></li>
<li><span></span></li>
</ul>
<input type="text">4.生成多个元素：*
tag1*n表示生成n个标签(元素)tag1
ul>li*3
1
效果
<ul>
<li></li>
<li></li>
<li></li>
</ul>5.生成类名和id：. 和#
tag1.classname1表示给标签(元素)tag1添加类名classname1，可添加多个类名，若没有写tag1则默认创建一个类名为classname1的div
创建带有指定class样式的标签：div.box
<div class="box"></div>创建带有指定id样式的标签：div#box
<div id="box"></div>一个标签创建多个class：div.box1.box2.box3
<div class="box1 box2 box3"></div>一个标签同时创建class和id：div.box#box2
<div class="box" id="box2"></div>6.生成文本内容：{}
tag1{msg}表示在tag1内添加内容msg
h1{abc}效果
<h1>abc</h1>
1
7.生成属性：[]
tag1[attr1]表示给标签(元素)tag1添加属性attr1，可包含多个属性
ul>li>a[href='#']
1
效果：
ul>
<li>
<a href="#"></a>
</li>
</ul>
img[src='pic.jpg' alt='图片']
1
效果:
<img src="pic.jpg" alt="图片">
1
// 也可以自定义属性：
ul>li>test[data-content='this_is_data_value']效果:
<ul>
<li>
<test data-content="this_is_data_value"></test>
</li>
</ul>8.生成编号：$
$一般用在id名，类名，内容中；当只有一个$时，数字从1开始，当有多个$时，数字从0开始
@n可以让数字从n开始
$需搭配*使用，否则将会原样输出
ul>li.$*3
1
效果
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>ul>li.item$$${666$}*3
1
效果:
<ul>
<li class="item001">6661</li>
<li class="item002">6662</li>
<li class="item003">6663</li>
</ul>
9.生成分组：()
可更加明确地表示层次关系
ul>li>a^^input
1
可写为
(ul>li>a)+input
1
效果：
<ul>
<li><a href=""></a></li>
</ul>
<input type="text">后面还有很多上细节的东西，但是个人觉得真的没必要记，记住的话只是浪费时间而已，投入成本与回报偏差极大。
个人见解，大佬勿喷
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
