作业1、表格的创建，并且完成了表格的跨行，跨列功能。
实例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption>表格标题</caption> <!--表格表头--> <!--th的意思是表头写法，默认文字会有加粗效果--> <!--tr代表表格的行 td代表表格的列--> <!--thaed tbody tfoot 类似网站布局一样--> <!--colspan 列合并--> <!--rowspan 行合并--> <thaed> <tr bgcolor="#a52a2a"> <th width="50">编号</th> <th width="100">名称</th> <th width="80">单价</th> <th width="50">数量</th> <th width="80">售价</th> <th width="50">分类</th> </tr> </thaed> <!--表格内容--> <tbody align="center"> <tr> <td>1</td> <td>充电宝</td> <td>100</td> <td>1</td> <td>100</td> <td>数码</td> </tr> <tr> <td>2</td> <td>南京***</td> <td>20</td> <td>1</td> <td>20</td> <td rowspan="2">***</td> </tr> <tr> <td>3</td> <td>中华***</td> <td>60</td> <td>1</td> <td>60</td> </tr> <tr> <td>4</td> <td>感冒***</td> <td>30</td> <td>1</td> <td>30</td> <td rowspan="2">西***</td> </tr> <tr> <td>5</td> <td>胃***</td> <td>50</td> <td>1</td> <td>50</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="3" style="text-align: center">合计</td> <td>5</td> <td>260</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2、完成一个用户注册的表单
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <!--表单input类型--> <!--text 单行文本框--> <!--password 密码输入框--> <!--textarea 多行输入框--> <!--email 邮件框，这个输入框会对邮件规则进行检测判断--> <!--number 整数型输入框，只能输入数字 边上带上下箭头--> <!--date 日期时间框--> <!--下面3项使用方式比较特别 需要额外注意--> <!--radio 单选框--> <!--checkbox 多选框 复选框--> <!--select 下拉列表框--> <body> <form> <p> <label for="username">帐号:</label> <input type="text" name="username" id="username" autofocus required placeholder="输入用户名"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" required placeholder="输入密码"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="example@email.com"> </p> <p> <label for="number">年龄:</label> <input type="number" name="number" id="number" min="16" max="70" placeholder="年龄"> </p> <p> <label for="birthday">生日:</label> <input type="date" name="birthday" id="birthday"> </p> <p> <!--selected 设置默认值--> <label for="course">课程:</label> <select name="course" id="course"> <optgroup label="前端:"> <option value="1">HTML5</option> <option value="3">javascript</option> <option value="4">ccs3</option> </optgroup> <optgroup label="后端:"> <option value="2">java</option> <option value="5">php</option> </optgroup> </select> </p> <p> <label for="football">爱好:</label> <input type="checkbox" name="bobby[]" value="game" id="game" checked><label for="game">游戏</label> <input type="checkbox" name="bobby[]" value="football" id="football"><label for="football">足球</label> <input type="checkbox" name="bobby[]" value="basketball" id="basketball"><label for="basketball">篮球</label> </p> <p> <label for="secrecy">性别:</label> <input type="radio" name="gander" value="schoolboy" id="schoolboy"><label for="schoolboy">男生</label> <input type="radio" name="gander" value="girl" id="girl"><label for="girl">女生</label> <input type="radio" name="gander" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="content">简介:</label> <textarea name="content" id="content" cols="30" rows="5" maxlength="50" placeholder="不超过50个字符"></textarea> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <button>提交1</button> <button type="button">提交2</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3、制作一个简易的网站后台功能模版
后台模版这种功能用内联框架实现，主要是用a标签和iframe标签时间，通过iframe标签的name属性和a标签的target属性进行绑定传递链接。
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>內联框架</title> </head> <body> <!--iframe创建一个内联框架，链接通过name属性传递进来.a链接通过target属性关联iframe标签的name属性来传递链接--> <ul style="float: left"> <li><a href="demo4.html" target="show">列表</a></li> <li><a href="demo5.html" target="show">表格</a></li> <li><a href="demo6.html" target="show">表单</a></li> <li><a href="demo8.html" target="show">容器</a></li> </ul> <iframe srcdoc="显示详细内容" frameborder="0" name="show" width="600" height="800" style="float: left;"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例