Emmet基本语法

最新推荐文章于 2024-04-29 19:30:11 发布

流风川

最新推荐文章于 2024-04-29 19:30:11 发布

阅读量225

点赞数

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

本文链接：https://blog.csdn.net/qq_44292366/article/details/117399303

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

Emmet语法

简介

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

快速生成HTML结构语法
快速生成CSS样式语法

快速生成Html结构语法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Emmet语法</title>
</head>
  <body>
  <!--div tab键-->
  <div></div>
  
  <!--div*3 tab键-->
  <div></div>
  <div></div>
  <div></div>
  
  <!--ul>li tab键-->
  <ul>
    <li></li>
  </ul>
  
  <!--div+span tab键-->
  <div></div>
  <span></span>
  
  <!--div.nav tab键-->
  <div class="nav"></div>
  
  <!--div#nav tab键-->
  <div id="nav"></div>
  
  <!--div{内容} tab键-->
  <div>内容</div>
  
  <!--div{$}*3 tab键-->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  
  <!--div{内容$}*3 tab键-->
  <div>内容1</div>
  <div>内容2</div>
  <div>内容3</div>
  
  <!--div.demo$*3 tab键-->
  <div class="demo1"></div>
  <div class="demo2"></div>
  <div class="demo3"></div>

</body>
</html>

快速生成Css样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Emmet语法</title>
    <style>
      div {
        /*w200 tab键*/
        width: 200px;

        /*h300 tab键*/
        height: 300px;

        /*ta:c tab键*/
        text-align: center;
        
        /*lh80px tab键*/
        line-height: 80px;
        
        /*td:n tab键*/
        text-decoration: none;
      }
    </style>
</head>
  <body>
    <div>

    </div>
  </body>
</html>

流风川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Emmet基本语法

Emmet语法简介Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度, Vscode内部已经集成该语法。快速生成HTML结构语法快速生成CSS样式语法快速生成Html结构语法生成标签，直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了如果有兄弟关系的标签，用
复制链接

扫一扫

专栏目录