![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
autoloadCorrection status：qualified
Teacher's comments：
Collection
Collection
<!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>1221homework</title></head><body><!--1. 实例演示Ement常用语法2. 实例演示元素四类属性3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点--><!-- 1.实例演示Ement常用语法 --><!-- 父子关系：> --><!--p>input.name{请输入姓名}--><p><input type="text" class="name">请输入姓名</input></p><!-- p>input#password{请输入密码} --><p><input type="password" id="password">请输入密码</input></p><!-- 兄弟关系：+ --><!-- p+button.commit{提交} --><p></p><button class="commit" onclick="alert('提交成功')">提交</button><!-- 向上一级:^ --><!-- div>img.img[src=http://img95.699pic.com/photo/50167/4554.jpg_wh300.jpg!/fh/300/quality/90]^p --><div><img src="http://img95.699pic.com/photo/50167/4554.jpg_wh300.jpg!/fh/300/quality/90" alt="" class="img"></div><p></p><!-- 重复：* --><!-- ul>li*5{demo$} --><ul><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul><!-- ul.goods>li.class$*3>a[href="https://php.cn/"]{商品$} --><ul class="goods"><li class="class2"><a href="https://php.cn/">商品2</a></li><li class="class3"><a href="https://php.cn/">商品3</a></li><li class="class1"><a href="https://php.cn/">商品1</a></li></ul><br/><!-- ul.goods1>li.item$*5>a[href="https://php.cn/"]{课程$@1221} --><ul class="goods1"><li class="item1"><a href="https://php.cn/">课程1221</a></li><li class="item2"><a href="https://php.cn/">课程1222</a></li><li class="item3"><a href="https://php.cn/">课程1223</a></li><li class="item4"><a href="https://php.cn/">课程1224</a></li><li class="item5"><a href="https://php.cn/">课程1225</a></li></ul><style>.goods{color:aquamarine;background-color: rgb(196, 226, 167);}</style><!-- 画一个3*5的表格 --><table border="1"><tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr><tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr><tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr></table><!-- 1.通用属性 id，class，style --><div class="class">测试class属性</div><div id="id">测试id属性</div><div style="color: brown;">测试style属性</div><!-- 2.预设属性: href... --><a href="http://php.cn/">测试a标签的预设属性</a><img src="http://pic171.huitu.com/pic/20211027/774808_20211027220017955070_0.jpg" alt="" class="img">测试图片的预设属性</img><!-- 3.事件属性：on事件（onclick等） --><button onclick="alert('提交成功')">提交</button><div><input type="text" oninput="this.nextElementSibling.textContent=this.value"><p>实时显示输入内容</p></div><!-- 4.自定义属性 --><div data-email="my@163.com">用户信息</div><button onclick="this.nextElementSibling.textContent=this.previousElementSibling.dataset.email">获取用户邮箱</button><p>这里显示用户邮箱</p><!--为什么大多数程序员更喜欢使用通用标签？1、现在大多数项目基于移动端，不依赖或不在乎搜索引擎2、语义化标签是有限的，而用class自定义字符串去描述的属性更多样，更自由一点。3、语义化标签并没有被淘汰，可以混合使用。 --></body></html>