![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：label标签可以用在许多地方, 不仅仅是表单中, 只要有有id的地方, 都可以用它进行关联
Collection
Collection
8月30日作业:
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
html标签是由< >组成的，包括双标签和单标签，其中：
双标签是以<标签> 作为起始，</标签>作为结束，例如<html> </html>；
单标签是 <单标签> 形式，单标签形式较少，主要包括<br>、<hr>、<img>、<input>、<param>、<meta>、<link>标签；
html中的元素应该是html标签中所对外展示的内容，例如<h1> 这是8月30日作业 </h1>中的“这是8月30日作业”就是元素，<img src="girl.png">中的 girl.png就是元素。
html的属性，一般来说是对标签中的元素的不同样式的设计，也就是CSS样式表，通过修改属性值，可以让标签中的元素展现不同的样式，更加美观。例如，<h1 color="red"> 这是8月30日作业 </h1>中的 color="red" 。
2. 列表有几种, 如何定义?
列表有三种，分别为：
<ul> + <li> 是无序列表，具体定义方式为
<!-- 1、无序列表 --> <h3>购物车</h3> <ul> <li>1. 有备无患的奔驰机油</li> <li>2. 能看清楚鞋子的京东摄像头</li> <li>3. 带有暖***功能的笔记本电脑</li> </ul>
无序列表的特点，在浏览器端，默认情况会有一个无序圆点，如下图：
但可以通过加入属性去除圆点，实现导航效果等，如下：
<!-- 导航 --> <ul style="list-style: none"> <li style="float:left"><a href="#">首页</a></li> <li style="float:left"><a href="#">商标</a></li> <li style="float:left"><a href="#">版权</a></li> <li style="float:left"><a href="#">专利</a></li> <li style="float:left"><a href="#">人才招聘</a></li> <li style="float:left"><a href="#">联系我们</a></li> </ul>
<ol> + <li> 是有序列表，有序列表是基于数字1、2、3、4....依次为li内容排序（需要注意的是，ol 排序时会自带 . 作为分隔，建议在<li></li>标签中，不要带. 或者、等符号 ，否则会出现下图效果）
<!-- 2、有序列表 --> <h3>购物车2</h3> <ol> <li>、有备无患的奔驰机油</li> <li>、能看清楚鞋子的京东摄像头</li> <li>、带有暖***功能的笔记本电脑</li> </ol>
<dl><dt><dd>
<dl><dt><dd>是定义列表，其中<dl>是最外层的套，<dt>是标题部分，<dd>是描述性的文字内容
<!-- 3、定义列表 --> <dl> <dt>PHP</dt> <dd>是最适合网站开发的语言</dd> <dt>PHP2</dt> <dt>PHP2222</dt> <dd>是最适合网站开发的语言</dd> <dt>PHP3</dt> <dd>是最适合网站开发的语言</dd> <dd>是最适合网站开发的语言</dd> <dd>是最适合网站开发的语言</dd> </dl>
需要注意的是，<dt>和<dd>不是包含关系，两者是平行于<dl>层级下的。
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表和表格都是对内容的一种展示，表格可以说是一个更高级的列表，可以实现更好的展示，列表通常是多行单列，表格可以是多行多列，可以是单行单列，可以是多行单列等。
如果数据是一种简单结构，可以用一列数据来实现展示，就写成列表；
如果数据相对负责，需要多列数据来实现展示，就写成表格。
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
<!-- 1、无序列表 --> <h3>工作计划1</h3> <ul> <li>1. 9：00-9：30晨会</li> <li>2. 9：30-11：00处理邮件</li> <li>3. 11：00-12：30整理培训资料</li> </ul> <!-- 2、有序列表 --> <h3>工作计划2</h3> <ol> <li>、14：00-16：00与客户沟通</li> <li>、16：00-18：00组织同事培训</li> <li>、18：00-18：30完成工作日志</li> </ol> <!-- 3、定义列表 --> <dl> <dt>夜间学习</dt> <dd>参加php中文网的学习</dd> </dl>
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
<!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>表格的定义</title> </head> <body> <!-- table标签中，可以通过调整属性值修改表格的框，表格大小等 --> <table border="1" width="800" cellspacing="0" cellpadding="10"> <!-- 表格标题 caption 定义 --> <caption>商品清单</caption> <!-- 表头 thead 定义，在tr中使用th，而非普通td --> <thead> <tr bgcolor="lightblue"> <th>商品编号</th> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>商品金额</th> </tr> </thead> <!-- 表格主体部分 --> <tr> <td>1</td> <td>细说php</td> <td>150</td> <td>1</td> <td>150</td> </tr> <tr> <td>2</td> <td>php从入门到精通</td> <td>60</td> <td>1</td> <td>60</td> </tr> <tr> <td>3</td> <td>21天学会php</td> <td>30</td> <td>1</td> <td>30</td> </tr> <tr> <td>4</td> <td>php和mysql web开发</td> <td>90</td> <td>2</td> <td>180</td> </tr> <!-- 表格底部部分 通常可以在此行进行合并部分表格 --> <tr> <td colspan="3" align="center">合计：</td> <!-- <td>x</td> 上行colspan合并了列，所以后面的2列可以注释掉或者删除--> <!-- <td>x</td> --> <td>5</td> <td>420</td> </tr> </table> <table border="1" width="800" cellspacing="0" cellpadding="10"> <!-- 表格标题 caption 定义 --> <caption>商品清单2</caption> <!-- 表头 thead 定义，在tr中使用th，而非普通td --> <thead> <tr bgcolor="lightblue"> <th>商品编号</th> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>商品金额</th> </tr> </thead> <!-- 表格主体部分 --> <tr> <!-- 表格中对行的合并，采用 rowspan方式，可以参考 colspan 列合并--> <td rowspan="4">合并行</td> <td>细说php</td> <td>150</td> <td>1</td> <td>150</td> </tr> <tr> <!-- <td>2</td> --> <td>php从入门到精通</td> <td>60</td> <td>1</td> <td>60</td> </tr> <tr> <!-- <td>3</td> --> <td>21天学会php</td> <td>30</td> <td>1</td> <td>30</td> </tr> <tr> <!-- <td>4</td> --> <td>php和mysql web开发</td> <td>90</td> <td>2</td> <td>180</td> </tr> <!-- 表格底部部分 通常可以在此行进行合并部分表格 --> <tr bgcolor="lightgreen"> <td colspan="3" align="center">合计：</td> <!-- <td>x</td> 上行colspan合并了列，所以后面的2列可以注释掉或者删除--> <!-- <td>x</td> --> <td>5</td> <td>420</td> </tr> </table> </body> </html>
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
<!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>用户注册表单</title> </head> <body> <h2>用户注册</h2> <form action="login.php" method="POST"> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" placeholder="不能超过8个字符"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="必须在6-12位之间"> </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="age">年龄：</label> <input type="number" id="age" name="age" placeholder="16岁以上" min="16" max="100"> </p> <p> <label for="">课程</label> <!-- 下拉列表 --> <select name="" id=""> <!-- 下拉分组 optgroup --> <optgroup label="前端"> <option value="">请选择</option> <option value="">Hmtl5</option> <option value="">CSS3</option> <option value="">Javascript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">Laraver</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="study" id="study"><label for="study">学习</label> <input type="checkbox" name="hobby[]" value="movies" id="movies" checked><label for="movies">看片</label> </p> <p> <label for="">性别：</label> <input type="radio" name="gender" id="male"> <label for="male">男生</label> <input type="radio" name="gender" id="female" checked> <label for="female">女生</label> <input type="radio" name="gender" id="secrecy"> <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>
7. 写出总结, 对于这些常用标签的应用场景进行分析
列表主要用于导航、内容的多种情形的举例说明。
表单是主要用于多行多列内容的展示，比如商品清单，注册人员信息，内容的管理显示等；
注册表主要是通过form标签实现，通过input插入具体的动作和类型，label标签实现对于内容的描述，适用于注册、登录信息等。