1.完成表格的跨行合并功能
表格的跨行合并比较容易,主要是使用了 rowspan="3" ,下面是实例(每个标签标注了用法)
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>单元格的跨行合并功能演示</title> </head> <body> <!-- <table>表格 --> <table border="1" > <!-- <hr>表格的行 --> <tr> <!-- <th>表格的头部 --> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>卫士</td> <td>杀毒软件</td> <td>6</td> </tr> <tr> <td>2</td> <td>360</td> <td>杀毒软件</td> <td>66</td> </tr > <tr> <td>3</td> <td>百度</td> <td>搜索引擎</td> <td>5555</td> </tr> <tr> <td>4</td> <td>腾讯</td> <td>不知道</td> <td rowspan="3"></td> </tr> <tr> <td>5</td> <td>网易</td> <td>不知道</td> </tr> <tr> <td>6</td> <td>阿里巴巴</td> <td>不知道</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.独立完成一个用户注册表单
主要用到html里面的表单代码,下面是实例
实例
<!DOCTYPE html> <html lang="zh"> <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="" method="get"> <p> 账号:<input type="text" name="1"><br> 密码:<input type="password" name="2"><br> 邮箱:<input type="email" id="email" name="email" required><br> 年龄:<input type="number" id="age" name="age" min="16" max="70"> </p> 性别: <input type="radio" name="gender" >男</label> <input type="radio" name="gender" >女</label> </p> <p><h5>介绍:</h5> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> </p> <button>提交</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一个简易的后台首页
使用iframe标签,配合a标签使的页面展示其他页面
实例
<!DOCTYPE html> <html lang="zh"> <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> <a href="https://www.baidu.com" target="main">百度</a> <a href="https://www.taobao.com" target="main">淘宝</a> <iframe src="https://www.baidu.com" width="800" name="main" height="" srcdoc="<h3>网站管理后台</h3>"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例