1.谈谈你对html标签, 元素与属性的理解, 并举例说明
html相当于一个人，标签相当于对人的各个器官的标识及解释，元素相当于各个器官，属性是对器官各种的设定,形成拥有特定要求的器官功能，比如对器官的大小，形状，颜色等。
2.列表有几种, 如何定义?
列表有三种（有序列表(ol)，无序列表(ul)，定义列表（dl))
有序列表：项目列表根据书写的li用数字标识，进行排序显示
无序列表：列表默认以点进行标识，根据书写的li进行显示，无排序
定义列表：是项目及其注释的组合，dt定义项目列表项，dd对每个列表项进行定义或解释。
3.列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
单行单列可用列表(导航栏)，多行且每一列之间有关联的数据适合用表格（表格可容纳多种类型的，例如文本，图片，段落等）。
4.编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
<!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> <h3>购物车</h3> <ul> <li>1. 前端学习</li> <li>2.php学习</li> <li>3. 项目实战</li> </ul> <hr> <ol> <li>前端学习</li> <li>php学习</li> <li>项目实战</li> </ol> <hr> <dl> <dt>前端学习</dt> <dd>html,css等的学习</dd> <dt>php学习</dt> <dd>php基本语法，以及实战知识点讲解</dd> <dt>项目实战</dt> <dd>结合前端与php运用框架进行实战开发</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
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 border="1" width="500" cellspacing="0" cellpadding="5"> <caption> <h3>购物车</h3> </caption> <!-- 表头 --> <thead> <tr bgcolor="lightblue"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!-- 主体 --> <tr> <td>1</td> <td>有备无患的奔驰专用机油</td> <td>800</td> <td>1</td> <td>800</td> </tr> <tr> <td>2</td> <td>能看清鞋子的京东摄像头</td> <td>300</td> <td>2</td> <td>600</td> </tr> <tr> <td>3</td> <td>带暖手宝功能的笔记本电脑</td> <td>7800</td> <td>1</td> <td>7800</td> </tr> <!-- 底部 --> <tr> <td colspan="3" align="center">合计:</td> <!-- <td>x</td> --> <!-- <td>x</td> --> <td>4</td> <td>9200</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> <h3>用户注册</h3> <form action="" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" value="panq"> </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="前端"> <option value="">请选择</option> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</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="programme" id="programme" checked><label for="programme">撸代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看片</label> </p> <p> <label for="male">性别:</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="reset" value="按钮"> <button type="button">注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7.总结
列表有三种（有序列表(ol)，无序列表(ul)，定义列表（dl))
列表适合单项的，比如导航栏使用，表格的单元格可填充图片，文字，视频等，运用于多种场景。