![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：比如ul+li+a, 以这种标签组合的来记忆是一个非常棒的学习方法, 可以系统的记住他们的应用场景, 再加接近实战
Collection
Collection
一、谈谈你对html标签, 元素与属性的理解, 并举例说明
1、HTML标签：html标签是指被<>包裹起来的对象，比如<head><a><p><html>等等。Html标签分为成对出现的和单独出现的。成对出现的居多，比如<h1></h1>，单独出现的比如<img src=””>。
2、HTML元素：html元素是构成网页的基本对象，并且通过html标签可以定义html元素。
3、HTML属性：html属性是为html元素附加信息的，属性出现在html标签的起始标签中，比如：<div class=”nav”></div>，该div中的class就是属性。
二、列表有几种, 如何定义?
1、有序列表：<ul></ul>
2、无序列表：<li></li>
3、定义列表：<dl></dl>
三、列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
1、列表：列表的格式为多行一列。
2、表格：表格可以定义几行几列。
3、一般我们在布局导航、或者布局文章列表的时候使用列表。
4、表格一般我们在后端中使用的比较多，比如制作数据表。
5、在前端布局中，列表的使用相对于比较灵活，而表格的比较繁杂。
四、五、六实战作业汇总如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>8月30日作业</title> </head> <body> <h3>工作计划-无序列表</h3> <ul> <li>完成行业文章采集工作</li> <li>对行业文章进行二次清洗分类</li> <li>将二次加工后的文章发布</li> </ul> <hr> <h3>工作计划-有序列表</h3> <ol> <li>完成行业文章采集工作</li> <li>对行业文章进行二次清洗分类</li> <li>将二次加工后的文章发布</li> </ol> <hr> <h3>工作计划-定义列表</h3> <dl> <dt>第一步工作</dt> <dd>完成行业文章采集工作</dd> <dt>第二步工作</dt> <dd>对行业文章进行二次清洗分类</dd> <dt>第三步工作</dt> <dd>将二次加工后的文章发布</dd> </dl> <hr> <table border="1px" width="500" cellspacing="0" cellpadding="5"> <caption> <h3>最新产品</h3> </caption> <thead bgcolor="lightgreen"> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>分类</th> </tr> </thead> <tr> <td>1</td> <td>联想笔记本</td> <td>3800</td> <td>1</td> <td>3800</td> <td rowspan="4" align="center">电子产品</td> </tr> <tr> <td>2</td> <td>小米笔记本</td> <td>4500</td> <td>2</td> <td>9000</td> </tr> <tr> <td>3</td> <td>华为笔记本</td> <td>5000</td> <td>3</td> <td>15000</td> </tr> <tr> <td colspan="3" align="center">汇总：</td> <td>6</td> <td>27800</td> </tr> </table> <hr> <h3>用户注册</h3> <form action="login.php" method="GET"> <p> <label for="username">用户名：</label> <input type="text" id="username" name="username" vaule="sqxzgg"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="number">年龄：</label> <input type="number" id="number" name="number" min="18" max="90"> </p> <p> <label for="">领域：</label> <select name="" id=""> <optgroup label="网络营销"> <option value="">请选择</option> <option value="">微信营销</option> <option value="">B2B营销</option> <option value="">SEO营销</option> </optgroup> <optgroup label="软件开发"> <option value="">Java开发</option> <option value="">PHP开发</option> <option value="">C#开发</option> </optgroup> </select> </p> <p> <label for="">擅长：</label> <input type="checkbox" id="wlyx" name="field[]" value="wlyx"><label for="wlyx">网络营销</label> <input type="checkbox" id="rjkf" name="field[]" value="rjkf"><label for="rjkf">软件开发</label> <input type="checkbox" id="ui" name="field[]" value="ui"><label for="ui">UI设计</label> </p> <p> <label for="male">性别：</label> <input type="radio" id="male" name="gender"><label for="male">男性</label> <input type="radio" id="female" name="gender"><label for="female">女性</label> <input type="radio" id="secrecy" name="gender"><label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="button" name="button" value="忘记密码"> <button type="button">忘记账号</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
七、总结：
以上学习的html标签合理进行组合使用就可以制作出很多网页上常见的样式，比如ul+li+a，我们就可以制作出简单的导航栏。而form我们可以用来制作简单的注册页面以及留言页面。ol+li+a，我们又可以写出简单的文章了列表页面，ul+li+a+img+p我们还可以制作出简单的产品列表页面。
标签的应用场景：p：能够用于任何文字位置，尤其是内容详情页面。
a：用于锚文本、大小导航、图片广告跳转等等。
ul：用于导航、文章列表、图片列表等等。
dl、dd、dt：可用于制作简单的问答页面，或者是解释类页面。
form:用于制作表单提交页面、如注册、留言等等。
table、tr、td：可用于后端页面的布局。
input:包含各种type属性，用处非常广泛、如：文本框、密码框、单选框、复选框、下拉列表、各类按钮（配合JS使用）。
