CSS学习92~95（Emmet语法）

前进的北极熊

已于 2022-09-09 22:54:16 修改

阅读量185

点赞数

分类专栏： HTML&CSS 文章标签：学习 vscode css

于 2022-09-09 22:43:54 首次发布

本文链接：https://blog.csdn.net/m0_57809042/article/details/126790313

版权

HTML&CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1 Emmet语法

1.1 快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成<div> </div>
如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
如果有父子级关系的标签,可以用> 比如 ul> li就可以了
如果有兄弟关系的标签,用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写.demo 或者#two tab 键就可以了
如果生成的div类名是有顺序的,可以用自增符号$
如果想要在生成的标签内部写内容可以用{}表示

eg:

<!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>emmet语法使用</title>
</head>
<body>
    <div></div>
    <table></table>
    <!-- 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>
    <!-- #two -->
    <div id="two"></div>
    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 我们想生成的标签里面默认显示几个文字 -->
    <!-- div{pink老师不是gay} -->
    <div>pink老师不是gay</div>
    <!-- div{我不喜欢男人}*5 -->
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>

1.2 快速生成css样式

CSS基本采取简写形式即可.

比如w200 按tab 可以生成width: 200px;
比如lh26 按tab 可以生成line-height: 26px;

1.3 快速格式化代码

Vscode快速格式化代码: shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码:

文件------> [首选项] ------> [设置] ;
搜索emmet.include;
在settings.json下的[用户]中添加以下语句:

“editor.formatOnType”:true,
“editor.formatOnSave”: true
只需要设置一次即可,以后都可以自动保存格式化代码

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>快速格式化代码</title>
    <style>
        body {
            width: 100px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div>123</div>
    <div>abc</div>
</body>

</html>