search

博客列表 >2022.10.14第二课：emment语法学习

2022.10.14第二课：emment语法学习

启动未来
启动未来原创
2022年10月16日 21:11:16768浏览

emment 语法

笔记：vscode支持emment语法，emment语法使用缩写，可以提升hmtl/css的编写速度和生产力。关于emment语法，朱老师讲的主要针对html5,主要有以下几个要点。

一、快速生成html5源码模板

1、语法：! + TAB健

2、呈现效果如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>

二、标签与内容

1 语法：{text}

  • 写标签的情况,例如段落标签<p>，语法： p + TAB键，html呈现的html效果如下：
    1. <p></p>
  • 不写标签的情况下，默认生成<div>标签，例如.class{php.cn} + TAB键,呈现的html效果如下:
    1. <div class="class">php.cn</div>

三、html5属性和语法糖[attr]

id属性语法[id=php01]{php.cn}

  • 呈现的效果如下：
    1. <div id="php01">php.cn</div>

    class属性语法[class=php02]{php中文网}

  • 呈现的效果如下：
    1. <div class="php02">php中文网</div>

    但是因为id和class属性是高频、通用属性，emmet语法有两者的简写形式，以上两种情况又可以简写为#php01{php.cn}和.php01{php中文网}

  • 呈现的效果如下
    1. <div id="php01">php.cn</div>
    2. <div id="php01">php中文网</div>

    其他属性的用法一样，例如[color=red]{hello world}

  • 呈现的效果如下：
    1. <div color="red">hello world</div>

四 重复元素标签的语法

语法：标签名*n

  1. 三个class属性为continer，内容为box的元素，.continer{box}*3，呈现的效果如下：
    1. <div class="continer">box</div>
    2. <div class="continer">box</div>
    3. <div class="continer">box</div>
  2. 三个class属性为haha,段落内容为php中文网的段落p元素(p.haha{php中文网})*3,呈现的效果如下：
    1. <p class="haha">php中文网</p>
    2. <p class="haha">php中文网</p>
    3. <p class="haha">php中文网</p>

    五、父子关系的标签用大于号>表示父子关系

  • 无序标签ul与li,例如ul标签下的三个li标签，语法：ul>li*3,呈现的效果如下：
    1. <ul>
    2.       <li></li>
    3.       <li></li>
    4.       <li></li>
    5.   </ul>

六、兄弟关系的标签 用+表示

  • 无序标签ul和有序标签ol，下面各有3个li标签,语法ul>(li{php中文网})*3+ol>(li{php.cn})*3,呈现的效果如下：
    1. <ul>
    2.       <li>PHP中文网</li>
    3.       <li>PHP中文网</li>
    4.       <li>PHP中文网</li>
    5.   </ul>
    6.   <ol>
    7.       <li>php.cn</li>
    8.       <li>php.cn</li>
    9.       <li>php.cn</li>
    10.   </ol>

七、父级用^表示,用来生成父级同级别的元素

  • 例如#l3{php.cn}>p{php中文网}^p[class=l4]{21期培训班},呈现的效果如下：
    1. <div id="l3">php.cn
    2.       <p>php中文网</p>
    3.   </div>
    4.   <p></p>.l4{21期培训班}

八、分组表示，用小括号()，类似数学中的小括号用法

  • 例如对其中的一组元素用小括号表示nav>(ul>li*3>a{link})，
    呈现的效果如下：
    1. <nav>
    2.       <ul>
    3.           <li><a href="">link</a></li>
    4.           <li><a href="">link</a></li>
    5.           <li><a href="">link</a></li>
    6.       </ul>
    7.   </nav>

九、序号：

  • 默认从1开始的顺序$，例：div{上课的纪律共5条}>(ul>li{第$条}*5，呈现的结果为：
    1. <div>上课的纪律共5条
    2.     <ul>
    3.       <li>第1条</li>
    4.       <li>第2条</li>
    5.       <li>第3条</li>
    6.       <li>第4条</li>
    7.       <li>第5条</li>
    8.     </ul>
    9.   </div>
  • 有时候前面已经有列表了，不需要顺序从1开始，例如接着上面从第6调开始div{上课的纪律共10条}>(ul>li{第$@6条}*5),呈现的效果如下：
    1. <div>上课的纪律共10条
    2.     <ul>
    3.       <li>第6条</li>
    4.       <li>第7条</li>
    5.       <li>第8条</li>
    6.       <li>第9条</li>
    7.       <li>第10条</li>
    8.     </ul>
    9.   </div>
  • 如果让顺序倒过来的话，既逆序排列用$@-1,例如：div{上课的纪律共10条}>(ul>li{第$@-1条}*10)，呈现的效果如下：
    1. <div>上课的纪律共10条
    2.     <ul>
    3.       <li>第10条</li>
    4.       <li>第9条</li>
    5.       <li>第8条</li>
    6.       <li>第7条</li>
    7.       <li>第6条</li>
    8.       <li>第5条</li>
    9.       <li>第4条</li>
    10.       <li>第3条</li>
    11.       <li>第2条</li>
    12.       <li>第1条</li>
    13.     </ul>
    14.   </div>
  • 同样的逆序，如果只逆序到第6条，语法为div{上课的纪律共10条，最后5条倒过来为}>(ul>li{第@-6条}*5),呈现出来的效果为：
    1. <div>上课的纪律共10条
    2.     <ul>
    3.       <li>第10条</li>
    4.       <li>第9条</li>
    5.       <li>第8条</li>
    6.       <li>第7条</li>
    7.       <li>第6条</li>
    8.     </ul>
    9.   </div>
上一条：Emmet常用语法下一条：前端开发的环境搭建及markdown的语法简介（第一课作业）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多