Home > List of blog posts > 2022.10.14第二课：emment语法学习

Blogger Information

Blog 14

fans 0

comment 0

visits 7390

Special Recommendation

More>

Related recommendations

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>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：完成的很好

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

2022.10.13第一课：环境配置作业

2022-10-14 18:31:10

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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`

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

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