HTML与Javascript练习
一． 实验目的
掌握HTML的编写格式与方法。掌握在HTML文件中编写javascript的基本操作，及在Microsoft Internet Explorer浏览器和其他浏览器中调试javascript的基本操作。并自己写出自己的主页。
二． 实验原理
HTML：超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。不仅仅只是文字。
超文本标记语言的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
头部；<head></head>；主体：<body></body>；有多种元素和标签。
Javascript：是一种脚本语言，是一种动态类型、弱类型、基于原型的语言。广泛用于客户端，可以给HTML网页增加动态的功能。
JavaScript是一门属于网络的脚本语言，也是一门解释性脚本语言。
有以下特点：脚本语言，基于对象，简单，动态性，跨平台性。
三． 实验内容与过程（须附页面截图及代码）
1、主页整体
2、锚点
<font>锚点：</font>
<a href="#001">学习</a>
<a href="#002">日常</a>
<a href="#003">技能</a>
2、背景图片
<body background="image/bei.jpg" bgcolor="#00FFFF" >
3、背景音乐
<p align="right"><audio controls="controls" autoplay="autoplay" loop="-1">
<source src="001.mp3" type="audio/mpeg" /></audio></p>
4、超链接和头像图片
<p align="center"><img src="image/1.jpg" width="8%" height="8%"></p>
<p align="center"><a href="http://user.qzone.qq.com/861953190?ptlang=2052"><font size=6 face=楷体 color=red>我叫吴小兵，这是我的个人主页</font></a></p>
5、以图片为元素的表格
<table>
<tr>
<td><img src="image/pic (1).jpg" width="100%" border="0"></td>
<td><img src="image/pic (2).jpg" width="100%" border="0"></td>
<td><img src="image/pic (3).jpg" width="100%" border="0"></td>
</tr>
<tr>
<td><img src="image/pic (4).jpg" width="100%" border="0"></td>
<td><img src="image/pic (5).jpg" width="100%" border="0"></td>
<td><img src="image/pic (6).jpg" width="100%" border="0"></td>
</tr>
<tr>
<td><img src="image/pic (7).jpg" width="100%" border="0"></td>
<td><img src="image/pic (8).jpg" width="100%" border="0"></td>
<td><img src="image/pic (9).jpg" width="100%" border="0"></td>
</tr>
</table>
6、以文字为表格元素的课程表
<a name="001"><font size="5">学习</font></a>
<table border="1px" bordercolor=black width="400" align="center">
<caption valign=top>大学课程表格</caption>
<tr><td></td><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>
<tr><td rowspan=2>上午</td><td></td><td>信号与系统</td><td></td><td>单片机原理及应用</td><td>大学英语</td></tr>
<tr><td>电子设计自动化</td><td>复变函数</td><td>微型计算机</td><td>信号与系统</td><td>电子设计自动化</td></tr>
<tr><td rowspan=2>下午</td><td>单片机原理及应用</td><td>大学体育</td><td>形势与政策</td><td></td><td>马克思</td></tr>
<tr><td></td><td></td><td>大学英语</td><td>信号与系统</td><td></td></tr>
</table>
7、文字和图片的使用
<p><center><font color="red" size="7" face="楷体">日常混迹于B站</font></center></p>
<a href="http://www.bilibili.com/"><img src="image/bili.jpg" width="100%"></a>
<p><center><font color="black" size="8" face="宋体">喜欢观看电影</font></center></p>
8、表格的三个表项
<table><tr>
<td><a href="http://dnf.qq.com/"><font size="7"><center>DNF</center></font></a></td>
<td><a href="http://lol.qq.com/"><font size="7"><center>LOL</center></font></a></td>
<td><a href="http://cf.qq.com/"><font size="7"><center>CF</center></font></a></td>
9、插入的一个视频框架
<td><embed wmode="direct" flashvars="vid=u002284qehu&tpid=0&showend=1&showcfg=1&searchbar=1&skin=http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf&shownext=1&list=2&autoplay=0" src="http://imgcache.qq.com/tencentvideo_v1/player/TPout.swf?max_age=86400&v=20140714" quality="high" name="tenvideo_flash_player_1488607856957" id="tenvideo_flash_player_1488607856957" bgcolor="#000000" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/cn/flashplayer/" height="273px" align="middle" width="448px">
</td>
10、以网页和图片为框架的表项
<td><iframe src="http://lol.qq.com/" width="448px" height="273px"></iframe></td>
<td><img src="image/cf.jpg" width="448px" height="273px"></td>
11、下拉列表
<div><form name="form1">
<select name="friend" οnchange="frilink()">
<option>--友情链接--</option>
<option value="http://www.0ke.org">0ke</option>
<option value="http://blog.73zls.com/">浅影</option>
<option value="http://www.nxadmin.com/">阿德马</option>
</select>
</form></div>
12、弹出警告
<html>
<head>
<title>警告1</title>
<script language="javaScript">
function a()
{alert("用户名不能为空");}
</script>
</head>
<body οnlοad="a()">
</body>
<html>
13、警告 是否继续访问页面
<html>
<head>
<title>警告框</title>
<script language="javascript">
if(confirm("你希望继续吗？"))
alert("你选择继续！");
else
alert("你选择退出！")
</script>
</head>
<body>
</body>
</html>
14、弹框欢迎光临本店
<html>
<head>
<title>警告3</title>
</head>
<body>
<script language="javascript">
var answer=prompt("请输入你的姓名: ");
if(answer)
alert("欢迎"+answer+"光临本店！");
</script>
</body>
</html>
15、鼠标滑过变颜色
<html>
<head>
<title>biubiu</title>
<script language="javascript">
function change(color){
document.body.bgColor=color;
}
</script>
</head>
<body>
<h1>看我七十二变</h1>
<font size=5>
<span οnmοuseοver="change('red')">变红色</span><br />
<span οnmοuseοver="change('green')">变绿色</span><br />
<span οnmοuseοver="change('gray')">变灰色</span><br />
<span οnmοuseοver="change('blue')">变蓝色</span><br/>
<span οnmοuseοver="change('olive')">变橄榄色</span>
</font>
</body>
</html>
四.收获与体会
通过这次实验，我收获到了：
从不会到了解，再到熟悉。由于书本上描述的很详细，所以学的很快，再加上不会的可以百度。写代码的时候要仔细，标签不能写错。尤其是每一个字母。在写之前就应该有网页的大体布局。思路清晰，不能混乱。
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
