１．编写一个自我介绍的HTML页面，要求使用HTML文档常用的文本、超链接、图片、表格、行级、块级等标签，页面要求布局合理，内容图文并茂，将源文件和素材保存在exp01\1\文件夹下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自我介绍</title>
<style>
table{
width:500px;
height:300px;
margin:0 auto;
border-radius:8px;
box-shadow:3px 3px 8px #000000;
background-color:rgba(100,100,00,0.1);
}
.bottom{ border-bottom: 6px #000066 double;
}
</style>
</head>
<body>
<table >
<tr>
<td colspan="2" align="center" ><h2>自我介绍</h2> </td>
</tr>
<tr>
<td width="97">姓名：</td>
<td width="391" >Mary</td>
</tr>
<tr>
<td>年龄：</td>
<td >20</td>
</tr>
<tr>
<td>班级：</td>
<td >计本170</td>
</tr>
<tr>
<td height="32">专业：</td>
<td class="">计算机科学与技术</td>
</tr>
<tr >
<td colspan="2" >
自我评价 ：
<hr/>
<p>本人适应能力强，性格开朗大方，待人热情，能吃苦耐劳。
不断学习，工作认真负责积极主动，善于创新，
敢于迎接挑战，敢于承担责任，有较强的精力投入工作。
富有工作激情，乐业敬业。有良好的交际技能、
沟通交流谈判技巧及较强的团队合作精神，有良好的职业道德和素质。</p>
</td>
</tr>
</table>
</body>
</html>
页面间导航：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接</title>
</head>
<body bgcolor="#CCCCCC">
<div >
<div >
<p> <img src="images/logo.jpg" >
<a href="login.html">登录</a>
| 关于贵美 | 贵美助理 |
<a href="#">联系我们</a>
</p>
<p>手机 - 诺基亚 -
<a href="anchor.html">MOTO</a> - 索爱</p>
</div>
<div >
<h4>导购资讯</h4>
参观电玩达人的宝贝仓库 <br />
炎炎夏日，冰凉家具两折起 <br />
周末折扣，品牌三折热卖
<hr/></div>
<div ><br />
<dt >网游专区<dt>
<ol>
<li > QQ幻想100点卡只需￥8.8元 </li>
<li>热血江湖250点只需￥8.8元 </li>
<li>问道30元卡只需￥25.0元 </li>
<li>跑跑点卡200点只需￥16.8元 </li>
</ol>
</div>
<div >
<dt>数码产品 </dt>
<ul>
<li>最酷音乐手机导购 </li>
<li>最强街机6300仅售1450 </li>
<li>99元热销学生Mp3推荐 </li >
<li>漫步者音箱76元搞定</li>
</ul>
</div>
<hr/>
<div >
<dt>MOTO E2 音乐手机</dt>
<br/>
<dd> 130W像素摄像头 Linux智能系统</dd>
<dd>Intel XScale 处理器</dd>
<dd>A2DP蓝牙立体声 市场价：1690</dd>
<dd>开学价：1045</dd>
</div>
<p>版权信息：Copyright © 1997-2008 Guimei Shopping Inc. All Rights Reserved</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>综合案例：贵美商品分类</title>
</head>
<body>
<img src="images/list_bg.gif" >
<table align="center"width="800" >
<tr >
<th width="61" scope="col"> </th>
<th width="136" height="36" scope="col">商品图片</th>
<th width="382" scope="col">商品名称/卖家</th>
<th width="162" scope="col">价格</th>
</tr>
<tr >
<th scope="row" height="110"><input type="checkbox" name="chose" /></th>
<td><img src="images/list0.jpg" /></td>
<td><div align="center">
<p>三国群英会免费区</p>
<p>卖家：lingture</p>
<p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏</p>
</div></td>
<td><div align="center"><p>一口价</p>
<p>283.3</p>
</div></td>
</tr>
<tr>
<th scope="row" height="110"><input type="checkbox" name="chose1" /></th>
<td><img src="images/list1.jpg" width="122" height="110" /></td>
<td><div align="center">
<p>HDMI促销活动</p>
<p>卖家：yueyue</p>
<p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏</p>
</div></td>
<td><div align="center"><p>一口价</p>
<p>254</p>
</div></td>
</tr>
<tr>
<th scope="row" height="110"><input type="checkbox" name="chose3" /></th>
<td><img src="images/list2.jpg" width="128" height="110" /></td>
<td ><div align="center">
<p>精美液晶电视</p>
<p>卖家：yue</p>
<p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏</p>
</div></td>
<td><div align="center"><p>一口价</p>
<p>2800</p>
</div></td>
</tr>
</table>
</body>
</html>
用户注册页面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贵美商城注册</title>
</head>
<body >
<table align="center" width="1000" height="300" >
<tr>
<td width="130" >登录名：</td>
<td width="330" ><input type="text" maxlength="10"> </td>
<td width="193" >(可包含a-z、0-9和下划线) </td>
<td width="327" ><img src="images/read.gif" width="35" height="26" />阅读贵美网服务协议
</td>
</tr>
<tr>
<td >密码： </td>
<td><input type="text" maxlength="10"></td>
<td>（至少包含6个字符）</td>
<td rowspan="8"> <textarea rows="25" cols="30" readonly="readonly">欢迎阅读服务条款协议……</textarea> </td>
</tr>
<tr>
<td >再次输入密码：</td>
<td><input type="text" maxlength="10"> </td>
<td> </td>
<tr>
<td>电子邮箱：</td>
<td><input type="text"></td>
<td>（必须包含@字符）</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" >
<img src="images/Male.gif" width="22" height="21" /> 男
<input type="radio">
<img src="images/Female.gif" width="23" height="21" />女</td>
<td rowspan="4" ></td>
</tr>
<tr>
<td>头像:</td>
<td><input type="file"/></td>
<tr>
<td>爱好：</td>
<td><input type="checkbox">
运动 <input type="checkbox">
聊天 <input type="checkbox">
玩游戏</td>
</tr>
<tr>
<td>喜欢的城市:</td>
<td><select name="city">
<option selected="selected">[请选择]</opiton></select>
</td>
</tr>
<tr>
<td > </td>
<td><input type="submit" disabled="disabled" value="同意右侧服务条款，提交注册信息"><input type="reset" value="重填"></td>
<td> </td>
</tr>
</table>
</body>
</html>
使用框架完成如下help.html页面设计，要求左边按钮超链接的页面分别在右下主窗口内显示。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贵美商城</title>
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/JavaScript">
var strHome = 'http://www.gmgw.com';
function addFav(){
switch(getNav()){
case 1:
window.external.addFavorite(strHome,'贵美商城');
break;
case 2:
window.sidebar.addPanel('贵美商城',strHome,'');
break;
case 0:
alert("加入收藏失败");
break;
}
function getNav(){
if(navigator.userAgent.indexOf("MSIE")!=-1) return 1;
if(navigator.userAgent.indexOf("Firefox")!=-1) return 2;
return 0;
}
}
function setHome(oThis){
oThis.style.behavior='url(#default#homepage)';
oThis.setHomePage(strHome);
return false;
}
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div class="upright_menu">
<ul>
<li class="pic pic1"></li>
<li class="h_text"><a href="buy_commodity.htm" target="_parent">购物车</a></li>
<li class="pic pic2"></li>
<li class="h_text"><a href="help.htm" target="_parent">帮助中心</a></li>
<li class="pic pic5"></li>
<li class="h_text"><a href="JavaScript:void(0);" onclick="addFav();">加入收藏</a></li>
<li class="pic pic6"></li>
<li class="h_text"><a href="JavaScript:void(0);" onclick="setHome(this);">设为首页</a></li>
<li class="bt login h_text"><a href="login.htm" target="_parent">登录</a></li>
<li class="bt reg h_text"><a href="register.htm" target="_parent">注册</a></li>
</ul>
</div> <!--upright_menu end-->
<div class="upright_bottom">
<ul>
<li class="h_text hello">你好，欢迎访问贵美商城！
<script type="text/JavaScript">
now=new Date;
document.write(now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+now.getHours()+"点"+now.getMinutes()+"分");
</script>
</li>
</ul>
</div> <!--upright_bottom end-->
<div class="nav">
<ul>
<li><a href="index.htm" target="_parent"> 首 页 </a></li>
<li><a href="commoditys_show.htm" target="_parent">家用电器</a></li>
<li><a href="commoditys_show.htm" target="_parent">手机数码</a></li>
<li><a href="commoditys_show.htm" target="_parent">日用百货</a></li>
<li><a href="commoditys_show.htm" target="_parent"> 书 籍 </a></li>
<li><a href="help.htm" target="_parent">帮助中心</a></li>
<li><a href="help.htm" target="_parent">免费开店</a></li>
<li><a href="help.htm" target="_parent">全球咨询</a></li>
</ul>
</div> <!--nav end-->
</div> <!--header end-->
</body>
</html>
html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册＆认证</title>
<style type="text/css">
<!--
/*设置项目列表的图片*/
li {
list-style-image: url(images/list_icon.gif);
font-size:15px;
}
/*设置无下划线的超连接样式*/
A {
color: blue;
text-decoration: none;
}
a:hover{ /*鼠标在超链接上悬停时变为颜色*/
color: red;
}
-->
</style>
</head>
<body>
<h3>知识堂首页 >> 注册＆认证 </h3>
<p><img src="images/reg_line.jpg" width="580" height="12" alt="alt" /></p>
<p>享受贵美网免费网上交易乐趣，并且在超人气的社区尽情交流您的网上购物经验，您需要先注册成为贵美的会员，具体的步骤如下：</p>
<p><img src="images/reg_step.jpg" width="495" height="47" alt="alt" /></p>
<ul type="square">
<li><a href="#">如何**会员名？</a></li>
<li><a href="#">如何注册贵美会员？</a></li>
<li><a href="#">注册时密码设置有什么要求？</a></li>
<li><a href="#">贵美认证</a></li>
<li><a href="#">为什么校验码明明是对的，却提示我输入错误？</a></li>
</ul>
</body>
</html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-image: url(images/customer.jpg);
background-repeat: no-repeat;
}
.STYLE7 {color: #333333}
li{list-style:none;line-height:12px;font-size:12px;}
-->
</style>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<a href="right.html" target="rightname"><img src="images/reg.jpg" border="0" alt="alt" /></a>
</p>
<p>
<a href="buy.html"target="rightname"><img src="images/buy.jpg" border="0" alt="alt" /></a>
</p>
<p>
<a href="sale.html"target="rightname"><img src="images/sale.jpg" border="0" alt="alt" /></a>
</p>
<p><img src="images/person.jpg" border="0" alt="alt" /></p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贵美商城</title>
</head>
<frameset rows="100,*" border="1">
<frame name="topname"src="head.html" noresize="noresize" scrolling="no"></frame>
<frameset cols="22%,*" bordercolor="#000000">
<frame name="leftname"src="left.html" noresize="noresize" scrolling="no">
</frame>
<frame name="rightname" src="right.html" noresize="noresize" scrolling="no">
</frame>
</frameset>
</frameset><noframes></noframes>
</html>
总结
1）什么是表单，表单在网页中的作用是什么？
可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。
主要负责数据采集的功能。
2）表格与框架都具有页面布局的作用，他们在进行页面布局时各有什么优缺点？
表格用于划分页面区域的，而框架是用于分割浏览器窗口的，即使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口，每个区域都可以显示不同的HTML文档，从而实现将多个HTML文件组织到一个浏览器窗口中显示。
使用框架的优点：
访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。
使用框架的缺点：
a）并不是所有浏览器都提供良好的框架支持
b）难以实现在不同框架中精确的对齐各个页面元素
**使用表格布局页面的好处：**网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。