![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：写得很规范, 代码也规范, 就差熟练了, 多写
Collection
Collection
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明 html是超文本标记语言，是网页是框架和基础，其中<p>,<div>,<h1>,<head>,<body>,<a>等等，都称作元素， 而元素中需要属性来修饰它,例如：<div style="width:200px"，定义了一个DIV元素，它的宽度是200像素，而200像素就是 这个div元素的属性，用来修饰它。 2. 列表有几种, 如何定义? 列表分有序列表和无序列表和定义列表 <ul></ul>定义的是无序列表 <ol></ol>定义的是有序列表 实例 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <ul> <li>图片</li> <li>文章</li> <li>下载</li> <li>课程</li> <li>论坛</li> </ul> </table> </body> </html> 运行实例 » 点击 "运行实例" 按钮查看在线实例
上面的代码代表无序列表
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <ol> <li>图片</li> <li>文章</li> <li>下载</li> <li>课程</li> <li>论坛</li> </ol> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
上面的代码代表有序列表
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表只能显示一列数据，而表格可以显示多个列数据，当以行数据中的一列数据需要多个表示并且有关联的数据的时候
适合用表格来表示和组织，所以，当一列数据就可以表示没一行信息的时候，就是用列表，如果每一个行中的信息需要
用多个列来表述的时候，就用表格来表示这些信息。因为表格能将信息分类，并且具体化。
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
ul：
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <ul> <li>8:40开会</li> <li>9:00做报告</li> <li>10:00现场组织讨论</li> <li>11:00培训生产</li> <li>12:00午休</li> <li>13:30问题解决会议</li> <li>13:40组织当天数据并分析</li> </ul> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
ol
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <ol> <li>8:40开会</li> <li>9:00做报告</li> <li>10:00现场组织讨论</li> <li>11:00培训生产</li> <li>12:00午休</li> <li>13:30问题解决会议</li> <li>13:40组织当天数据并分析</li> </ol> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
dl
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <dl> <dt>8:40开会</dt> <dd>总结昨天的生产问题并讨论统计的数据</dd> <dt>9:00做报告</dt> <dd>KPI相关信息</dd> <dt>10:00现场组织讨论</dt> <dd>现场出现的问题并研究出责任部门与问题解决方法</dd> <dt>11:00培训生产</dt> <dd>指导生产如何操作，节约成本并提高效率</dd> <dt>12:00午休</dt> <dt>13:30问题解决会议</dt> <dd>解决剩余的问题</dd> <dt>13:40组织当天数据并分析</dt> <dd>总结出当天遇到的问题，并反馈给分析中心，从结果中找到问题解决方法</dd> </dl> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
th{width: 100px;background: pink;}
td{text-align: center;}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<caption>
<h3>购物清单</h3>
</caption>
<tr>
<th>序号</th>
<th>日常用品</th>
<th>家电</th>
<th>食品</th>
<th>价格</th>
</tr>
<tr >
<td >1</td>
<td>肥皂</td>
<td>电视</td>
<td rowspan="2">面包</td>
<td>3200</td>
</tr>
<tr>
<td>2</td>
<td>水杯</td>
<td>洗衣机</td>
<td>1100</td>
</tr>
<tr>
<td>3</td>
<td>洗手液</td>
<td>冰箱</td>
<td>香蕉</td>
<td>2600</td>
</tr>
<tr>
<td>4</td>
<td colspan="3" style="text-align: center;">合计</td>
<td>6900</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <h3>用户注册</h3> <form action="login.php" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" placeholder="不能超过8个字符" value="paul zhang"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="必须在6-12位之间"> </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" min="16" max="80"> </p> <p> <label for="">课程</label> <select name="" id=""> <optgroup label="前端"></optgroup> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">javaScript</option> <optgroup label="后端"></optgroup> <option value="">Mysql</option> <option value="">laravel</option> <option value="">PHP</option> </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="programe" id="programe" checked=""><label for="programe" >敲到手疼</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><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"><label for="female">男生</label> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="button" name="button" value="按钮"> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
以上类型都是html相关的总要的并且经常用到的标签，必须熟练运用，表单是最常用的所以也是最最重要的，
在网站用户注册，邮箱注册等等，均需要表单功能
