JavaWeb——超链接及表格练习题

超链接

一、内容跳转

代码实现：
主页面代码：

<!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 &copy;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练习的超链接及表格表格的练习题。

JavaWeb——超链接及表格练习题相关推荐

java web 添加超链接_[Java教程]javaWeb超链接(href)请求
[Java教程]javaWeb超链接(href)请求 0 2017-08-08 11:00:24 写在前面: 最近在项目中,遇到一个问题,在点击一个超链接时,页面报错.通过浏览器调试就可以知道发送的请 ...
WEBBASIC Unit01 Web概述、 HTML概述、文本处理、图像和超链接、表格、表单
转载:https://blog.csdn.net/qq_38131668/article/details/73505925 参考:https://www.cnblogs.com/xiaziteng/p ...
用计算机做表格的超链接,excel表格中超链接的使用怎么设置
excel表格超链接可以链接到网站,同一工作表的单元格,或者不同表的单元格.以下是学习啦小编为您带来的关于excel表格超链接设置,希望对您有所帮助. excel表格超链接设置比如在excel里做产 ...
web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容安装HBuilderX 一.HTML 创建第一个HTML页面写完html后如何测试写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
asp.net添加删除表格_你问我答|135编辑器使用之超链接和表格问题
嘿,胖友们大家好呀,我是三儿. 万众期待的『你问我答』栏目又回来了!之前我们有出过两期内容,解决了胖友们在日常工作中使用135编辑器常见到的一些问题. >>>>>点我查看 ...
WEB_BASIC---01 Web概述、HTML概述、文本处理、图像和超链接、表格、菜单
一.Java知识体系结构二.HTML.CSS.JavaScript.jquery HTML:用来勾勒出网页的结构和内容 CSS:用来美化网页 JavaScript:让网页呈现动态的数据和效果 jQu ...
第三讲 html超链接和表格形式
1.超链接的表现形式:<a herf="" target="">超链接</a> 含义:通过使用超级链接,各个不同的网页就可以相互的导航和 ...
如何在html表格中添加超链接,excel表格添加网页链接(网页链接execl 制作列表)...
如何在一个excel表中做数据链接在一个相对比较大表里点击一个数据的时候选择你所说的那个数据--右键--超链接--在左侧选择第2项--然后选择表格名称--上面指定单元格--确定怎么样把网页中的表 ...
html表格中添加超链接,Excel表格中添加超链接的方法教程
在我们使用Excel表格的过程中,有时候需要为表格内的内容添加网站地址的超链接,以方便引入相关的内容,这个时候,我们就需要使用到添加超链接的知识了.那么,怎么在Excel表格内添加超链接呢?接下来由学 ...

JavaWeb——超链接及表格练习题

超链接

表格

JavaWeb——超链接及表格练习题相关推荐

最新文章

热门文章