Web程序设计基础R课程实验 2021 太原理工大学
作者：互联网
web程序设计基础R课程实验
实验一 HTML基础
一、实验目的
1．掌握常用的HTML语言标记；
2．利用文本编辑器建立HTML文档，制作简单表单页面。
二、实验环境
计算机、Windows操作系统
三、实验内容、源码及运行结果
实验内容：
1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）
源程序清单如下：
<html>
<head>
<title>Example</title>
</head>
<body bgcolor="#00DDFF">
<h1><B><I><FONT COLOR="#FF00FF">
<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>
</FONT></I></B></h1>
<hr>
<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>
<EM>Welcome to the world of HTML</EM>
<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>
<p>Following is three chapters
<ul>
<li>This is the chapter one</li>
<li><A HREF="#item">This is the chapter two</A></li>
<li>This is the chapter three</li>
</ul></p>
<hr>
<p><A NAME="item">Following is items of the chapter two</A> </p>
<table border=2 bgcolor=gray width="40%">
<tr>
<th>item</th><th>content</th>
</tr>
<tr>
<td>item 1</td>
<td>font</td>
</tr>
<tr>
<td>item 2</td>
<td>table</td>
</tr>
<tr>
<td>item 3</td>
<td>form</td>
</tr>
</table>
<hr><p>
1<p>
2<p>
3<p>
4<p>
5<p>
6<p>
7<p>
<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>
</p>
</body>
</html>
2．编写一个能输出如下图所示界面的HTML文件。要求：
（1）校验输入的E-mail的格式：用户名@域名。
（2）校验输入的电话格式：11位数字组成。
（3）性别“女”为默认选项
（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实验一</title>
</head>
<body>
<form action="" align="center">
<h4>请留下你的个人资料</h4>
<table align="center">
<tr>
<td>姓名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>E-mail：</td>
<td><input type="Email" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$)"></td>
</tr>
<tr>
<td>电话：</td>
<td><input type="tel" maxlength="11" minlength="11" pattern="[0-9]"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input name="sex" type="radio" id="man"><label for="man">男</label>
<input name="sex" type="radio" id="woman"><label for="woman">女</label>
</td>
</tr>
<tr>
<td>年龄：</td>
<td>
<select name="" id="">
<option value="" selected>20以下</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="">25以上</option>
</select>
</td>
</tr>
<tr>
<td>留言板：</td>
<td><input type="textarae" ></td>
</tr>
<tr>
<td>您的爱好：</td>
<td>
<input type="checkbox" name="hobbys" id="sport">
<label for="sport">运动</label><br>
<input type="checkbox" name="hobbys" id="read">
<label for="read">阅读</label><br>
<input type="checkbox" name="hobbys" id="music">
<label for="music">音乐</label><br>
<input type="checkbox" name="hobbys" id="ly">
<label for="ly">旅游</label>
</td>
</tr>
</table>
<input type="submit" value="提交">
<input type="reset" value="全部重写">
</form>
</body>
</html>
运行结果：
实验二 CSS+DIV页面布局
一、实验目的
1．理解网页内容和表现的分离；
2．熟悉CSS的基本语法和格式；
3．了解页面常用布局结构；
4. 学会用CSS+DIV布局制作一个博客页面。
二、实验环境
计算机、Windows操作系统
三、实验内容、源码及运行结果
实验内容：
1．在网页中应用CSS
网页中应用CSS有4种方法，分别是：内联CSS样式、嵌入CSS样式、链接外部CSS样式表和导入外部CSS样式表。
（1）内联CSS样式
新建HTML文档，在body标记中输入下面的代码
<p style=”font-size:72;font-style:bold;color:red;>这是一段红色粗体文字</p>
<p>这段文字没有应用样式</p>
浏览结果。
（2）嵌入式CSS样式
在上题基础上，在head标记中输入下面的代码
<style type=”text/css”>
h1{color:#ff0000;font-family:黑体}
.mystyle{color:#0000ff; font- family:黑体;font-size:64}
p.first{ color:#000000; font- family:宋体;font-size:12}
p.second{ color:#00ff00; font- family:宋体;font-size:32}
在body标记中继续输入下面代码
<h1>网页设计制作</h1>
<p class=”first”>网页设计制作</p>
<p class=”second”>网页设计制作</p>
<p class=”mystyle”>网页设计制作</p>
<div class=”mystyle”>网页设计制作</div>
浏览效果。
（3）外部样式表
新建文本文件，输入下面的代码
h1{color:#ff0000;font-family:黑体}
p.first{ color:#000000;font-family:宋体;font-size:12}
p.second{ color:#00ff00;font-family:宋体;font-size:32}
p. mystyle { color:#0000ff;font-family:宋体;font-size:64}
将文件保存为mystyle.css
新建HTML文档，在head标记中输入下面的代码
<link rel=”stylesheet” type=”text/css” href=” mystyle.css”>
在body标记中输入下面的代码
<h1>网页设计制作</h1>
<p class=”first”>网页设计制作</p>
<p class=”second”>网页设计制作</p>
<p class=” mystyle”>网页设计制作</p>
<div class=” mystyle”>网页设计制作</div>
浏览效果。
（4）导入外部CSS样式
新建HTML文档，在head标记中输入下面的代码
<style type=”text/css”>
@import url(“mystyle.css”);
</style>
Body标记中的内容与（3）相同，浏览效果。
2．结合HTML5的语义化标签，使用DIV+CSS网页布局技术设计一个个人博客页面。要求：（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息。如下图所示。
（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。
（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。
（4）设置导航菜单的超链接样式，关键点：链接目标为#，设置鼠标悬停在导航栏中的热字上时背景色的变化。
源码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实验一</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<header id="top">
<h1>某某的博客</h1>
</header>
<nav>
<ul>
<a href="#"><li>首页</li></a>
<a href="#"><li>博文</li></a>
<a href="#"><li>相册</li></a>
<a href="#"><li>个人档案</li></a>
</ul>
</nav>
<div class="container">
<article>
<header>
<h3>HTML5</h3>
</header>
<p>HTML5是下一代HTML的标准，目前仍然处于发展阶段。经过了Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。</p>
<footer>编辑于2018.9</footer>
</article>
<article>
<header>
<h3>CSS3</h3>
</header>
<p>对于端口设计师来说，虽然CSS3不是全新的技术，但它却重启了一扇奇思妙想的窗户。</p>
<footer>编辑于2018.9</footer>
</article>
<aside>
<h3>简介</h3>
<p>HTML5和CSS3正在掀起一场变革，他不是在代替Flash，而是正在发展成为开放的Web平台，不但在移动领域建工卓著，而且对传统的应用程序发起挑战。</p>
</aside>
</div>
<footer>
<h5>版权所有2018</h5>
</footer>
</body>
</html>
CSS部分：
*{
margin: 0;
padding: 0;
}
#top{
width: 100%;
height: 100px;
text-align: center;
}
#top h1 {
line-height: 100px;
font-size: 50px;
letter-spacing:20px;
}
nav{
background-color:skyblue;
height: 70px;
}
a{
text-decoration: none;
}
a:hover{
color: aqua;
}
ul{
margin-left: 10%;
}
ul li {
list-style: none;
float: left;
margin-right: 40px;
font-size:30px;
line-height: 70px;
}
.container{
width: 100%;
margin-top: 50px;
}
.container article{
width: 55%;
float: left;
margin-left: 10%;
margin-top: 30px;
padding: 30px;
box-sizing: border-box;
border: 1px solid rgb(24, 174, 233);
}
.container article h3{
border-bottom: 1px dashed rgb(24, 174, 233);
}
.container article p{
margin-top: 5px;
line-height:30px;
}
.container aside{
float: right;
top: 50%;
transform: translateY(-50%);
width: 13%;
margin-right: 10%;
padding: 30px;
box-sizing: border-box;
border: 1px solid rgb(24, 174, 233);
}
.container aside p{
top: 5px;
}
footer{
clear: both;
border-top: 1px solid rgb(24, 174, 233);
margin-top: 15px;
}
footer h5{
float: left;
margin-left: 50%;
margin-top: 5px;
transform:translateX(-50%);
}
运行结果：
实验三 JavaScript内置函数与内置对象
一、实验目的
1．分析JavaScript内置函数的使用方法；
2．掌握JavaScript常用内置对象的属性和方法。
二、实验环境
计算机、Windows操作系统
三、实验内容、源码及运行结果
实验内容
1．阅读下面的程序，理解JavaScript系统内置函数的功能
源程序清单如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>内置函数的理解</title>
<style type="text/css">
div{
background:#CDEBE6;
color:#330000;
width:750px;
font-size:20px;
font-weight:bolder;
}
h4{text-align:center;}
b{color：red;font-size:18px;}
</style>
</head>
<body>
<div>
<h4>系统函数使用</h4>
<b>1.eval("字符串")<br/></b>
<script type="text/javascript">
var rel=eval("1000+3/5");
document.write(" "+"1000+3/5="+rel);
document.write("<br/>");
document.write(" "+"x=10,y=20,x*y=");
eval("x=10;y=20;document.write(x*y)");
document.write("<br/> 2+2="+eval("2+2"));
document.write("<br/>");
var x=10;
document.write(" "+"x=10,x+17="+eval(x+17));
document.write("<br/>");
</script>
<b>2.escape("字符串")<br/></b>
<script type="text/javascript">
document.write(" "+"escape('&')="+escape("&"));
document.write("<br/>");
result=escape(" "+"my name is 张华");
document.write(" "+"escape('my name is 张华')="+result);
</script>
<b>3.unescape(string)<br/></b>
<script type="text/javascript">
document.write(" "+"unescape('%26')="+unescape("%26"));
document.write("<br/>");
result=unescape(" "+"my%20name%20is%20%u5F20%u534E");
document.write(" "+"unescape('my%20name%20is%20%u5F20%u534E')="+result);
</script>
<b>4.parseFloat(string)<br/></b>
<script type="text/javascript">
document.write(" "+"parseFloat('3.14')="+parseFloat("3.14"));
document.write("<br/>");
document.write(" "+"parseFloat('314e-2')="+parseFloat("314e-2"));
document.write("<br/>");
document.write(" "+"parseFloat('3.14ab')="+parseFloat("3.14ab"));
document.write("<br/>");
document.write(" "+"parseFloat('FF2')="+parseFloat("FF2"));
document.write("<br/>");
</script>
<b>5.parseInt("numberstring,radix)<br/></b>
<script type="text/javascript">
document.write(" "+"32:"+parseInt("32"));
document.write("<br/>");
document.write(" "+"032:"+parseInt("032"));
document.write("<br/>");
document.write(" "+"0x32:"+parseInt("0x32"));
document.write("<br/>");
document.write(" "+"parseInt('15*3',10)="+parseInt("15*3",10));
document.write("<br/>");
</script>
<b>6.isNaN()<br/></b>
<script type="text/javascript">
document.write(" "+"isNaN(\"5454g\")="+isNaN("5454g"));
document.write("<br/>");
document.write(" "+"isNaN(\"789\")="+isNaN("789"));
document.write("<br/>");
</script>
</div>
</body>
</html>
2．阅读下面的程序，理解JavaScript系统的Date对象及其方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期对象及其方法 </title>
<script type="text/javascript">
var mydate=new Date();
var myyear=mydate.getFullYear(); <!--使用getFullYear(）获得年份-->
document.write("年份:"+myyear); <!--输出当前年份-->
document.write("<br/>");
var myMonth=mydate.getMonth(); <!--使用getMonth(）获得月份-->
document.write("月份:"+myMonth); <!--输出当前月份-->
document.write("<br/>");
var mydays=mydate.getDate();
document.write("日期:"+mydays); <!--输出当前秒-->
document.write("<br/>");
var weekday=["日","一","二","三","四","五","六"];
document.write("星期：" + weekday[mydate.getDay()] );
document.write("<br/>");
pageOpen=new Date();
function stay(){
pageClose=new Date();
minutes=(pageClose.getMinutes()-pageOpen.getMinutes());
seconds=(pageClose.getSeconds()-pageOpen.getSeconds());
time=(seconds+(minutes*60));
time=(time+"秒");
alert("您在这里停留了"+time+"欢迎下次再来");
}
</script>
</head>
<body>
<input type="button" value="停留时间" onClick="stay()">
</body>
</html>
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实验一</title>
<style>
input{
width: 200px;
height: 150px;
font-size: 50px;
}
p{
font-size: 80px;
}
</style>
</head>
<body style="text-align:center">
<p id="num">0</p>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="end()" />
<input type="button" value="清零" onclick="cls()" />
</body>
<script>
var num = document.getElementById("num");
var i = 0;
var timer;
function start() {
clearInterval(timer);
timer = setInterval(result,1000);
}
function result () {
i++;
num.innerText = i;
}
function end() {
clearInterval(timer);
}
function cls() {
i=0;
num.innerText =i;
clearInterval(timer);
}
</script>
</html>
运行结果：
实验四 JavaScript事件
一、实验目的
1．掌握事件、事件驱动、事件处理程序的概念，理解三者之间的关系；
2．掌握指定事件处理程序的方法；
3、学会编写简单的事件处理程序。
二、实验环境
计算机、Windows操作系统
三、实验内容、源码及运行结果
实验内容
1．阅读下面的程序，理解各段程序中的事件、事件驱动及事件处理。
（1） 表单事件源程序清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单事件</title>
<script type="text/javascript">
function getFocus(){
document.bgColor="blue";
};
function loseFocus(){
document.bgColor="white";
};
function submitTest(){
var msg="表单数据的获取：\n";
msg +="用户名：";
var username=document.getElementById("input1").value;
msg +=username;
msg +=",\n密码:";
var psw=document.getElementById("input2").value;
msg +=psw;
alert(msg);
return false;
}
function resetTest(){
alert("将数据清空");
}
</script>
</head>
<body>
<center>
<form onsubmit="return submitTest()" onreset="resetTest()">
<fieldset height="500px">
<legend>表单事件实例</legend><br/>
用户名：<input type="text" id="input1"/>
密 码:<input type="password" id="input2"/><br/><br/>
<input type="button" value="获得/失去触发事件" onFocus="getFocus()" onBlur="loseFocus()"/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</fieldset>
</form>
</center>
</body>
</html>
（2）鼠标事件源程序清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
img{display: none;}
</style>
</head>
<body>
<p id="name">枫叶红了</p>
<img src="枫叶红了.jpg" id="pic"/>
<script type="text/javascript">
var names=document.getElementById("name");
var pic=document.getElementById("pic");
names.onmouseover=function(){
names.style.color="red";
}
names.onmouseout=function(){
names.style.color="blue";
}
names.onclick=function(){
pic.style.display="block";
}
names.ondblclick=function(){
pic.style.display=" none";
}
</script>
</body>
</html>
2．编写一个html文件的网页代码，页面包含一个下拉列表框、一个文本框和一个按钮（参见下图左），下拉列表框选择要去的网站，当选择完毕后文本框中出现对应的网址（参见下图右）。点击确认跳转按钮后访问文本框中出现的网址。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实验四</title>
<link rel="stylesheet" href="css/style2.css">
<style>
li{
list-style: none;
}
body{
text-align: center;
}
</style>
</head>
<body>
<ul style="margin-top:100px">
<li>请选择要去的网址：</li>
<li>
<select name="" id="one">
<option selected value="4">请选择</option>
<option value="0">百度</option>
<option value="1">网易</option>
<option value="2">qq</option>
<option value="3">新浪</option>
</select>
<input type="text" id="two" disabled value=''>
<input type="button" id="btn" value="确认跳转">
</li>
</ul>
</body>
<script>
var array = ['http://www.baidu.com','http://www.163.com','https://im.qq.com/index','https://www.sina.com.cn/','']
var one = document.getElementById('one');
var two = document.getElementById('two');
var btn = document.getElementById('btn');
one.addEventListener("change",function() {
var val = this.value;
two.value = array[val];
},false);
btn.addEventListener("click",function(){
window.open(two.value);
},false);
</script>
</html>
运行结果：
标签：Web,font,理工大学,write,实验,2021,var,document,nbsp 来源： https://blog.csdn.net/u014708644/article/details/121864293