Web前端课程期末复习

最新推荐文章于 2025-08-26 11:11:34 发布
原创 最新推荐文章于 2025-08-26 11:11:34 发布 · 517 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #服务器 #运维

1.程序题（每小题100分，共1小题，共计100分）

       参考下图所示，在发放的考试文件夹中完成四个HTML页面的制作，使得网页之间能正确跳转，并达到注册、登录、显示及修改数据的效果，每个页面具体要求如下：

  1. 会员登录页面：登录页面为首页，点击登录按钮后会检查用户名和密码是否填写，如未填写则分别弹窗提示不能为空；都填写之后点击登录则检查数据库，看输入的用户名密码是否存在，若存在则跳转会员中心页面，不存在则弹窗提示。下方点击“我的”按钮可跳转到会员中心页面，如果没有用户登录时点击则返回登录页面。（15分）

  1. 会员注册页面：用户名，密码，密码确认为注册必填项，未填写就点击注册按钮则弹窗提示；性别为单选，年龄为可拖动的范围选择。点击注册按钮可直接登录并跳转到会员中心页面。点击返回按钮退回会员登录页面。下方点击“我的”按钮可跳转到会员中心页面，如果没有用户登录时点击则返回登录页面。（30分）

  1. 会员中心页面：默认情况下只有两个按钮显示在网页上，点击显示记录则会显示所有注册的用户的基本信息，包括用户名，密码，姓名和性别，点击基本信息中的用户名则连接到会员信息修改页面；点击退出则返回注册页面。下方点击“我的”按钮可跳转到会员中心页面，如果没有用户登录时点击则返回登录页面。（20分）

  1. 会员信息修改页面：默认情况下只有四个按钮显示在网页上，点击读取按钮则会显示和注册页面一样的界面，不过所有已填信息将被显示在文本框中；直接在文本框中可以修改除了用户名以外的其他所有信息。点击保存会替换掉原先注册的信息，并回到会员中心页面；点击删除会删除掉该会员的所有信息并返回会员中心页面；点击返回则不修改任何内容返回会员中心页面。（35分）

     

 

   

    完成后将下发的文件夹改名为“学号+姓名”并提交该文件夹作为期末考试的凭证。

二、考核方式

本课程以上机考试方式结题，期末考试占总成绩的70%，日常表现占总成绩的30%。

三、参考答案及评分标准

1.登录页面得分点：登录按钮功能正确（3分），注册按钮功能正确（3分），用户名输入框功能正确（3分），密码输入框功能正确（3分），整体样式和截图一致（3分），共15分。

2.注册页面得分点：用户名输入框功能正确（3分），密码输入框功能正确（3分），确认密码输入框功能正确（3分），姓名输入框功能正确（3分），性别选择框功能正确（3分），年龄选择框功能正确（3分），电话输入框功能正确（3分），注册按钮功能正确（3分），返回按钮功能正确（3分），整体样式和截图一致（3分），共30分。

3.会员中心页面得分点：显示记录按钮功能正确（3分），退出按钮功能正确（3分），能正确显示已注册用户的内容（5分），下方我的按钮样式和功能正确（5分），整体样式和截图一致（4分），共20分。

4.信息修改页面得分点：读取按钮功能正确（3分），保存按钮功能正确（3分），删除按钮功能正确（3分），返回按钮功能正确（3分），用户名输入框功能正确（3分），密码输入框功能正确（3分），确认密码输入框功能正确（3分），姓名输入框功能正确（3分），性别选择框功能正确（3分），年龄选择框功能正确（3分），电话输入框功能正确（2分），整体样式和截图一致（2分），删除后功能正确（1分），共35分。

代码参考：

css文件夹：

jss文件夹:

