一、实验目的
使用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>
运行截图: