Emmet语法

最新推荐文章于 2022-12-04 21:46:37 发布

Code_Leon

最新推荐文章于 2022-12-04 21:46:37 发布

阅读量222

点赞数 1

本文链接：https://blog.csdn.net/weixin_46069079/article/details/104914450

版权

emmet语法已经集成在vs code中，基本输入方式都是以tab键结束

快速生成HTML语法结构

0、直接！+ TAB 生成HTML基本结构

1、生成标签可以直接输入标签名按tab键即可

2、如果要生成多个标签，加上n就可以了，比如div3

3、如果有父子级关系的标签，可以用>表示，如ul>li

4、如果有兄弟级关系的标签，可以用+表示，如div+p

5、如果生成带有类名或id名的，直接写.demo或者#demo

6、如果生成的div类名是有顺序的，可以用自增符号$

7、如果要在生成的标签内部写内容，可以用{}表示

<!-- ! -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!-- div  -->
<div></div>

<!-- div*3 -->
<div></div>
<div></div>
<div></div>


<!-- ul>li -->
<ul>
    <li></li>
</ul>

<!-- div+p -->
<div></div>
<p></p>

<!-- .demo -->
<div class="demo"></div>

<!-- #demo -->
<div id="demo"></div>

<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

<!-- div{$}*5 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>