实验指导书.docx

实验一 html基础标签练习实验名称：html基础标签练习实验目的：学习html中基础标签及属性的使用任务要求：利用html基本标签及属性，如标题标签h1,h2,h3.h7,段落标签p,超链接标签a，格式标签,等实现以下网页效果:完成时间：2011.3.3学 时：5分实验二 html表格标签练习实验名称：html表格标签练习实验目的：学习html中表格标签及属性的使用任务要求：利用html表格标签及属性，如 等实现以下网页效果:完成时间：2011.3.15学 时：5分实验三 html表单标签练习 实验名称：html表单标签练习实验目的：学习html中表单标签及属性的使用任务要求：利用html中表单标签及属性，如 等实现以下网页效果完成时间：2011.3.15学 时：5分实验四多媒体标签的使用 实验名称：多媒体标签的使用实验目的：学会在网页中插入音频或视频任务要求：在任意网页中插入音频网页打开自动开始播放显示音频或视频的控制器，要求该音频或视频在网页打开后自动运行，并且重复播放，效果如下图完成时间：2011.3.15学 时：5分实验五 html+CSS基础练习 实验名称：html+CSS基础练习实验目的：实现结构与样式分离的页面设计任务要求：利用html基本标签描述网页结构，不允许html结构中出现样式相关标签及属性，如等不允许出现，所有样式的控制使用CSS来实现，学习CSS内联样式，内部样式，及外部样式的使用，学习CSS样式的实现，如background、font、margin、padding、border等样式属性实现以下网页效果完成时间：2011.3.15学 时：5分实验六 美化表单实验名称：美化表单实验目的：学会css排版样式，学会css中hover伪类的使用任务要求：设计具有语义的表单结构 禁止使用table实现定位 熟练使用css排版样式 熟练使用hover及display样式完成时间：2011.3.15学 时：5分实验七 使用DIV+CSS实现网页布局实验名称：使用DIV+CSS实现网页布局实验目的：学会网页流行布局方式任务要求：使用DIV进行网页区域的描述使用CSS实现div元素的布局实现以下DIV布局样式（也可在此基础上进行扩展）完成时间：2011.3.15学 时：5分实验八UL+CSS实现菜单的设计实验名称：UL+CSS实现菜单的设计实验目的：使用UL标签实现具有语义的菜单结构的设计，使用CSS实现菜单样式任务要求：实现水平布局的菜单样式支持鼠标悬浮变色的样式菜单要求干净整洁，字体规范，字号适中美观可以参考一下菜单样式：完成时间：2011.3.15学 时：5分考试重点实验九ul+CSS实现弹出菜单实验名称：ul+CSS实现弹出菜单实验目的：使用UL设计多级菜单机构，使用CSS实现菜单样式任务要求：使用hover伪类实现鼠标悬浮样式设计使用display样式控制元素可见状态实现鼠标悬浮在一级菜单上，弹出二级菜单升级功能：实现多级菜单的弹出可以参考如下菜单：完成时间：2011.3.15学 时：5分实验十图文混排实验名称：ul+CSS实现弹出菜单实验目的：使用UL设计多级菜单机构，使用CSS实现菜单样式任务要求：使用hover伪类实现鼠标悬浮样式设计使用display样式控制元素可见状态实现鼠标悬浮在一级菜单上，弹出二级菜单升级功能：实现多级菜单的弹出可以参考如下菜单：完成时间：2011.3.15学 时：5分实验十一 html+CSS实例练习实验名称：html+CSS实例练习实验目的：利用html+CSS真是的网页设计任务要求：利用html基本标签实现网页结构的设计，利用CSS实现网页样式的设计，实现以下网页效果完成时间：2011.3.15学 时：5分实验十二Javascript语法练习 实验名称：Javascript语法练习实验目的：学习Javascript基本语法学习Javascript变量定义及使用学习Javascript流程控制方法if.else.,while，for，switch.case.学习方法的定义function methodName(var1，,.).学习document.write(),alert()的使用学习document获取文本信息的方法任务要求：1.实现求1到100的素数，并显示2.输入学生成绩，判断学生成绩的等级并输出3.输入圆形半径，输出面积完成时间：2011.3.15学 时：5分实验十三显示本机日期实验名称：显示本机日期实验目的：学习Javascript内置对象Date的使用任务要求：学习使用Javascript内置对象学习使用Javascript字符串对象 在当前网页中显示本机日期，格式如下XXXX-XX-XXXX:XX:XX星期X完成时间：2011.3.15学 时：5分实验十四Javascript实现图片滚动实验名称：Javascript实现图片滚动实验目的：了解HTML DOM的结构，学习Javascript操纵DOM的方法任务要求：通过DOM对象的scrollTOP和scrollLeft控制容器内图片进行滚动使用window对象的计时器方法实现连续滚动效果如下图所示：完成时间：2011.3.15学 时：5分实验十五Javascript实现图片切换实验名称：Javascript实现图片切换实验目的：深入学习HTML DOM的结构，学习Javascript操纵DOM的方法，学习Javascript事件处理方法任务要求：通过DOM元素的属性，操纵DOM，本例中通过改变img元素的src属性实现图片的切换。使用window对象的计时器方法实现连续切换 效果如下：完成时间：2011.3.15学 时：5分实验十六Javascript实现Tab页面实验名称：Javascript实现Tab页面实验目的：学习Javascript闭包的使用掌握Javascript事件处理的方法掌握Javascript修改DOM样式的方法任务要求：实现Tab页面的设计效果如下图：完成时间：2011.3.15学 时：5分实验十七表单验证实验名称：表单验证实验目的：学习Javascript正则表达式的使用任务要求：用户名：由6-20位字母或数字组成，第一位不能为数字 邮箱地址：格式自定身份证号：15位或18位数字,使用Javascri