![[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
html是一个标签语言，html内容是由一个个标签堆叠出来了的语言
<!-- 声明当前文档的类型 html5类型 --><!DOCTYPE html><!-- 当前html页面的语言 --><html lang="zh-CN"><!-- head标签是网页的头部标签，一般情况下给搜索引擎看的，用户不关注该内容 --><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标签中 --><body><h1>php中文网</h1><h2>20期第二天上课</h2></body></html>
html由3部分组成
什么是Emmet语法？Emmet语法有什么有？emmet语法可以帮助前端开发者快速生成html代码。有id选择器，层级关系。重复生成，文字内容，序号排列等快速生成html代码的语法，详情见下面：
<!-- 快速生成html结构 -->html:5+tab 或 !+tab<!-- 快速生成DIV标签div+tab --><div></div><!-- 快速生成DIV标签带clsaa元素 .test+tab --><div class="test"></div><!-- 快速生成DIV标签中有id属性 #test+tab --><div id="test"></div><!-- 生成div标签带id属性和文字内容#test{你好} --><div id="test">你好</div><!-- 快速生成DIV标签带clsaa元素 id属性 文字内容 .test#nameid{你好} --><div class="test" id="nameid">你好</div><!-- 父子关系如下 --><div><li></li></div><!-- emmet语法快速生成 >表示 如div>li --><div><li></li></div><!-- 兄弟关系如下 --><div></div><li></li><!-- emmet语法快速生成 +表示 如div+li --><div></div><li></li><!-- emmet快速在div中生成5个li标签并lin标签中有文字 如.name>li{你好}*5 --><div class="name"><li>你好</li><li>你好</li><li>你好</li><li>你好</li><li>你好</li></div><!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按1-5顺序排列 如.name>li{你好$}*5 --><div class="name"><li>你好1</li><li>你好2</li><li>你好3</li><li>你好4</li><li>你好5</li></div><!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按5-9顺序排列 如.name>li{你好$@5}*4 --><div class="name"><li>你好5</li><li>你好6</li><li>你好7</li><li>你好8</li></div><!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按9-5顺序排列 如.name>li{你好$@-5}*5 --><div class="name"><li>你好9</li><li>你好8</li><li>你好7</li><li>你好6</li><li>你好5</li></div><!-- emmet快速生成一个代码段，包括父子*3+兄弟*5 .name>(ul>li*3>a{你好})+span*5--><div class="name"><ul><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li></ul><span></span><span></span><span></span><span></span><span></span></div></div>
总结：
在使用emmet语法时注意事项：一段代码中带父子和兄弟关系的在父子关系需要用（）包裹起来否则就会出现一下情况 .name>ul>li3>a{你好}+span5
<div class="name"><ul><li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li><li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li><li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li></ul></div>由此可见兄弟关系会在父子关系中出现在包裹后关系比较明确 .name>(ul>li3>a{你好})+span5
<div class="name"><ul><li><a href="">你好</a></li><li><a href="">你好</a></li><li><a href="">你好</a></li></ul><span></span><span></span><span></span><span></span><span></span></div>