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

博主信息

博文 14

粉丝 0

访问量 13150

专题推荐

更多>

emment 语法

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

一、快速生成html5源码模板

1、语法：`! + TAB健`

2、呈现效果如下

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

二、标签与内容

1 语法：`{text}`

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

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

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

呈现的效果如下：
```
<div id="php01">php.cn</div>
```
class属性语法[class=php02]{php中文网}
呈现的效果如下：
```
<div class="php02">php中文网</div>
```
但是因为id和class属性是高频、通用属性，emmet语法有两者的简写形式，以上两种情况又可以简写为#php01{php.cn}和.php01{php中文网}
呈现的效果如下
```
<div id="php01">php.cn</div>
<div id="php01">php中文网</div>
```
其他属性的用法一样，例如[color=red]{hello world}
呈现的效果如下：
```
<div color="red">hello world</div>
```

四重复元素标签的语法

语法：`标签名*n`

三个class属性为continer，内容为box的元素，.continer{box}*3，呈现的效果如下：
```
<div class="continer">box</div>
<div class="continer">box</div>
<div class="continer">box</div>
```
三个class属性为haha,段落内容为php中文网的段落p元素(p.haha{php中文网})*3,呈现的效果如下：
```
<p class="haha">php中文网</p>
<p class="haha">php中文网</p>
<p class="haha">php中文网</p>
```
五、父子关系的标签用大于号>表示父子关系

无序标签ul与li,例如ul标签下的三个li标签，语法：ul>li*3,呈现的效果如下：
```
<ul>
      <li></li>
      <li></li>
      <li></li>
  </ul>
```

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

无序标签ul和有序标签ol，下面各有3个li标签,语法ul>(li{php中文网})*3+ol>(li{php.cn})*3,呈现的效果如下：

<ul>
      <li>PHP中文网</li>
      <li>PHP中文网</li>
      <li>PHP中文网</li>
  </ul>
  <ol>
      <li>php.cn</li>
      <li>php.cn</li>
      <li>php.cn</li>
  </ol>

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

例如#l3{php.cn}>p{php中文网}^p[class=l4]{21期培训班},呈现的效果如下：

<div id="l3">php.cn
      <p>php中文网</p>
  </div>
  <p></p>.l4{21期培训班}

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

例如对其中的一组元素用小括号表示nav>(ul>li*3>a{link})，
呈现的效果如下：

<nav>
      <ul>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
      </ul>
  </nav>

九、序号：

默认从1开始的顺序$，例：div{上课的纪律共5条}>(ul>li{第$条}*5，呈现的结果为：

<div>上课的纪律共5条
    <ul>
      <li>第1条</li>
      <li>第2条</li>
      <li>第3条</li>
      <li>第4条</li>
      <li>第5条</li>
    </ul>
  </div>

有时候前面已经有列表了，不需要顺序从1开始，例如接着上面从第6调开始div{上课的纪律共10条}>(ul>li{第$@6条}*5),呈现的效果如下：

<div>上课的纪律共10条
    <ul>
      <li>第6条</li>
      <li>第7条</li>
      <li>第8条</li>
      <li>第9条</li>
      <li>第10条</li>
    </ul>
  </div>

如果让顺序倒过来的话，既逆序排列用$@-1,例如：div{上课的纪律共10条}>(ul>li{第$@-1条}*10)，呈现的效果如下：

<div>上课的纪律共10条
    <ul>
      <li>第10条</li>
      <li>第9条</li>
      <li>第8条</li>
      <li>第7条</li>
      <li>第6条</li>
      <li>第5条</li>
      <li>第4条</li>
      <li>第3条</li>
      <li>第2条</li>
      <li>第1条</li>
    </ul>
  </div>

同样的逆序，如果只逆序到第6条，语法为div{上课的纪律共10条，最后5条倒过来为}>(ul>li{第@-6条}*5),呈现出来的效果为：

<div>上课的纪律共10条
    <ul>
      <li>第10条</li>
      <li>第9条</li>
      <li>第8条</li>
      <li>第7条</li>
      <li>第6条</li>
    </ul>
  </div>

批改老师：

PHPz

批改状态：合格

老师批语：完成的很好

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

2022.10.13第一课：环境配置作业

2022-10-14 18:31:10

emment 语法

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

一、快速生成html5源码模板

1、语法：`! + TAB健`

2、呈现效果如下

二、标签与内容

1 语法：`{text}`

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

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

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

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

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

四重复元素标签的语法

语法：`标签名*n`

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

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

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

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

九、序号：

emment 语法

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

一、快速生成html5源码模板

1、语法：! + TAB健

2、呈现效果如下

二、标签与内容

1 语法：{text}

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

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

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

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

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

四 重复元素标签的语法

语法：标签名*n

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

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

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

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

九、序号：

1、语法：`! + TAB健`

1 语法：`{text}`

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

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

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

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

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

四重复元素标签的语法

语法：`标签名*n`

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

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