美文网首页
Emmet语法

Emmet语法

作者: 梧桐芊雨 | 来源:发表于2019-07-20 20:57 被阅读0次

    et Emmet是一款可以提高前端代码书写效率的插件,可以不需要一行行的写html标签等,只需要写一行就可以生成完整的html解构,大部分编辑器都有,但若没有可以自行百度安装。

    其实,大家可以查看此处:https://docs.emmet.io/cheat-sheet/,语法介绍很详细。而且通俗易懂,可以花十几分钟看看。

    1.快速生成一个html结构

    语法解构特简单,只需要输入!号后,按键盘上的【tab】或【enter】既可以生成


    image.png

    生成后代码:

    <!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>Document</title>
    </head>
    <body>
      
    </body>
    </html>
    

    2.生成5个类名为item的div
    语法:

    image.png

    生成代码:


    image.png

    3.生成一个类名为item,每个item数值递增div内容也递增。

    语法:

    image.png

    生成代码:

      <div class="item item01">内容 01</div>
      <div class="item item02">内容 02</div>
      <div class="item item03">内容 03</div>
      <div class="item item04">内容 04</div>
      <div class="item item05">内容 05</div>
    

    相关文章

      网友评论

          本文标题:Emmet语法

          本文链接:https://www.haomeiwen.com/subject/qwtplctx.html