纯HTML编写页面测试

最新推荐文章于 2024-08-22 08:30:55 发布
最新推荐文章于 2024-08-22 08:30:55 发布
阅读量592 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68664415/article/details/129291906
版权
该内容包含三个HTML页面的设计：登录页面（login.html）具有简单的用户登录表单，注册页面（register.html）包括用户信息输入如头像、用户名、密码等，以及英雄头像展示页面（hero.html），用户可以点击头像查看英雄详细信息。每个英雄信息页面（如kl-info.html,gz-info.html,ls-info.html）展示了详细的天赋和技能描述。
摘要由CSDN通过智能技术生成

纯HTML编写以下页面

* 登录页面 login.html

* 注册页面 register.html

* 英雄头像的排版 hero.html

* 英雄信息页面排版  xxx-info.html 3个英雄的信息

登录页面

注册页面

 

角色头像一览表 -- 页面 

 

点击角色头像—》进入详情页面 

 

 

登录页面 login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title> <!-- 标题 显示在标签页上 -->
	</head>
	<body>
		<table border="1">
			<tr height="50" bgcolor="Aqua ">
				<td colspan="4" width=500 align="center">
					<font size="5" color="white">欢迎登录</font>
				</td>
			</tr>
			<tr height="40">
				<td>账号:</td>
				<td colspan="2"><input size="40"></td>
				<td><a href="register.html"> <input type="button" value="注册"></a></td>
			</tr>
			<tr height="40">
				<td>密码:</td>
				<td colspan="2"><input type="password" size="40"></td>
				<td><input type="button" value="忘记密码"></td>
			</tr>
			<tr height="40">
				<td>验证码:</td>
				<td colspan="2"><input size="40"></td>
				<td><img src="images/图片1.png" alt=""></td>
			</tr>
			<tr height="40" bgcolor="Aqua ">
				<td>操作:</td>
				<td colspan="3"><a href="hero.html"><input type="button" value="登录"> </a></td>
			</tr>
		</table>
	</body>
</html>

* 注册页面 register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>欢迎注册网站会员</h1>
		<table border="1">
			<tr>
				<td>头像上传</td>
				<td><img src="images/01.jpg" height="100"><br> <input type="file"></td>
			</tr>

			<tr>
				<td>用户名</td>
				<td><input></td>
			</tr>

			<tr>
				<td>输入密码</td>
				<td><input type="password"></td>
			</tr>

			<tr>
				<td>重复密码</td>
				<td><input type="password"></td>
			</tr>

			<tr>
				<td>出生日期</td>
				<td><input value=" 年/ 月/ 日"></td>
			</tr>

			<tr>
				<td>性别</td>
				<td> <input type="radio" name="q">男 <input type="radio" name="q">女</td>
			</tr>

			<tr>
				<td>手机号</td>
				<td><input type="text"></td>
			</tr>

			<tr>
				<td>联系地址</td>
				<td> <select>
						<option>请选择</option>
					</select> <select>
						<option>请选择</option>
					</select> <select>
						<option>请选择</option>
					</select> 详细地址：<input></td>
			</tr>

			<tr>
				<td>兴趣爱好</td>
				<td><input type="checkbox">手机数码 <input type="checkbox">家居生活<input type="checkbox">服饰休闲<input
						type="checkbox">动漫<input type="checkbox">游戏<input type="checkbox">其它</td>
			</tr>

			<tr>
				<td>个人签名</td>
				<td><textarea cols="50" rows="5"></textarea></td>
			</tr>

			<tr>
				<td>操作</td>
				<td> <input type="button" value="注册"> 已有账号，前往<a href="login.html">
						<font color="blue">【登录】</font>
					</a></td>
		</table>
	</body>
</html>

