超链接
一、内容跳转
代码实现：
主页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城首页</title>
</head>
<body>
<p>
<img src="img/logo.jpg" />
<a href="login.html" target="_blank">登陆 | </a>关于贵美 | 贵美助理 |
<a href="mailto:guimeiWebMater@gmgw">联系我们</a><br />
</p>
<p>
手机 - 诺基亚 - <a href="Example01.html#MOTO">MOTO</a> - 索爱<br />
</p>
</body>
</html>
login登陆代码，因为没有别的所以只做了个页面和返回上一级：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p><a href="test1.html">返回上一层</a></p><br />
<p>欢迎登陆</p>
</body>
</html>
MOTO 界面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<a name="MOTO">
<dl>
<dt>MOTO E2 音乐手机</dt>
<dd>1300万像素摄像头 Linux智能系统</dd>
<dd>Intel XScale处理器</dd>
<dd>A2DP蓝牙立体声 市场价：1690</dd>
<dd>开学价：1045</dd>
</dl>
</a>
</div>
<hr />
<div>
<p>版权信息： Copyright ©1998 - 2007 GuiMei Shopping Inc. All Right Reserved</p>
</div>
</body>
</html>
效果截图：
二、网站登陆界面
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
</head>
<body>
<div>
<h2>贵美网站会员登陆</h2>
<form action="login.jsp" method="post">
<table>
<tr>
<td>贵美网站邮箱：</td>
<td><input type="text" size="20"/></td>
</tr>
<tr>
<td><br />输 入 密 码：</td>
<td><br /><input type="password" size="20"/></td>
</tr>
<tr>
<td><br />再次输入密码：</td>
<td><br /><input type="password" size="20"/></td>
</tr>
<tr>
<td>
<br /><input type="radio" name="版本"/>豪华版
<input type="radio" name="版本"/>简洁版
</td>
</tr>
<tr>
<td>
<br /><input type="checkbox" value="login"/>自动登录
<input type="checkbox" value="login"/>安全登录
</td>
</tr>
<tr>
<td>
<br /><input type="reset" value="重置"/>
<input type="submit" value="登陆"/>
</td>
</tr>
<tr>
<td>
<br /><input type="image" src="img/registernow.gif"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
效果截图：
三、申请表
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>申请表</title>
</head>
<body>
<div>
<h4>申请表</h4>
<form>
<table>
<tr>
<td>姓名：</td>
<td>
<input type="text" size="20" />
<input type="hidden" value="zhangsan" />
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" size="20" /></td>
</tr>
<tr>
<td>照片：</td>
<td><input type="file" name="files" /></td>
</tr>
<tr>
<td>感兴趣的职位：</td>
<td>
<input type="radio" name="check" value="web设计" checked="checked"/>web设计
<input type="radio" name="check" value="web开发"/>web开发
</td>
</tr>
<tr>
<td>向往的城市：</td>
<td>
<select name="city" size="1">
<option value="0" selected="selected">--选择城市--</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
<option value="5">河北</option>
<option value="6">河南</option>
<option value="7">云南</option>
<option value="8">辽宁</option>
<option value="9">黑龙江</option>
<option value="10">湖南</option>
<option value="11">安徽</option>
<option value="11">山东</option>
<option value="12">新疆</option>
<option value="13">江苏</option>
<option value="14">浙江</option>
<option value="15">江西</option>
<option value="16">湖北</option>
<option value="17">广西</option>
<option value="18">甘肃</option>
<option value="19">山西</option>
<option value="20">内蒙</option>
<option value="21">陕西</option>
<option value="22">吉林</option>
<option value="23">福建</option>
<option value="24">贵州</option>
<option value="25">广东</option>
<option value="26">青海</option>
<option value="27">西藏</option>
<option value="28">四川</option>
<option value="29">宁夏</option>
<option value="30">海南</option>
<option value="31">台湾</option>
<option value="32">香港</option>
<option value="33">澳门</option>
</select>
</td>
</tr>
<tr>
<td>协议：</td>
</tr>
<tr>
<td>
<textarea name="content" cols="50" rows="8" readonly="readonly">求职信息必须真实、准确，本网站只负责向企业推荐。
</textarea>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />我认真阅读并接受以上协议。
</td>
</tr>
<tr>
<td>经验：</td>
<td>
<select name="experience" size="1">
<option value="0" selected="selected">--请选择--</option>
<option value="1">有经验</option>
<option value="2">无经验</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交" disabled="disabled"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
效果截图：
表格
一、表格的使用
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html中使用表格</title>
</head>
<body>
<table border="1">
<tr>
<td>手机充值</td>
<td>IP卡</td>
<td>网游</td>
</tr>
<tr>
<td>移动</td>
<td>联通</td>
<td>魔兽</td>
</tr>
</table>
</body>
</html>
效果截图：
二、跨行跨列练习
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨行跨列练习</title>
</head>
<body>
<form>
<table border="1">
<tr>
<td><h2>商品类目</h2></td>
</tr>
<tr>
<td rowspan="3">虚拟</td>
<td>移动</td>
<td>联通</td>
</tr>
<tr>
<td>充值卡</td>
<td>彩票</td>
</tr>
<tr>
<td>梦幻</td>
<td>QQ</td>
</tr>
<tr>
<td rowspan="3">护肤</td>
<td>美容护肤</td>
<td>美体</td>
</tr>
<tr>
<td>彩妆</td>
<td>香水</td>
</tr>
<tr>
<td>个人护理</td>
<td>保健</td>
</tr>
</table>
</form>
</body>
</html>
效果截图：
三、tfoot等分组
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tfoot等分组用法</title>
</head>
<body>
<form>
<table border="1">
<caption>年终数据报表</caption>
<thead style="background-color: deepskyblue;">
<tr>
<td></td>
<td>1月</td>
<td>2月</td>
<td>3月</td>
<td>小计(RMB)</td>
</tr>
</thead>
<tbody style="background-color: darkseagreen;">
<tr>
<td>北京</td>
<td>10</td>
<td>10</td>
<td>50</td>
<td>70</td>
</tr>
<tr>
<td>上海</td>
<td>20</td>
<td>30</td>
<td>70</td>
<td>120</td>
</tr>
<tr>
<td>天津</td>
<td>30</td>
<td>40</td>
<td>80</td>
<td>150</td>
</tr>
</tbody>
<tfoot style="background-color: yellow;">
<tr>
<td>总计(RMB)</td>
<td>60</td>
<td>80</td>
<td>200</td>
<td>240</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
效果截图：
四、商品分类
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品分类</title>
</head>
<body>
<form>
<table>
<tr>
<td colspan="4"><img src="img/list_bg.gif" /></td>
</tr>
<tr>
<td></td>
<td>商品图片</td>
<td>商品名称/卖家</td>
<td>价格</td>
</tr>
<tr>
<td rowspan="3"><input type="checkbox" /></td>
<td rowspan="3"><img src="img/list0.jpg" /></td>
<td>三国群英免费区</td>
<td rowspan="3">
<p>一口价</p>
<p>283.0</p>
</td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<td>卖家：lingtrue</td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<td><img src="img/online_pic.gif" /><img src="img/list_tool_fav1.gif" /></td>
<td></td>
</tr>
<tr>
<td rowspan="3"><input type="checkbox" /></td>
<td rowspan="3"><img src="img/list1.jpg" /></td>
<td>三国群英免费区</td>
<td rowspan="3">
<p>一口价</p>
<p>283.0</p>
</td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<td>卖家：蓝天</td>
<td></td>
</tr>
<tr>
<!--<td></td>-->
<!--<td></td>-->
<td><img src="img/online_pic.gif" /><img src="img/list_tool_fav1.gif" /></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
效果截图：
五、商城注册
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城注册</title>
</head>
<body>
<form>
<table border="0">
<tr>
<td>登陆名：</td>
<td><input type="text" size="10" />(可包含0-9，a-z和下划线)</td>
<td rowspan="2"><img src="img/read.gif" /><span style="font-weight: 700;">阅读贵美网服务协议</span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" size="10" min="6"/>(至少包含6个字符)</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="text" size="10" /></td>
<td rowspan="7">
<textarea name="content" cols="25" rows="15" readonly="readonly">欢迎阅读服务条款协议......
</textarea>
</td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type="text" size="10" min="6"/>(必须包含@字符)</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"/><img src="img/Male.gif" />男
<input type="radio" name="sex" /><img src="img/Female.gif" />女
</td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="files" /></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" checked="checked"/>运动
<input type="checkbox" name="hobby" />聊天
<input type="checkbox" name="hobby" />玩游戏
</td>
</tr>
<tr>
<td>喜欢的城市：</td>
<td>
<select name="city" size="1">
<option value="0" selected="selected">--选择城市--</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
<option value="5">河北</option>
<option value="6">河南</option>
<option value="7">云南</option>
<option value="8">辽宁</option>
<option value="9">黑龙江</option>
<option value="10">湖南</option>
<option value="11">安徽</option>
<option value="11">山东</option>
<option value="12">新疆</option>
<option value="13">江苏</option>
<option value="14">浙江</option>
<option value="15">江西</option>
<option value="16">湖北</option>
<option value="17">广西</option>
<option value="18">甘肃</option>
<option value="19">山西</option>
<option value="20">内蒙</option>
<option value="21">陕西</option>
<option value="22">吉林</option>
<option value="23">福建</option>
<option value="24">贵州</option>
<option value="25">广东</option>
<option value="26">青海</option>
<option value="27">西藏</option>
<option value="28">四川</option>
<option value="29">宁夏</option>
<option value="30">海南</option>
<option value="31">台湾</option>
<option value="32">香港</option>
<option value="33">澳门</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="同意右侧服务条款，提交注册信息" disabled="disabled"/>
<input type="reset" value="重 填"/>
</td>
</tr>
</table>
</form>
</body>
</html>
效果截图：
以上为web练习的超链接及表格表格的练习题。
版权声明：本文为weixin_44502548原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。