作业:
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
2. 列表有几种, 如何定义?
列表有2种，分别是：有序列表和无序列表
有序列表
实例
<ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol>
点击 "运行实例" 按钮查看在线实例
无序列表
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表与表格的区别， 单列内容是用列表，多列内容的时候用表格，因为在多列的情况下，用表格更直观。
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
实例
<ul> <li>1、5点起床 </li> <li> 2、8点工作</li> <li>3、晚8点上课 </li> <li>4、晚10点睡觉 </li> </ul> <ol> <li>1、5点起床 </li> <li> 2、8点工作</li> <li>3、晚8点上课 </li> <li>4、晚10点睡觉 </li> </ol> <dl> <dt>起床</dt> <dd>5点</dd> <dt>工作</dt> <dd>8点-12点</dd> <dt>上课</dt> <dd>晚上8点-10点</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
<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> <th>金额</th> </tr> </thead> <!-- 主体 --> <tr> <td>1</td> <td rowspan="3" align="center">渊哥</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
<h3>用户</h3> <form action="login.php" method="POST"> <p> <label for="username">帐号:</label> <input type="text" id="username" name="username" value="caoyuan"> </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="username">课程:</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="">请选择</option> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="game">爱好:</label> <input type="checkbox" id="game" name="hobby[]" value="game"><label for="game">玩游戏</label> <input type="checkbox" id="programme" name="hobby[]" value="programme" checked><label for="programme">撸代码</label> <input type="checkbox" id="movies" name="hobby[]" value="movies"><label for="movies">看片</label> </p> <p> <label for="female">性别:</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="secrecy" name="gender" ><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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
列表：主要用于单栏类的展示，有导航，产品列表，文章列表等……
表格：主要用于多行多列的数据列表的管理，在后理管理，用户中心，等多条数据多个字段的地方用得比较多。
表单： 主要用于与服务数据交互时，使用场景有，用户注册登录，搜索查询等。