1、完成表格的跨行合并功能
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格跨行合并作业</title> </head> <body> <h3>购物车</h3> <ul> <li>1. 五十倍变焦华为手机, 1个, 20000元</li> <li>2. 比领导更结实的安全帽, 2个, 3000元</li> <li>3. 大瓶阔落, 2瓶, 9.9元</li> </ul> <hr> <table border="1" cellspacing="0" cellpadding="5" width="600" align="left"> <caption>购物车</caption> <thead> <tr bgcolor="lightblue"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>价格区间</th> </tr> </thead> <tbody> <tr> <td width="50">1</td> <td width="200">五十倍变焦华为手机</td> <td width="70">300</td> <td width="50">1</td> <td width="80">20000</td> <td width="80">大于一万</td> </tr> <tr> <td>2</td> <td>比领导更结实的安全帽</td> <td>1500</td> <td>2</td> <td>3000</td> <td rowspan="2">小于一万</td> </tr> <tr> <td>3</td> <td>大瓶阔落</td> <td>5</td> <td>2</td> <td>9.9</td> <!--<td>大于一万</td>--> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">总计</td> <td>5</td> <td>23009.9</td> <td></td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、独立完成一个用户注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册表单</title> </head> <body> <h3>用户注册</h3> <form action="" method="get"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" placeholder="不超过8个字符" autofocus maxlength="8"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="6-12的字母和数字组成" autofocus> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="example@qq.com" required> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="14" max="80"> </p> <p> <label for="birthday">出生年月:</label> <input type="date" id="birthday" name="birthday"> </p> <p> <label for="course">课程:</label> <select name="course" id="course" size="1"> <optgroup label="前端:"> <option value="0">请选择</option> <option value="1">HTML5</option> <option value="2">CSS3</option> <option value="3">JavaScript</option> </optgroup> <optgroup label="后端:"> <option value="4">PHP</option> <option value="5">MySQL</option> <option value="6">ThinkPHP</option> <option value="7">SQL</option> <option value="7" selected>C++</option> </optgroup> </select> </p> <p> <label for="programme">爱好: </label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <input type="checkbox" name="hobby[]" value="sport" id="sport"><label for="sport">运动</label> <input type="checkbox" name="hobby[]" value="sleep" id="sleep"><label for="sleep">睡觉</label> <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label> </p> <p> <label for="male">性别: </label> <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">其他</label> </p> <p> <label for="comment">个人简介:</label> <textarea name="comment" id="comment" cols="30" rows="5" maxlength="30" placeholder="请开始你的表演，但是请不要超过100字"></textarea> </p> <p> <input type="submit" name="submit" value="注册" style="height: 35px;width: 65px;color: red"> <input type="reset" name="reset" value="重置" style="height: 35px;width: 65px"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、制作一个简易的后台首页
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <h2>后台管理</h2> <ul style="float: left;"> <li><a href="https://passport.baidu.com/v2/?reg&tt=1556095966455&overseas=&gid=F1A0B8D-4315-4CE6-A23E-8B80C2DF190B&tpl=pp&u=https%3A%2F%2Fpassport.baidu.com%2F" target="main">用户注册</a></li> <li><a href="https://baidu.com" target="main">百度一下</a></li> <li><a href="https://www.taobao.com/" target="main">商品展示</a></li> <li><a href="https://passport.baidu.com/v2/?login" target="main">账号登录</a></li> <li><a href="https://www.so.com" target="main">帮助</a></li> </ul> <iframe srcdoc="<h3>网站管理后台</h3>" frameborder="" width="1200" height="600" style="float:left" name="main"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例