任务一：使用表格嵌套和表格内的标签
- 效果图展示：
- 代码展示：
<! DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" / > <title>表格嵌套和表格内的标签</title> </head> <body> <table border="1"> <tr> <td> <p>这是一个段落。</p> <p>这是另一个段落。</p> </td> <td>这个单元包含一个表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>这个单元包含一个列表： <ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
任务二：使用跨多行多列的表格
- 效果图展示：
- 代码展示：
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>跨多行多列的表格</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">产品名称</td>
<td>iphone</td>
</tr>
<tr>
<td>ipad</td>
</tr>
<tr>
<td>notebook</td>
</tr>
<tr>
<td colspan="2"><p>欢迎光临本购物网站</p>
</td>
</tr>
</table>
</body>
</html>
任务三：给表单加分类边框
- 效果图展示：
- 代码展示：
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>给表单加分类边框</title>
</head>
<body>
<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>
任务四：注册表单布局
- 效果图展示：
- 代码展示：
<head lang="en">
<meta charset="UTF-8" / >
<title>跨多行多列的表格</title>
</head>
<body>
<form action="answer.html" method="post">
<table width="600" border="1" align="center">
<tr>
<td colspan="2" align="center"><h3> XX用户注册 </h3></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text" name="txtname" size="20" maxlength="20"></td>
</tr>
<tr>
<td>用户性别：</td>
<td><input type="radio" name="sex" value="M"> 男 <input type="radio" name="sex" value="F">女</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="txtpwd" size="20"></td>
</tr>
<tr>
<td>密码保护问题：</td>
<td>
<select name="question">
<option value="">选择一个问题</option>
<option value="school">你的小学名称</option>
<option value="dog">你的小狗的名字</option>
</select>
</td>
</tr>
<tr>
<td>请选择关注的商品类别：</td>
<td><input type="checkbox" name="shopping" value="digit"/> 数码产品
<input type="checkbox" name="shopping" value="sport"/> 运动系列
<input type="checkbox" name="shopping" value="room"/> 家居用品
<input type="checkbox" name="shopping" value="mus"/> 音像制品
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value=" 提交"> <input type="reset" value="清空"><br>
点击提交，即表示同意接受下面《XX协议》
</td>
</tr>
<tr>
<td>XX协议</td>
<td>
<textarea name="fwtk" cols="50" rows="5">XX公司依据本协议的规定提供服务，本协议具有合同效力。您必须完全同意本协议，才能够享受本网站提供的服务。您在XX网登录即表示您完全接受本协议的全部条款。
重要须知： XX在此特别提醒用户认真阅读本《XX网用户服务协议》--- 用户应认真阅读本《XX网用户服务协议》 (下称《协议》)中各条款，包括免除或者限制XX责任的免责条款及对用户的权利限制。请您审阅并接受或不接受本《协议》（未成年人应在法定监护人陪同下审阅）。除非您接受本《协议》条款，否则您无权使用本网站提供的相关服务。您的使用行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。</textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
任务五：使用<iframe>标签
- 效果图展示：
- 代码展示 ：
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>iframe的基本用法</title>
</head>
<body>
<iframe src="images/landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
扩展训练_XX公告栏
- 效果图展示：
- 代码展示：
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>XX公告栏</title>
</head>
<body>
<table width="337" border="1">
<tr>
<td colspan="4"><B>XX公告栏</b></td>
</tr>
<TR>
<td rowspan="3"><img src="images/ppgg.JPG" width="90" height="71"></td>
<td colspan="3">"手机折扣"频道开张！</td>
</tr>
<tr>
<tr colspan="3">社区新版首页亮相啦！</tr>
</tr>
<TR>
<td colspan="3">自输卡密自动发货功能发布</td>
</tr>
<tr>
<td>积分换购</td>
<td>货到付款</td>
<td>手机充值</td>
<td>点卡售货机</td>
</tr>
</table>
</body>
</html>
扩展训练_框架应用
- 效果图展示：
- 代码展示：
left1.html
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>left</title>
</head>
<body>
左侧框架窗口
</body>
</html>
right1.html
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>right</title>
</head>
<body>
右侧框架窗口
</body>
</html>框架应用.html
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>创建多框架页面</title>
</head>
<frameset cols="20%,*">
<frame src="left1.html" name="leftframe1" scrolling="no" noresize="noresize">
<frame src="right1.html" name="rightframe1">
</frameset><noframes></noframes>
</html>
690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