* 英雄头像的排版 hero.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我的角色</h1>
		<table border="1">
			<tr>
				<td><a href="kl-info.html"><img src="images/1.jpg" width="100"></td></a>
				<td> <a href="gz-info.html"><img src="images/2.jpg" width="100"></a></td>
				<td><a href="ls-info.html"><img src="images/3.jpg" width="100"></a></td>
				<td><img src="images/4.jpg" width="100"></td>
			</tr>
			<tr>
				<td><img src="images/5.jpg" width="100"></td>
				<td><img src="images/6.jpg" width="100"></td>
				<td><img src="images/7.jpg" width="100"></td>
				<td><img src="images/8.jpg" width="100"></td>
			</tr>
			<tr>
				<td><img src="images/9.jpg" width="100"></td>
				<td><img src="images/10.jpg" width="100"></td>
				<td><img src="images/11.jpg" width="100"></td>
				<td><img src="images/12.jpg" width="100"></td>
			</tr>
			<tr>
				<td><img src="images/13.jpg" width="100"></td>
				<td><img src="images/14.jpg" width="100"></td>
				<td><img src="images/15.jpg" width="100"></td>
				<td><img src="images/16.jpg" width="100"></td>
			</tr>
		</table>
	</body>
</html>

* 英雄信息页面排版  xxx-info.html 3个英雄的信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<tr bgcolor="linen" align="center">
				<td rowspan="7"><img src="images/QQ图片20230221145829.jpg" height="500"></td>
				<td>天赋id</td>
				<td>天赋类型</td>
				<td>天赋名称</td>
				<td>天赋介绍</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋一</td>
				<td>普通攻击</td>
				<td>普通攻击·砰砰</td>
				<td>普通攻击：进行至多三段的炸弹攻击，造成火元素范围伤害 <br>重击：消耗体力造成火元素范围伤害<br>下落攻击：从空中下坠攻击</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋二</td>
				<td>元素战技</td>
				<td>蹦蹦炸弹</td>
				<td>蹦蹦炸弹会弹跳三次，每次都会爆炸造成火元素范围伤害。<br>第三次弹跳后，将会分裂成许多诡雷，造成火元素范围伤害<br>初始拥有两次可使用次数</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋三</td>
				<td>元素爆发</td>
				<td>轰轰火花</td>
				<td>在技能持续时间内，不停召唤轰轰火花攻击附近敌人，造成火元素范围伤害</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋四</td>
				<td>固有天赋</td>
				<td>砰砰礼物</td>
				<td>蹦蹦炸弹与普通攻击造成伤害时，有50%几率获得一朵炸裂火花。用重击消耗火花使得这次重击不消耗体力，且造成伤害增加50%</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋五</td>
				<td>固有天赋</td>
				<td>火花无限</td>
				<td>可莉的重击造成暴击后，为队伍角色恢复2点元素能量</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋六</td>
				<td>固有天赋</td>
				<td>全是宝藏</td>
				<td>在地图上显示周围蒙德区域特产的位置</td>
			</tr>
			<tr bgcolor="linen">
				<td colspan="5"><a href="hero.html"><input type="button" value="返回"> </a></td>
			</tr>
		</table>

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<tr bgcolor="linen" align="center">
				<td rowspan="7"><img src="images/QQ图片20230221165755.JPG" height="500"></td>
				<td>天赋id</td>
				<td>天赋类型</td>
				<td>天赋名称</td>
				<td>天赋介绍</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋一</td>
				<td>普通攻击</td>
				<td>普通攻击·断雨</td>
				<td>普通攻击：进行至多六段的连续弓箭射击 <br>重击：进行瞄准射击，造成水元素伤害并施加断流效果<br>下落攻击：从空中下坠攻击</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋二</td>
				<td>元素战技</td>
				<td>魔王武装·狂澜</td>
				<td>造成水元素伤害并进入近战状态</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋三</td>
				<td>元素爆发</td>
				<td>极恶技·尽灭闪</td>
				<td>远程状态：向前方发射一发魔箭<br>近战状态：进行大范围斩击</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋四</td>
				<td>固有天赋</td>
				<td>永无谢幕</td>
				<td>断流效果的持续是延长8秒</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋五</td>
				<td>固有天赋</td>
				<td>水形剑</td>
				<td>处于魔王武装·狂澜状态下，普攻和重击暴击后，会为敌人施加断流效果</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋六</td>
				<td>固有天赋</td>
				<td>诸武精通</td>
				<td>队伍中自己的角色普通攻击等级提高一级</td>
			</tr>
			<tr bgcolor="linen">
				<td colspan="5"><a href="hero.html"><input type="button" value="返回"> </a></td>
			</tr>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<tr bgcolor="linen" align="center">
				<td rowspan="7"><img src="images/QQ图片20230221165800.jpg" height="500"></td>
				<td>天赋id</td>
				<td>天赋类型</td>
				<td>天赋名称</td>
				<td>天赋介绍</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋一</td>
				<td>普通攻击</td>
				<td>普通攻击·源流</td>
				<td>普通攻击：进行至多五段的连续枪击<br>重击：消耗一定体力，进行向上的挑斩攻击<br>下落攻击：从空中下坠攻击地面</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋二</td>
				<td>元素战技</td>
				<td>神变·恶曜开眼</td>
				<td>对周围敌人造成雷元素伤害，为队伍中附近的所有角色授以[雷罚恶曜之眼]</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋三</td>
				<td>元素爆发</td>
				<td>奥义·梦想真说</td>
				<td>造成雷元素伤害，并在接下来的一段时间内，使用[梦想一心]战斗。</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋四</td>
				<td>固有天赋</td>
				<td>万千的愿望</td>
				<td>队伍中附近的角色获得元素晶球或元素微粒时，会为诸愿百眼之轮积攒2层愿力。</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋五</td>
				<td>固有天赋</td>
				<td>殊胜之御体</td>
				<td>基于充能效率超过100%的部分，每1%使雷电将军获得下列效果：<br>梦想一心状态提供的元素能量恢复提高0.6%<br>雷元素伤害加成提升0.4%</td>
			</tr>
			<tr bgcolor="linen" align="center">
				<td>天赋六</td>
				<td>固有天赋</td>
				<td>天下名物狩</td>
				<td>突破单手剑和长柄武器时，消耗的摩拉数量减少50%</td>
			</tr>
			<tr bgcolor="linen">
				<td colspan="5"><a href="hero.html"><input type="button" value="返回"> </a></td>
			</tr>
		</table>
	</body>
