1. 完成表格的跨行合并功能
//通过<colspan>标签实现列合并，<rowspan>标签实现行合并；
实例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>1.完成表格的跨行合并功能</title> </head> <body> <div> <h1>表格的跨行合并</h1> <table border="1px" cellspacing="0px" cellpadding="5px" width="450px"> <caption><h2>购物车</h2></caption> <thead > <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>分类</th> </thead> <tbody align="center"> <tr> <td>1</td> <td>宝马</td> <td>25万</td> <td>2辆</td> <td>50万</td> <td rowspan="2">轿车</td> </tr> <tr> <td>2</td> <td>奔驰</td> <td>60万</td> <td>1辆</td> <td>60万</td> <!-- <td>轿车</td>--> </tr> <tr> <td>3</td> <td>挖掘机</td> <td>26万</td> <td>2</td> <td>52万</td> <td>工程车</td> </tr> </tbody> </div> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 独立完成一个用户注册表单
//通过<lable>标签与<input>标签配合，写出简易的用户注册表单。
实例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>注册表单</title> </head> <body> <div> <form> <h3>用户注册</h3> <p> <label for="username">账号：</label> <input type="text" name="username" id="username" autofocus placeholder="6~12个字符" minlength="6" maxlength="12" required> </p> <p> <label for="password" >密码：</label> <input type="password" id="password" name="password" placeholder="至少包含1个字母"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@php.cn" > </p> <p> <button>提交</button> </p> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.制作一个简易的后台首页
//通过设置<a>标签的target=“内联框架的name属性值”制作简易后台首页
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>简易的后台首页</title>
<style>
.iframe{
width:800px;
height:550px;
float:left；
}
</style>
</head>
<body>
<!--通过设置<a>标签的target=“内联框架的name属性值”制作简易后台首页-->
<div>
<h2>简易的网站管理后台</h2>
<ul style="float:left;">
<li><a href="http://www.baidu.com" target="main">用户管理</a></li>
<li><a href="http://www.360.cn" target="main">分类管理</a></li>
<li><a href="https://browser.360.cn/ee/" target="main">商品管理</a></li>
<li><a href="http://www.hao123.com" target="main">系统设置</a></li>
</ul>
<iframe class="iframe" src="http://www.baidu.com" frameborder="0" name="main"></iframe>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例