![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
Emmet是一个web开发工具，用于加快HTML和css代码的编写速度。
初始化html结构操作就是 （生成html页面按！+键）
代码如下：
<!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>
<!-- 1.标签与内容：`{text}` -->
<h3>html是结构化标签语言</h3>
<!-- .title{默认标签} 按下tab键-->
<div class="title">默认标签</div>
</body>
</html>
代码如下：
<!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>
<!-- 2.属性和语法糖：`[attr]` -->
<!-- 语法糖：快捷方式，简单语法简单表示 -->
<!-- [id=app]{app} -->
<div id="app">app</div>
<!-- [class=title]{title} -->
<div class="title">title</div>
<!-- id,class是高频属性，通用属性，定义语法糖 -->
<!-- ‘id=#’,'class=.' -->
<!-- #app{app1} -->
<div id="app">app1</div>
<!-- .title{title1} -->
<div class="title">title1</div>
</body>
</html>
代码如下：
<!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>
<!-- 3.重复：`*` -->
<!-- .container{box}*3 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
</body>
</html>
代码如下：
<!-- 4.父子：`>` -->
<!-- ul>li{item}*3 -->
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<!-- 5.兄弟：`+` h3{标题}+p{内容} -->
<h3>标题</h3><p>内容</p>
<!-- 6：父级.`^`.box>span{text}^h3{标题} --><div class="box"><span>text</span></div><h3>标题</h3>
<!-- 7分组：`（）` nav>h3{导航}+ul>li*3>a{link} -->
<nav><h3>导航</h3><ul><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul></nav>
<!-- 8：序号：`$`,`$@` -->
<!-- ul>li{item-$}*3 -->ul>li{item-$}*3