作业:
一、谈谈你对html标签, 元素与属性的理解, 并举例说明
答：html语言是超文本标记语言，标签是用于标记文本类型的，例如：
“<p>这是一个标签</p>就是一个标签“;
html元素是指一个标签块，标签标记了元素，例如：
“<div><p>这是一个元素</p></div>”;
属性是用来描述元素的，例如：
“<input type="select" id="button" name="button">”；
答：列表有三种，分别是：无序列表、有序列表、定义列表；
无序列表，<ul></ul>、<li></li>，有序列表，<ol></ol>、<li></li>,区别是有序 列表会自动的在列表项前面加上序号；
定义列表，<dl></dl>、<dt></dt>、<dd></dd>、“dl“标签相当于是“ul“，用以标记列表 项，“dt“是标记列表项的标题，“dd”用于标记列表项的上一个“dt”标记标题的内容或描述。
三、列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
答：列表只能标记单列内容，表格可以标记有多个列的内容。
四、编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
实例-<ul>
<ul> <h3> 工作计划“ul” </h3> <li><p> 1、上班 </p></li> <li><p> 2、下班 </p></li> </ul>
点击 "运行实例" 按钮查看在线实例
实例-<ol>
<ol> <h3> 工作计划“ol” </h3> <li><p> 上班 </p></li> <li><p> 下班 </p></li> </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例-<dl>
<dl> <h3> 工作计划“dl” </h3> <dt>第一件事</dt> <dd>上班</dd> <dt>第二件事</dt> <dd>下班</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例-<table>表格
<table border="5" width="500" align="center"> <caption><h2> 购物车 </h2></caption> <thead align="center"> <tr bgcolor="yellow"> <th bgcolor="black"></th> <th>名称</th> <th>规格(ml)</th> <th>数量(瓶)</th> <th>单价(元)</th> </tr> </thead> <tr> <td rowspan="4" align="center">好酒</td> </tr> <tr> <td>啤酒</td> <td>550</td> <td>3</td> <td>10</td> </tr> <tr> <td>白酒</td> <td>500</td> <td>2</td> <td>50</td> </tr> <tr> <td>黄酒</td> <td>300</td> <td>7</td> <td>50</td> </tr> <tr> <td colspan="3" align="center">合计</td> <td>12</td> <td>480</td> </tr> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例-<form>用户注册表单
<h3> 用户注册 </h3> <form action="login.php" method="get"> <p> <label for="username">账号：</label> <input id="username" name="username" type="text" placeholder="请用中文"> </p> <p> <label for="password">密码：</label> <input id="password" name="password" type="password" placeholder="6位纯数字" </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="ex@mail.com"> </p> <p> <label for="">性别：</label> <input type="radio" id="male" name="sex" value="male"><label for="male">男生</label> <input type="radio" id="female" name="sex" value="female"><label for="female">女生</label> <input type="radio" id="none" name="sex" value="none"><label for="none">不告诉你</label> </p> <p> <label for="age">年龄：</lable> <input type="number" min="16" max="60" name="age" id="age"> </p> <p> <label for="">愿望：</label> <select id="wish" name="wish"> <optgroup label="个人的"> <option value="请选择" >请选择</option> <option value="money">用不完的钱</option> <option value="beauty">美女</option> <option value="liveforever">永生</option> </optgroup> <optgroup label="所有人的"> <option value="peace">世界和平</option> <option value="health">健康</option> </optgroup> </select> </p> <p> <label for="fav">兴趣：</label> <input type="checkbox" id="game" name="game" value="game"><label for="game">玩游戏</label> <input type="checkbox" id="music" name="music" value="music"><label for="music">听音乐</label> <input type="checkbox" id="movies" name="movies" value="movies"><label for="movies">看电影</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="清空表单"> <input type="button" name="button" value="一个按钮"> <button type="submit" name="botton">button提交</button> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七、写出总结, 对于这些常用标签的应用场景进行分析
"<h>",双标签，标记标题，浏览器有预置的样式，预置了加粗、字号
“<a>”单标签，标记超链接，属性有:src="链接地址",target="打开位置self;blank;top"
"<p>"双标签，标记段落，可以自动换行
"<img>"单标签，标记图片，属性有:src="图片位置",alt="图片描述"
"<ul>,<ol>,<dl>,<li>,<dt>,<dd>"，见作业第二题，有序列表和无序列表可以用于新闻列表、定义列表可用于网站底部友情链接
"<table>,<thead>,<th>,<tr>,<td>,<caption>"表格标签，thead标记表头，th和td都指列，th用于第一列加粗，tr指行，包括属性rowspan合并行,colspan合并列,border描述边框，caption标记表格名称
"<form>"双标签，标记表单
"<label>"可以把文本标签和其他标签进行定义绑定
"<input>"
输入标签，属性type="类型(text文本、number数字、checkbox复选项，radio单选项，password密码，email邮箱，sumbit提交，reset重置)",id="ID"，name="名称",value="值"；
"<select>,<optgroup>,<option>"
select下拉列表，属性有id="ID",name="名称"
optgroup下拉列表的选项组
option下拉列表的选项，属性value="值"，必须要给选项赋值
"<button>"
按钮标签，可以用type属性中定义按钮的行为，可以用javascript来定义按钮行为，比input好用，好像便于用css定义样式
