1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
html标签分两类 （双标签,单标签）
<h1> 你好！世界</h1> 双标签
<img src=“”alt=“”> 单标签
<img>是标签 ，src alt是属性，整体是元素。
2. 列表有几种, 如何定义?
列表分为三种
无序列表 <ul>+<li>
有序列表<ol>+<li>
定义列表<dl>+<dt><dd>
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
tr是表格行，ul是列表
tr必须在table标签里，里面的标签是td
如：<table><tr><td></td></tr><table>
ul里的标签为li
如：<ul><li></li><ul>同样<ol><li></li><ol>
处理单列数据用列表，
处理多列数据且有关联的用表格，
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>学习</li> <li>继续学习</li> <li>努力学习</li> </ul> <!-- 有序列表 --> <h3>学习计划</h3> <ol> <li>学习</li> <li>继续学习</li> <li>努力学习</li> </ol> <!-- 定义列表 --> <dl> <dt>标题</dt> <dd>对标题名词解释</dd> <dd>对标题名词解释</dd> <dd>对标题名词解释</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
colspan 跨列演示
实例
<!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> <tr> <td>ID</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <!-- 主体 --> <tr> <td>1</td> <td>笔记本电脑</td> <td>4000</td> <td>1</td> <td>4000</td> </tr> <tr> <td>2</td> <td>迷你小台灯</td> <td>120</td> <td>2</td> <td>240</td> </tr> <tr> <td>3</td> <td>超强手电筒</td> <td>80</td> <td>1</td> <td>80</td> </tr> <!-- 底部 --> <tr> <td colspan="3">合计</td> <td>4</td> <td>4320</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
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> <tr> <td>ID</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <!-- 主体 --> <tr> <td rowspan="3">1</td> <td>笔记本电脑</td> <td>4000</td> <td>1</td> <td>4000</td> </tr> <tr> <td>迷你小台灯</td> <td>120</td> <td>2</td> <td>240</td> </tr> <tr> <td>超强手电筒</td> <td>80</td> <td>1</td> <td>80</td> </tr> <!-- 底部 --> </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> <form action="login.php" method="POST"> <p> <label for="username">账号：</label> <input type="text" name="username" id="username" placeholder="请输入6-9位字符"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入6-9位字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="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="aihao[]" value="game" id="game"><label for="game">游戏</label> <input type="checkbox" name="aihao[]" value="kdy" id="kdy"><label for="kdy">看电影</label> <input type="checkbox" name="aihao[]" value="gj" id="gj"><label for="gj">逛街</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> <button>注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
常用标签 无序列表 有序列表 定义列表 h1~h6标题 表格 表单
列表 用于做导航
表格用于显示数据
表单用于注册