南华大学web课程设计实验报告

南华大学计算机科学与技术学院实验报告（2016~2017学年度第1学期）课程名称Web前端开发技术实验名称Web实验报告姓名刘让洲学号20144350101专业软件工程班级1班地点寝室教师刘洋第一章一、第一章所学内容知识点：在第一章中，我们学习了什么是web技术，对web技术有一定的了解，知道进行web开发以后要学习的各种技术以及对各种技术的简单介绍，为后面的学习打基础。二、第一章实验：实验1-1源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8titleWeb前端技术初步应用/titlestyletype=text/cssp{font-size:20px;color:red;text-indent:2em;}h3{font-size:24px;font-style:bolder;color:#000099;}/style/headbodyh3Web前端开发技术/h3pHTML/ppCSS/ppJavaScript/ph3网络学习资源/h3ahref=教程/ascripttype=text/javascriptalert(Web前端开发工程师就业前景好，待遇高！);/script/body/html实验1-2-1实验截图：实验1-2-2实验截图第二章一、第二章所学内容知识点：在第二章中，我们学习了HTML的基本文档结构以及基本的语法，包括bodyheadtitle等标签的学习。二、第二章实验：实验2-1源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8title求知家园/title/headbodytext=bluebgcolor=#99ffff欢迎来到我们的求知家园！hrsize=5color=#ff3333/body/html实验2-1运行结果：实验2-1源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8titleGoogle搜索/title/headbodybgcolor=#ffff33欢迎使用Google搜索！brimgsrc=img/google.jpgwidth=275height=95border=0alt=hrsize=5color=#0033ff/body/html实验2-2运行结果：第三章一、第三章所学内容知识点：在第三章中，我们学习Web页面初步设计，如：向Web中添加文字信息，格式化文本标记，怎样进行段落的排版与设计，以及相应的各种标签的应用等；二、第三章实验：实验3-1实验源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8title刘让洲的自荐信/title/headbodycenter刘让洲自荐信/centerhrwidth=100%size=1color=#000fff尊敬的领导：br    您好！p    感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！/pspan    我是spanstyle=color:red;南华大学计算机科学与技术学院2014级学生刘让洲/span。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。/p    此致br敬礼!b/bbrhrwidth=100%size=1color=#00ffffcenteraddress联系E-mail:[e-mail]/address/center/body/html实验3-1运行截图：实验3-2实验源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8title数学方程式/titlestyletype=text/cssh3{font-size:24px;color:red;text-align:center;}/style/headbodyh3数学方程式/h3hrcolor=bluewidth=80%size=2center2xsup2/sup+3x=9brxsub1/sub+xsub2/sub=10/center/body/html实验3-2运行截图：第四章一、第四章所学内容知识点：在第四章中，我们主要学习了网页中列表的制作，包括有序列表，无序列表，列表嵌套以及自定义列表等；二、第四章实验：实验4-1源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8titlewindows不同版本/title/headbodyoltype=1liwindows95/liliwindows98/liliwindowsNTultype=discliwindowsNTWorkstation/liliwindowsNTServer/li/ul/liliwindows2000ultype=discliwindows2000Professional/liliwindows2000Server/liliwindows2000AdvanceServer/li/ul/liliwindowsxp/liliwindowsvista/liliwindows7/liliwindows8/li/ol/body/html实验4-1运行截图：实验4-2源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8title第四届中国大学出版社图书奖公示/title/headbodybgcolor=#ccffcch2第四届中国大学出版社图书奖公示/h2dldt优秀教材一等奖（68种）/dtdd1.刑事诉讼法（第五版），陈光中主编，北京大学出版社/dddd2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖编著，北京大学出版社/dddd3.音韻學教程（第四版），唐作藩著，北京大学出版社/dddd4.保险学(第5版)，孙祁祥著，北京大学出版社/dddd.../dddt优秀教材二等奖（119种）/dtdd1.艺术欣赏教程（第2版），杨辛、谢孟主编，北京大学出版社/dddd2.经济学基础（第6版），[美]曼昆著，北京大学出版社/dddd3.创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社/dddd4.医学遗传学（第3版），傅松滨主编，北京大学医学出版/dddd.../dd/dl/body/html实验4-2运行截图：第五章一、第五章所学内容知识点：在第四五章中，我们主要学习了网页中的超链接，网页中链接的标签，路径以及分类，图片链接等；三、第四章实验：实验5-1源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8titleapple网站/titlestyletype=text/cssul{list-style-type:none;margin:0auto;}li{float:left;padding:10px;}img{width:200px;height:150px;}hr{clear:both;}/style/headbodyh2align=centerapple网站/h2hrsize=3color=#66ff33ulliahref==img/1.PNG/a/liliahref==img/2.PNG/a/liliahref==img/3.PNG/a/liliahref==img/4.PNG/a/li/ulhrsize=3color=#66ff33/body/html实验5-1运行截图：实验5-2源代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8title桂林山水风景图片/titlestyletype=text/cssimg{width:100px;height:100px;border:0;}h3{color:#ff0000;}ul{list-style-type:none;text-align:center;}li{display:inline;width:120px;line-height:30px;float:left;}/style/headbodyh3align=center桂林山水风景图片/h3ulliahref=img/gl1.jpgtarget=_topimgsrc=img/gl1.jpgalt=br桂林山水1br/a/liliahref=img/gl2.jpgimgsrc=img/gl2.jpgalt=br桂林山水2br/a/liliahref=img/gl3.jpgimgsrc=img/gl3.jpgalt=br桂林山水3br/a/liliahref=img/gl4.jpgimgsrc=img/gl4.jpgalt=br桂林山水4br/a/li/ul/body/html实验5-2运截图：第六章一、第六章所学内容知识点：在第一章中，我们主要学习了怎样在网页插入图像和音乐，视频等多媒体，滚动文字，背景音乐使得网页更加炫酷了一点呢。二、第六章实验：实验6-1原代码：!doctypehtmlhtmllang=enheadmetacharset=UTF-8title图像对齐方式应用/title/headbodyh2align=center图像对齐方式应用/h2hrcolor=#ff3366h3未设置对齐方式的图像:/h3pimgsrc=img/eg_cute.gifPNG，图像文件存储格式，其目的是试图(原来此处使用了企图)替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。/ph3已设置对齐方式的图像：/h3pPNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。imgsrc=img/eg_cute.gifalign=b