emmet语法

最新推荐文章于 2024-07-24 11:13:53 发布

抓香蕉鱼

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量95

点赞数

分类专栏：学习打卡文章标签：前端

本文链接：https://blog.csdn.net/weixin_56917972/article/details/125826788

版权

学习打卡专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、简介

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

2、快速生成HTML结构语法

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

<body>
    <!-- 1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键，就可以生成 <div></div> -->
    <div></div>
    <!-- 2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div -->
    <div></div>
    <div></div>
    <div></div>
    <!-- 3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 -->
    <ul>
        <li></li>
    </ul>
    <div>
        <p></p>
    </div>
    <!-- 4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p -->
    <div></div>
    <p></p>
    <!-- 5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了 默认div标签 -->
    <div class="demo"></div>
    <div class="nav"></div>
    <div id="banner"></div>
    <!-- p.one可在p标签内生成类名为class的 -->
    <p class="one"></p>
    <!-- 6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $ -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 7. 如果想要在生成的标签内部写内容可以用 标签 { } 表示 -->
    <!-- 我们想生成的标签里面默认显示几个文字 -->
    <div>我最棒</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

3、快速生成CSS样式语法

CSS 基本采取简写形式即可

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

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

<style>
        .one {
            /* 简写w100 */
            width: 100px;
            /* h200 */
            height: 200px;
            /* ti2em */
            text-indent: 2em;
        }
    </style>