前端、css、Emmet语法生成HTML标签、生成css样式、快速格式化代码

最新推荐文章于 2024-07-08 04:11:11 发布

福星高照~

最新推荐文章于 2024-07-08 04:11:11 发布

阅读量272

点赞数 1

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/atatsuki/article/details/138501494

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文介绍了Emmet语法在VScode中的应用，包括如何使用Emmet快速生成HTML结构（如div、ul等）和CSS样式（如简写和自动补全），以及如何配置VScode进行代码格式化，以提高Web开发的效率。

摘要由CSDN通过智能技术生成

1. Emmet 语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.

1. 快速生成HTML结构语法

2. 快速生成CSS样式语法

1.1快速生成HTML结构语法

1-7代码演示方法及效果如下：

<body>
    <!-- div tab -->
    <div></div>
    <!-- div*3 -->
    <div></div>
    <div></div>
    <div></div>
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- div>span -->
    <div><span></span></div>
    <!-- div+p -->
    <div></div>
    <p></p>
    <!-- .nav -->
    <div class="nav"></div>
    <!-- #banner -->
    <div id="banner"></div>
    <!-- p.one -->
    <p class="one"></p>
    <!-- span.grey -->
    <span class="gray"></span>
    <!-- ul>li.two -->
    <ul>
        <li class="two"></li>
    </ul>
    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- .demo*5   -->
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <!-- 想生成的标签默认显示几个文字 -->
    <div>炸串真好吃</div>
    <!-- div{我还喜欢烙馍}*5 -->
    <div>我还喜欢烙馍</div>
    <div>我还喜欢烙馍</div>
    <div>我还喜欢烙馍</div>
    <div>我还喜欢烙馍</div>
    <div>我还喜欢烙馍</div>
    <!-- div{$}*4 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>

1.2快速生成css样式语法

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

1. 比如 w200 按tab 可以生成 width: 200px;

2. 比如 lh26px 按tab 可以生成 line-height: 26px;

.one{
            text-align: left;
            width: ;
            text-indent: 2em;
            height: ;
            width: 100px;
            font: 200px;
            line-height: 26px;
        }

1.3 快速格式化代码

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

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

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

"editor.formatOnType": true,

"editor.formatOnSave": true

"editor.formatOnType": true,
"editor.formatOnSave": true

福星高照~

关注

1
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录