作业：
谈谈你对html标签, 元素与属性的理解, 并举例说明
列表有几种, 如何定义?
列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
写出总结, 对于这些常用标签的应用场景进行分析
我的答案
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
答：
1.1、我们所说的html元素：就是我们在电脑前端页面展示的组成部分。比如是一个输入框、一条跳转链接（包括它的样式等）、一个音频/视频、一个轮播图已经由这些组成的界面
而元素包括两部分 一部分是标签，一部分是标签属性。即一个元素=标签+属性
1.2、其中标签是一个元素的基本基体，一般分为双标签（占绝大部分）和单标签。
1.3、属性修饰标签的，比如段落中的字体颜色，大小等等
列表有几种, 如何定义?
答：html中有三种列表，分别是无序列表，有序列表，自定义列表。它们的编写方法分别如下：
2.1、无序列表：无序标签声明 + 为标签列表项
<ul><li></li></ul>
2.2、有序列表： 有序标签声明 + 为标签列表项
<ul><li></li></ul>
2.3、自定义列表：自定义列表声明+自定义列表表头+自定义列表说明
<dl><dt></dt><dd></dd></dl>
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
答：
3.1.
列表：<ul><li></li><ul> 、<oi><li></li></oi>、<dl><dt><dt><dd></dd><dl>
表格：
<table>
<tr>
<th>表头1栏</th> <th>表头2栏</th> <th>表头3栏</th> <th>表头4栏</th>
</tr>
<tr>
<td> 1行值 </td> <td> 1行值 </td> <td> 1行值 </td> <td> 1行值 </td>
</tr>
<tr>
<td> 2行值 </td> <td> 2行值 </td> <td> 2行值 </td> <td> 2行值 </td>
</tr>
</table>
联系与区别：
列表时只有1栏，没有其他栏。表格除了有行还有栏。即列表时一种特殊的表格，只有1栏的表格。。所以表格<table>是一个二维数组，<list>是一个一维数组。
3.2 在统计/展示同一分类时优先使用<list> 在统计/展示不同分类数据时优先使用<table>
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
实例
<!DOCTYPE html> <html> <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>用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl></title> </head> <body> <h2>ul无序号</h2> <ul> <li>第一阶段：前端开发</li> <li>第二阶段：PHP编程</li> <li>第三阶段：综合实战</li> </ul> <h2>uol有序号</h2> <ol> <li>第一阶段：前端开发</li> <li>第二阶段：PHP编程</li> <li>第三阶段：综合实战</li> </ol> <h2>dl自定义</h2> <dl> <dt>8/29~9/12</dt> <dd>第一阶段：前端开发</dd> <dt>9/13~9/27</dt> <dd>第二阶段：PHP编程</dd> <dt>9/28~11/29</dt> <dd>第三阶段：综合实战</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
<!DOCTYPE html> <html> <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>编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan <ul><ol><dl></title> </head> <body> <table border="1" width="750" cellspacing="0" cellpadding="5"> <caption > <h3>订单编号：412250000695</h3> <h3>下单时间：2019-09-01 16：35：52</h3> <h3>收货地址：北京市长安街天安门广场</h3> </caption> <thead> <tr bgcolor="lightblue"> <th></th> <th>货品编号</th> <th>货品名称</th> <th>颜色</th> <th>尺寸</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>篮位</th> <th>货架</th> </tr> </thead> <tr> <td rowspan="2">销售一组</td> <td>WTA018BC</td> <td>尼龙布加棉带帽***</td> <td>紫色</td> <td>140码</td> <td>59.90</td> <td>1</td> <td>59.9</td> <td>8号篮</td> <td>A1705Y</td> </tr> <tr> <td>WTA018BD</td> <td>尼龙布加棉裤子</td> <td>白色色</td> <td>140码</td> <td>79.2</td> <td>1</td> <td>79.2</td> <td>2号篮</td> <td>C9856K</td> </tr> <tr> <td colspan="4"></td> <td>运费</td> <td colspan="2">2400</td> <td>发货人</td> <td colspan="2">张大叔</td> </tr> </table> </body> </html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
<!DOCTYPE html> <html> <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="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="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="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="secrept" name="gender" checked="secrept"><label for="female">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="button" name="reset" value="注册"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7.写出总结, 对于这些常用标签的应用场景进行分析
答：主要HTML文件由<html></html><head></head>和<body></body>三部分组成，只有<body></body>中内容在网页上显示。
头部标签
头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>title：指定整个网页的标题，在浏览器最上方显示。
base：为页面上的所有链接规定默认地址或默认目标。
meta：提供有关页面的基本信息
body：主体标签，定义HTML文档所要显示的内容。我们所写的代码必须放在此标签內。
link：定义文档与外部资源的关系。
body常用标签
容器级标签：p、span、a、b、i标签等，容器级标签中可以放置任何东西
文本级标签：div、h系列、li、dt、dd标签等，文本级标签只能放置文字、图片、表单元素。