Emmet语法快速生成结构语法(vscode)

最新推荐文章于 2022-04-18 22:44:21 发布

星Y

最新推荐文章于 2022-04-18 22:44:21 发布

阅读量303

点赞数

文章标签： vscode visual studio code

本文链接：https://blog.csdn.net/HIRAETHZY/article/details/114232359

版权

html部分：
1. 生成标签直接输入标签名按tab键即可，比如div然后tab键，就可以生成<div></div>，输入!可以生成如下：

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

2. 如果想要生成多个相同标签，加上*就可以了
eg：

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

3. 如果有父子级关系的标签，就可以用>
eg:

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

4. 如果有兄弟关系的标签，用+就可以了
eg:

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

5. 如果生成带有类名或者id名字的，直接写.demo或者#demo，然后按下tab键
eg:

 <!-- .demo -->
  <div class="demo"></div>
  <!-- #demo -->
  <div id="demo"></div>
  <!-- p.demo -->
  <p class="demo"></p>

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

<!-- div.test$*5 -->
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>

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

<!-- div{这是测试内容} -->
<div>这是测试内容</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

CSS部分：
css基本采取简写形式即可，
1. 比如 w100 按tab 可以生成 width:100px;
2. 比如 lh16 按tab 可以生成 line-height:16px;

同时添加多个光标：
1. 单个添加: 将光标放在一个位置，然后按住Alt键的时候用鼠标点击其他地方，点到的地方就会添加一个光标出来
2. 添加一整列: 按住Shift+Alt然后鼠标往下拉，即可添加一整列光标

星Y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