实验1 Web 客户端编程

最新推荐文章于 2024-07-05 20:20:47 发布

妖怪睡着了

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量263

点赞数

文章标签： web html

本文链接：https://blog.csdn.net/qq_48186298/article/details/109340610

版权

一、实验目的

使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。
验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。
通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。
通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。

二、实验内容

1）使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面。
2）在其中的一个页面里面，开发一个用户注册界面，要求：使用JavaScript检查格式是否正确。

三、源代码

1.注册页面 a.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面
</title>
//javascript检查格式是否正确
<script type="text/javascript">
 function check(){
     var username=document.getElementById("username");
     var userpwd=document.getElementById("userpwd");
     var reuserpwd=document.getElementById("reuserpwd");
     var phone = document.getElementById("uidt");
     var email=document.getElementById("isemail");
     var exp=/^\w+((-\w)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
     var teg=/^[0-9]+$/;
     if(username.value=="")	 
     {
            alert("用户名不能为空，请输入用户名！");
            
         username.focus();
         return false;
     }
     if(userpwd.value=="")
     {
            alert("密码不能为空，请输入密码！");
            userpwd.focus();
            return false;
     }
     if(reuserpwd.value=="")
     {
            alert("确认密码不能为空，请确认密码！");
            reuserpwd.focus();
            return false;
     }
     if(userpwd.value!=reuserpwd.value)
     {
            alert("两次输入的密码不同，请重新输入！");
            reuserpwd.focus();
            return false;
     }
     
     if(!exp.test(email.value)||email.value=="")
    	 {
    	 alert("电子邮件格式错误");
    	 email.focus();
    	 return false;
    	 }
     if(!teg.test(phone.value)||phone.value=="")
    	 {
    	 alert("手机号错误");
    	 phone.focus();
    	 return false;
    	 }
     alert("注册成功"); 
 }

 </script>
</head>
<body background="h/3.jpg">
<form>
<table border = "0">
<caption>用户注册界面</caption>
<tr><td>用户名：</td><td><input type="text" name="username" id="username" placeholder="请输入用户名" /></td></tr>
<tr><td>密码：</td><td><input type="password" name="userpwd" id="userpwd" placeholder="请输入密码"/></td></tr>
<tr><td>确认密码：</td><td><input type="password" name="reuserpwd" id="reuserpwd" placeholder="请确认密码"/></td></tr>
<tr><td>电话号码：</td><td><input type="text" name="uidt" id="uidt" placeholder="请输入电话号码"/></td></tr>
<tr><td>电子邮件：</td><td><input type="text" name="isemail" id="isemail" placeholder="请输入电子邮件"/></td></tr>
<tr align="center"><td><input type="button" name="register" value="注册" onclick="check()"/></td>
<td><input type="button" name="register" value="登录"/></td></tr>
</table>
</form>
</body>
</html>

导航兰c.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不知名影视</title>
<style type="text/css">
body {
    font-family:Arial,Helvetica,sans-serif;azimuth: 
    font-size:12px;
    margin；0px auto;
    heigh:800px;
    border；1px solid #006633;
}
/*#header {
    height:100px;
    width:800px;
    background-image:url("h/3.jpg");
    background-repeat:repeat;
    margin:0px 3px 0px;
}*/
#navigator {
    height:25px;
    width:900px;
    font-size:14px;
    list-style-type:none;
}
#navigator li{
    float:left;
}
#navigator li a {
    color:#000000;
    text-decoration: none;
    padding-top:4px;
    display:block;
    width:131px;
    height:22px;
    text-align: center;
    background-color:#009966;
    margin: 2px;
    }
#navigator li a:hover {
background-color:#006633;
color: #FFFFFF;
}
</style>
</head>
<body background="h/3.jpg">
<div id="header"><h>不知名影视</h></div>
<div id="navigator">
<ul>
   <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>
   <li><a href="#">帮助</a></li>
</ul>
</div>
</body>
</html>

连接 e.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页e啊</title>
</head>
<body background="h/3.jpg">
<div>
<ul>
<li><a href="a.html" target="b">注册页面</a></li>
<li><a href="https://www.mgtv.com/b/338557/10006885.html?cxid=94n3624ea" target="b">画面显示</a></li>
<li><a href="d.html" target="b">音乐播放</a></li>
</ul>
</div>
</body>
</html>

frameset标签应用NewFile.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试网页</title>
</head>

<frameset rows="20%,*">
    <frame src="c.html" name="c"/>
    <frameset cols="20%,*">
    <frame src="e.html" name="e"/>
    <frame src="b.html"  name="b"/> 
    </frameset>
</frameset>
</html>

运行截图：
在这里插入图片描述

妖怪睡着了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实验1 Web 客户端编程

一、实验目的使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。二、实验内容1）使用framese
复制链接

扫一扫