4个代码：（按照顺序）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
		<div data-role="content">
			<h1 align="center">会员登录</h1>
			用户名：<input type="text" id="yhm"/>
			密码：<input type="password" id="mm"/>			
			<input type="button" value="登录" id="dl" data-inline="true"/><br>
			<a data-role="button" data-inline="true" href="zc.html" rel="external" >注册</a>
		</div>
		<div data-role="footer" data-position="fixed" align="center">
			<a href="wd.html" rel="external" data-icon="home">我的</a>
		</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>会员中心</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
	<div data-role = "page" data-theme="a">
		<div data-role="content">
			<h1 align="center">会员中心</h1>
			<div id="xs"></div>			
			<input type="button" value="显示记录" id="xsjl" data-inline="true"/><br>
			<input type="button" value="退出" id="tc" data-inline="true"/>			
		</div>
		<div data-role="footer" data-position="fixed" align="center">
			<a href="wd.html" rel="external" data-icon="home">我的</a>
		</div>
	</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>会员信息</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
		<div data-role="content">
			<h1 align="center">会员信息修改</h1>
			<div id="hyxxxg">
				用户名：<input type="text" id="yhm" readonly="readonly"/>
				密码：<input type="password" id="mm"/>
				密码确认：<input type="password" id="mm1"/>
				姓名：<input type="text" id="xm"/>
				<fieldset data-role="controlgroup" data-type="horizontal">
					<legend>性别</legend>
					<input type="radio" value="男" id="xb_0" name="xb" checked />
					<label for="xb_0">男</label>
					<input type="radio" value="女" id="xb_1" name="xb"/>
					<label for="xb_1">女</label>
				</fieldset>
				年龄：<input type="range" id="nl" min="0" max="200" value="18"/>
				电话：<input type="tel" id="dh"/>
			</div>
			<input type="button" value="读取" id="dq" data-inline="true"/>
			<input type="button" value="保存" id="bc" data-inline="true"/>
			<input type="button" value="删除" id="sc" data-inline="true"/>
			<a data-role="button" data-inline="true" data-rel="back">返回</a>
		</div>
		<div data-role="footer" data-position="fixed" align="center">
			<a href="wd.html" rel="external" data-icon="home">我的</a>
		</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>会员注册</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
	<div data-role = "page" data-theme="a">
		<div data-role="content">
			<h1 align="center">会员注册</h1>
			用户名：<input type="text" id="yhm"/>
			密码：<input type="password" id="mm"/>
			密码确认：<input type="password" id="mm1"/>
			姓名：<input type="text" id="xm"/>
			<fieldset data-role="controlgroup" data-type="horizontal">
				<legend>性别</legend>
				<input type="radio" value="男" id="xb_0" name="xb" checked />
				<label for="xb_0">男</label>
				<input type="radio" value="女" id="xb_1" name="xb"/>
				<label for="xb_1">女</label>
			</fieldset>
			年龄：<input type="range" id="nl" min="0" max="200" value="18"/>
			电话：<input type="tel" id="dh"/>
			<input type="button" value="注册" id="zc" data-inline="true"/>
			<a data-role="button" data-inline="true" data-rel="back">返回</a>
		</div>
		<div data-role="footer" data-position="fixed" align="center">
			<a href="wd.html" rel="external" data-icon="home">我的</a>
		</div>
	</div>
</body>
</html>

详细资源我以上传：