</html>

神里芋圆
关注
【测试】编写测试用例的常用方法
黑黑白白君的博客
05-15 9276
文章目录1）等价类划分法1.1 什么是等价类有效等价类：无效等价类：1.2 划分标准1.3 划分方法1、确立等价类2、转化为测试用例1.4 实例：三角形问题1.4.1 分析对输入条件的要求（显性和隐性）1.4.2 列出等价类表并编号1.4.3 编写测试用例2）边界值分析法与等价类区别：2.1 分析方法常见的边界值：边界检验的常见类型：2.2 内部边界值分析2.2.1 什么是内部边界值条件？2.2.2 内部边界值条件种类：数值的边界值检验：字符的边界值检验：其它边界值检验：2.3 转化为测试用例2.4 实例：
html测试页
03-01
可以测试你的html代码是否正确。还可以修改代码。
html请求测试页面
ole_triangle_java的博客
04-01 148
【代码】html请求测试页面。
HTML5测试页面教程
gitblog_00759的博客
08-22 438
HTML5测试页面教程 html5-test-pageA page filled with common HTML elements to be used for testing purposes. Useful when building CSS systems for projects big and small.项目地址:https://gitcode.com/gh_mirrors/ht/...
在线测试HTML代码的网页
02-12
一个用于在线测试HTML代码的网页，可见可得，直接在表单内写代码运行显示结果.适合初学网页HTML代码者。
测试html
和时间赛跑!
11-15 1249
...function trestart()...{ if(script)...{ clear = confirm("你真的确定要清除代码吗？"); if(clear)...{ document.script.reset(); document.script.value = ""; } }}function test()...{ temp =
软件测试（测试开发之前端页面开发1——html）
qq_35350637的博客
03-08 445
html是超文本标记语言，是用标签画网页的语言。 我们创建一个html后，它的标准样式是这样的。 这里我们介绍下，所谓标签，它的格式大概是这样的 标签格式 <标签名 标签属性>标签内容</标签名> 例如<html lang="en"> </html> 标签嵌套 标签之间可以相互嵌套 例如<html><head></head></html> 网页结构 基础结构 <html>&l
前端web桌面（纯HTML编写）
08-24
在现代互联网技术中，前端Web桌面是一种通过HTML、CSS3以及JavaScript等技术构建的模拟桌面环境，用户可以在浏览器中体验类似传统操作系统的工作界面。这个项目是专为初学者设计的，便于他们学习和实践相关技能。 ...
基于Selenium框架的HTML页面自动化测试设计源码
最新发布
09-30
该项目是一款基于Selenium框架的HTML页面自动化测试设计源码，集成了38个文件，涵盖25个HTML文件、5个XML配置文件、2个Git忽略文件、2个Markdown文件、2个Java源文件、1个JavaScript文件和1个PNG图片文件。...
通过Python实现一个简单的html页面
09-16
利用Python编写简单的HTML页面不仅可以帮助初学者理解Web的基本工作原理，还能够为进一步学习更复杂的Web框架打下坚实的基础。 #### 二、什么是CGI CGI（Common Gateway Interface，通用网关接口）是一种标准协议，...
SimpleWebEditor:一个简单的html，css和javascript编辑器，可实时编写和测试html，css和javascript
05-14
一个简单的html，css和javascript编辑器，可实时编写和测试html，css和javascript。 它使用HTML5 LocalStorage保存代码段。 并具有将这些代码段导出和导入为JSON格式的功能。 ＃基本特征 1. Write and Test HTML 2....
HTML5测试网页.
12-22
酷炫的html5测试站点.IE9及其以上才能支持，chrome和firefox支持。
html_测试的网页测试部分代码
05-23
html的飞机游戏部分创建代码，有图片的创建、随机生成等
html静态测试网页,Html静态网页测试-20210531213110.pptx-原创力文档
weixin_42498981的博客
06-23 1366
任务二、Html静态网页测试测试BOA测试BOA主要分为3步：编写测试页面，启动web服务器，执行测试。根据配置文件中的信息可知，测试页面放在开发板根目录/gec/web下。html部分内容说明，具体查看html教程 与 之间的文本描述网页 与 之间的文本被显示为标题 与 之间的文本被显示为段落 与 是通过 标签进行定义HTML 链接测试BOA1、编写测试页面index.html如下：...
HTML5与CSS3学习笔记【第二十章 测试和调试网页】
luminous-烁的博客
07-28 630
你编写好了全新的页面，却发现它们在浏览器中并没有像你预期的那样显示，或者完全不显示，或者在你的默认浏览器中显示得很好，但客户使用其他的浏览器打开时却发现页面显得有些奇怪。在 HTML、CSS 和众多的浏览器（尤其是旧浏览器）和平台之间，很容易产生各种各样的问题。本章会提示一些常见的错误，并帮助你清除自己造成的错误。......
html 测试
czb176490815的博客
08-09 343
new document 注册帐号 帐号： 你要说的密码： 性别：男 女 学历：请选择 本科 专科 儿科 爱好：武术 弹鸟 美女 游戏 简介： "; $a=$_POST['hobby']; echo "您的帐号为：",$_POST['userid'],''; ech
html测试页,打印机测试页
weixin_36431489的博客
07-09 270
《打印机测试页》由会员分享，可在线阅读，更多相关《打印机测试页(11页珍藏版)》请在人人文库网上搜索。1、精品文档，你值得期待但具体落到实处应该是一种尊重，一种接人待物的方式方法。和文化知识有关，但不是必然，主要来自家庭的影响和后天的修为。赫本被誉为女神，不仅仅因其貌美，貌美的很多，并不能被全世界的人记住；也不是因为学历，比她学历高的比比皆是。但她用她的一生诠释了修养这个概念，她在遗言里这样说“若...
html 接口测试页面,内容检测页.html
weixin_39825322的博客
06-03 218
内容检测页$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPat...
测试Nixtrome网页页面的HTML核心内容
- 编写完成HTML代码后，开发者需要在浏览器中测试页面的显示效果，以确保网页在不同设备和浏览器上均能正确渲染。 - 通过浏览器的开发者工具可以查看页面源代码，进行调试和优化。 7. 网页测试和部署： - 网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值