Emmet语法

【Emmet语法】

本文档是对 Pink 老师课程的总结归纳及补充,转载请注明出处!

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

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

快速生成HTML结构语法

  • 生成标签直接输入标签名按 tab 键即可,比如 div 然后 tab 键, 就可以生成 <div></div>
  • 如果想要生成多个相同标签加上 * 就可以了,比如 div*3 就可以快速生成 3 个 div
  • 如果有父子级关系的标签,可以用 > 比如 ul>li 就可以了
  • 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
  • 如果生成带有 类名 或者 id 名字的标签, 直接写 标签.demo 或者 标签#demo 再按下 tab 键就可以了
  • 如果生成的事物有顺序,可以用自增符号 $
  • 如果想要在生成的标签内部写内容可以用 {} 表示
<!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语法之快速生成HTML结构语法</title>
</head>

<body>
    <!-- div -->
    <div></div>
    <!-- table -->
    <table></table>
    <!-- div*6 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- p*4 -->
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <!-- 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.gray -->
    <span class="gray"></span>
    <!-- ul>li#two -->
    <ul>
        <li id="two"></li>
    </ul>
    <!-- .demo*5 -->
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></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{他不喜欢男人}*6 -->
    <div>他不喜欢男人</div>
    <div>他不喜欢男人</div>
    <div>他不喜欢男人</div>
    <div>他不喜欢男人</div>
    <div>他不喜欢男人</div>
    <div>他不喜欢男人</div>
    <!-- div{$}*6 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>

</html>

快速生成CSS样式语法

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

  • 比如 w200tab 可以 生成 width: 200px;
  • 比如 lh26pxtab 可以生成 line-height: 26px;
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emmet语法之快速生成CSS样式语法</title>
    <style>
        .one {
            /* tac */
            text-align: center;
            /* ti2e */
            text-indent: 2em;
            /* w */
            /* width: ; */
            /* h */
            /* height: ; */
            /* w24 */
            width: 24px;
            /* h24 */
            height: 24px;
            /* tdn */
            text-decoration: none;
        }
    </style>
</head>

<body>

</body>

</html>

快速格式化代码

VSCode 快速格式化代码:Shift + Alt + F

WebStorm 快速格式化代码:Ctrl + Alt + L

打赏
评论区
头像
    头像
    吴先生
      

    (:з」∠)

      头像
      @吴先生

      🌹

    头像
    @沉寂于人海
      

    简洁明了,但我还是听不懂[doge]

      头像
      @@沉寂于人海

      小声逼逼:我也听不懂

    头像
    22攻略
      

    你写得非常清晰明了,让我很容易理解你的观点。

    头像
    啊柒seo
      

    pink老师说我谢谢你!这么教你的是吧

      头像
      @啊柒seo

      哈哈哈哈