Web前端期末复习
qq_73895400的博客
12-04 661
超链接（Hyper Link）是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。HTML5文件是由一系列成对出现的元素标签嵌套组合而成，这些标签以<元素名>的形式出现，用于标记文本内容的含义。<meta>标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。当HTML5文档中使用了相对路径时，浏览器会用<base>标签指定的URL进行补全。
Web前端知识点复习总结
qq_50843126的博客
08-05 2109
Web前端知识点复习总结
Web 前端之网页的构成期末复习
吾为热爱计科，致力于知识分享的践行者，此博客是我在这条道路上留下的足迹。
05-14 307
大家在上网时，输入网址，比如 “” ，然后就能看到百度的页面。那有没有想过，网页究竟是由什么构成的呢？其实，网页是通过编程语言编写的源代码，我们在浏览器中看到的丰富多彩的页面，是浏览器对这些源代码进行解析后的呈现。在专业领域，我们会接触到一些术语。比如 “视图模式”，它涉及到网页在不同设备、不同显示环境下的呈现方式；还有 “文本编辑器”，这是编写网页代码的工具，像 Windows 系统自带的记事本、专业的 Sublime Text、Visual Studio Code 等都可以用来编写网页代码。
web前端开发技术期末考试_web前端开发技术试卷六
weixin_39612720的博客
12-22 2655
Web前端开发技术课程考试试卷(六)总分100分考试时间：120分钟考试形式：闭卷一、选择题(每题1分，共20分)1．以下标记符中，用于设置页面标题的是_______。(A)(B)(C)(D)2．下列能够实现与用户交互、表单验证的语言是________。(A)HTML(B)CSS(C)VFP(D)JavaScript3．以下标记中可以导入外部样式表的标记的是_________。(A)(B)(C)(...
Web开发期末知识总结
jh15005767557的博客
12-19 2417
1.Web前端Web应用被分类归为分布式应用，一般是客户端——服务器结构，所以我们有一部分的代码运行在客户端，另一部分代码运行在服务器。那些在客户端上的应用就是前端，通常指的就是我们的浏览器。最常用于前端开发的技术是HTML+CSS+JavaScript，高级的前端开发人员通常使用这些技术的组合开发应用的前端，另一个前端的常用技术就是使用Photoshop设计，配合其他技术共同完成Web页面的制作。2.Web后端。
网络攻防课程期末复习整理
jjsbggs的博客
07-01 2353
仅用于个人期末考试知识点复习整理
web课程设计期末复习
NiZjiTouA的博客
06-28 5971
一、选择题 1.在JSP中，要定义一个方法，需要用到以下（c）元素。 a) <%= %> b) <% %> c) <%! %> d) <%@ %> 2.以下动作标识用来实现页面跳转的是：（ c ） （A）<jsp:include> （B）<jsp:useBean> （C）<jsp:forward> （D）<jsp:plugin> 3. 在JSP中，page指令的（B ）属性用来引入需要
WEB前端 期末复习 2018.11
cwtnice的博客
11-19 5400
WEB前端 期末复习 2018.11 名词解释部分： API: Application Programming Interface（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码or理解内部工作细节。 DOM: Document Object Model (文档对象模型) 是W3C组织推荐的处理可拓展标志语言的标准编程接...
Web应用安全期末复习
weixin_62479204的博客
01-01 1608
互联网解决的基本问题是什么？实现计算机之间的互联互通，构建网络基础设施（建网问题如何利用互联网的互联互通能力，实现有价值的应用呢？网络应用程序开发FTP、电子邮件、新闻组、远程登陆web 技术诞生（最初是因为世界各地的物理学家需要分享实验数据和相关实验经验）Web1.0 ：浏览器、HTTP协议、Web服务器、静态Web网页Web1.0称为门户网站时代：门户网站由于其信息比较全面（一般包含网站黄页系统）而得到用户的青睐，如Yahoo、搜狐、新浪、网易。
山东大学软件学院web数据管理期末复习资料2025
06-21
山东大学软件学院web数据管理期末复习资料是一套针对特定课程设计的、内容详实的学习材料，适合学生期末备考和平时的自主学习。通过这套资料的辅助，学生可以更好地掌握web数据管理的知识体系，为将来在信息技术领域...
Web前端期末项目，以中国航天为主题的前端网页.zip
01-10
Web前端期末项目，以中国航天为主题的前端网页，内容包括我国航天的发展、航天成就、航天知识、航天新闻、宇航员介绍以及航天产品。运用html、css以及javascript技术。网页包含主页面和子页面以及表单页面。.zip
Web前端期末复习全攻略：资料、题型、PPT与实验总结
资源摘要信息: 本资源为Web前端技术的期末复习资料，包含了《Web前端》课程的全方位复习材料。涵盖了多种题型，包括选填、判断、简答以及编程题目，旨在帮助学生全面掌握课程要点。资源中还包含课程相关的PPT讲解和...
css的white-space: pre
qq_51035159的博客
08-22 633
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。
什么原因会导致webview内部position为fixed且top为0的元素向上滚动出视图外
前端金牌摸鱼达人
08-26 130
什么原因会导致webview内部position为fixed且top为0的元素向上滚动出视图外
Webview138和139版本更新了软键盘相关的那些东西
最新发布
前端金牌摸鱼达人
08-26 143
Webview138和139版本更新了软键盘相关的那些东西
单页面应用（SPA）：现代Web开发的革命性范式
Java是世界上最好的语言
08-26 511
单页面应用（SPA）是一种通过JavaScript动态更新内容的Web架构，相比传统多页面应用（MPA）具有无刷新切换、前后端解耦等优势，但也面临首屏加载慢、SEO优化难等挑战。SPA核心技术包括前端路由、异步数据请求和状态管理，适合后台系统、社交应用等交互密集型场景，而不适用于内容型网站。随着SSR、PWA等技术的发展，SPA的应用场景正在不断拓展。开发者应根据项目需求合理选择架构方案。
前端AI工具——TRAE
2301_80841939的博客
08-22 573
Trae 是一款直接与 Cursor 形成竞争的、由中国团队开发的AI编程助手。它同样采用基于Visual Studio Code核心的编辑器，深度集成了AI功能。
后台管理系统-16-vue3之动态路由的实现
qq_20466211的博客
08-25 174
动态添加路由函数，解决多账号路由权限问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小红花大酒店

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值