题一：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接与特殊符号</title>
</head>
<body>
<div>
<form>
<table>
<tr>
<td><img src="img/logo.jpg"</td>
<td><a href="login.html" target="_blank">登录</a> | 关于贵美 | 贵美助理 | <a href="mailto: guimeiWebMater@gmgw.com" target="_blank">联系我们</a></td>
</tr>
<tr>
<td style="font-size: small;"> 手机 - 诺基亚 - <a href="example03.html" target="_blank">MOTO</a> - 索爱</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐手机</title>
</head>
<body>
<dl>
<dt>MOTO E2 音乐手机</dt>
<dd>130W像素摄像头 Linux智能系统<br />Intel XScale处理器<br />A2D蓝牙立体声 市场价：1690<br />开学价：1045</dd><br />
<hr />
<dd>版权信息：Copyright © 1998-2007 GuiMei Shopping Inc. All Right Reserved</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<a href="example02.html" target="_blank">返回</a>
</body>
</html>
实现效果：
题二：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贵美登录页</title>
</head>
<body>
<div>
<form action="login.jsp" method="post">
<table>
<tr>
<td><h2>贵美网站会员登录</h2></td>
</tr>
<tr>
<td>贵美网站邮箱：<input type="text" size="20" maxlength="15" name="username"/></td>
</tr>
<tr>
<td>  输 入 密 码  ：<input type="password" size="20" maxlength="17" name="pwd"/></td>
</tr>
<tr>
<td>再次输入密码：<input type="password" size="20" maxlength="17" name="pwd"/></td>
</tr>
<tr>
<td>
<input type="radio" name="version" checked="checked" value="豪华版" />豪华版
<input type="radio" name="version" value="简洁版" />简洁版
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="login" value="自动登录" checked="checked" />自动登录
<input type="checkbox" name="login" value="自动登录" />自动登录
</td>
</tr>
<tr>
<td>
<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>
<form action="login.html" method="post">
<table>
<tr>
<td><h3>申请表</h3></td>
</tr>
<tr>
<td>姓名：<input type="text" name="username" size="15" maxlength="8" /></td>
</tr>
<tr>
<td>密码：<input type="password" name="pwd" size="15" maxlength="15" /></td>
</tr>
<tr>
<td>照片：<br /><input type="file" name="files" value="选择文件"/></td>
</tr>
<tr>
<td>感兴趣的职位：<br /><input type="radio" name="job" value="Web设计" checked="checked" />Web设计
<input type="radio" name="job" value="Web开发" />Web开发
</td>
</tr>
<tr>
<td>向往城市：<select name="city">
<option value="" 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="40" rows="8" readonly="readonly">求职信息必须真实、准确，本网站只负责向企业推荐。</textarea>
</td>
</tr>
<tr>
<td><input type="checkbox" name="check" />我认真阅读并接受以上协议。</td>
</tr>
<tr>
<td>经验：</td>
</tr>
<tr>
<td>
<select name="experience">
<option value="" selected="selected">无经验</option>
<option value="1">有经验</option>
</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>制作页面</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>
<table border="1">
<tr>
<td colspan="3"><h3>商品类目</h3></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>
</body>
</html>
实现效果：
题六：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格分组标签的使用</title>
</head>
<body>
<table>
<caption>年终数据报表</caption>
<thead style="background-color: pink;">
<tr>
<th></th>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>小计（RMB）</th>
</tr>
</thead>
<tbody style="background-color: gray;">
<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>
</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 style="text-align: left;">
<th></th>
<th>商品图片</th>
<th>商品名称/卖家</th>
<th>价格</th>
</tr>
<tr>
<td rowspan="3"><input type="checkbox" name="check" /></td>
<td rowspan="3"><img src="img/list0.jpg" /></td>
<td>三国群英传免费区</td>
<td></td>
</tr>
<tr>
<td>卖家：lingture</td>
<td>一口价</td>
</tr>
<tr>
<td><img src="img/online_pic.gif " /> <img src="img/list_tool_fav1.gif" />收藏</td>
<td>283.30</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3"><input type="checkbox" name="check" /></td>
<td rowspan="3"><img src="img/list1.jpg" /></td>
<td>三国群英传免费区</td>
<td></td>
</tr>
<tr>
<td>卖家：蓝天</td>
<td>一口价</td>
</tr>
<tr>
<td><img src="img/online_pic.gif " /> <img src="img/list_tool_fav1.gif" />收藏</td>
<td>486.00</td>
</tr>
</table>
</form>
</body>
</html>
实现效果：
题八：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作贵美注册页面</title>
</head>
<body>
<form>
<table>
<tr>
<td>登录名：</td>
<td><input type="text" name="username" />(可包含a-z，0-9和下划线)</td>
<td rowspan="2"><img src="img/read.gif" /><span style="font-weight: 800;">阅读贵美网服务协议</span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" />(至少包含6个字符)</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="password" name="pwd" /></td>
<td rowspan="7">
<textarea name="list" cols="20" rows="10" readonly="readonly">欢迎阅读服务条款协议··· ···
</textarea>
</td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type="text" name="mail" />(必须包含@字符)</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男" checked="checked" /><img src="img/Male.gif" />男
<input type="radio" name="sex" value="女" /><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="check" />运动
<input type="checkbox" name="check" />聊天
<input type="checkbox" name="check" />玩游戏
</td>
</tr>
<tr>
<td>喜欢的城市：</td>
<td>
<select name="city">
<option value="" 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>
实现效果：
以上均为个人所答，如有错误，欢迎指出，谢谢！
3638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
