web程序设计大作业

1、web 程序设计大作业web程序设计课程考试大作业姓名：李德坤 学号：24专业：计算机1301班题目3：结合所学的课程内容， 论述web程序设计的相关技术、 应用及学习体会1.HTML 的主要知识点框架是一种在一个浏览器窗口中显示多个HTML文件的网页制作技术。 框架基本结构框架分为框架集和框架两部分。 定义框架的语法格式如下。 标记HTML中用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“”括起来，比如、等，都是标记。多数标记必须成对出现，以开头无斜杠的标记开始， 以有斜杠的标记结束。标记还可以嵌套使用。属性与标记相关的特性称为属性，每个属性总是对应一个属性值，将其称为“属性/值”

2、对。“属性/值”对出现在开始标记的“”之前。在HTML文档中，标题（Heading）很重要。标题是通过-等6对标记进行定义的。定义最大的标题，定义最小的标题。font标记用于编辑网页文字的样式，主要是设置文字的字体、字号、颜色等属性。font标记语法格式如下：HTML的一些元素可以定义字体信息，如粗体、斜体等。 不论是在普通文档，还是在网页文字中，合理的使用段落会使文字的显示更加美观，要表 达的内容也更加清晰。在HTML文件中，有专门的段落标记。粗体标记,被标记对括起的字词或句子在网页中表现为粗体。斜体标记,被标记对括起的字词或句子在网页中表现为斜体。下划线标记,被标记对括起的字词或句子在网页

3、中表现为添加下划线效果。删除线标记,被标记对括起的字词或句子在网页中表现为添加删除线效果，用于呈现 那些不再准确或不再相关的内容。在HTML5中，更加提倡使用CSS样式表控制网页的格式。使用CSS样式表可以实现更加丰富的网页效果，更加精确的控制网页格式，定义和使用CSS也有很多种方法。HTML还提供了列表，可以对网页文字进行更好的布局和定义。所谓列表，就是在网页中将 项目有序或无序的罗列显示。HTML中有3种列表形式： 有序列表、 无序列表和自定义列表。 有序列表有序列表是一个项目的序列，各项目前标有数字表示顺序。有序列表的语法格式如下。web 程序设计大作业不用数字而采用一个符号标志每个项目

4、。 无序列表的语法格列表信息列表信息列表信息 自定义列表的语法格式如下。名称说明名称说明名称说明图像标记在制作网页过程中，可以使用HTML代码中的标记向网页中嵌入一幅图像，也可以使 用CSS设置成某元素的背景图像。 利用标记插入图像是网页中最常用的图像插入方式。背景音乐标记和滚动字幕标记*标记若打开浏览器的同时，希望伴随播放背景音乐，而不显示音乐播放器，可以在HTML文件中使用标记实现，其语法格式如下。src属性用于指定背景音乐文件的地址或音乐文件名，音乐文件必须加上后缀名。loop属性用于定义音乐播放的次数， 可设置为任意正整数，若设为“-1”，音乐将永远循环。标记通过标记可以设置滚动文字，

5、增加网页文字的动态效果，丰富网页的内容。语法 格式如下。滚动文字behavior用来设置滚动方式scrollamount用来设置滚动速度scrolldelay属性来设置滚动文字的延迟时间direction用来设置滚动方向多媒体文件标记要在网页中插入音频和视频文件以及Flash文件就要使用标记，其语法格式如下：HTML5中新增的视频标记语法格式如下。替代文字列表信息列表信息列表信息无序列表无序列表也是一个项目的序列，式如下。web 程序设计大作业HTML5中新增音频标记其语法格式如下。替代内容超级链接标记定义超链接语法格式如下。链接标题 href属性定义了链接标题所指向的目标文件的URL地址。t

6、arget属性指定用于打开链接的目标窗口，默认方式是原窗口。 表单定义标记定义表单的基本语法格式如下。输入标记标记是表单中输入信息常用的标记，其语法格式如下。数值输入域number语法格式如下。列表框标记在HTML文件中， 使用列表框标记，同时嵌套列表项标记，可以实现列表框实例 文本域输入标记有时网页中需要一个多行的文本域， 用来输入更多的文字信息， 行间可以换行，并将这些信 息作为表单元素的值提交到服务器。定义文本域的语法格式如下。框架是一种在一个浏览器窗口中显示多个HTML文件的网页制作技术。 框架基本结构框架分为框架集和框架两部分。 定义框架的语法格式如下。 2.CSS 勺主要知识点CS

7、S（Cascadi ng Style Sheets为层叠样式表，也可以称为CSS羊式表或样式表，其文件扩展名为.CSS CSS是用于控制网页样式，并允许将网页内容与样式信息分离的一种标记语言。CSS的引入就是为了使HTML语言更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能， 如字体、颜色、 背景和整体排版等， 并且网页设计者可以针对各种 可视化浏览器来设置不同的样式风格。选择器英文写作selector，在CSS中，根据选择器的功能或作用范围，将选择器主要分为标 记选择器、类别选择器和ID选择器3种。CSS可以认为是由多个选择器组成的集合，每个选择器由3个基本部分组成的

8、一“选择器名称”、“属性”和“值” ，格式如下。selector property:value;一个HTML页面由很多不同的标记组成，例如p、h1、div等。标记选择器的格式定义如下。tagName property:value;web 程序设计大作业类选择器用来为一系列标记定义相同的呈现方式，语法格式如下。.classValue property:valueclassValue是选择器的名称，具体名称由CSS制定者命名。ID选择器和类选择器类似，都是对特定属性的属性值进行设置。ID选择器和类选择器的区别是，一个HTML文件中只能使用一次某一ID的属性值。定义ID选择器的基本语法格式如 下。#

9、idValue property:value ;在上面的语法格式中，idValue是选择器名称，可以由CSS定义者自己命名。为了设置的CSS样式能够在网页中产生作用，必须将CSS和HTML文件联接在一起， 才可以正常工作。在HTML文件中使用CSS的方式有4种：行内样式、嵌入式、链接式和导入式。 所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，其中每个选择器可以是任何类型的选择器。并集选择器的语法格式。selector1,selector2,property:value;在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。后代选择器的写法是把外层的

10、标记写在前面， 内层的标记写在后面， 之间用空格隔开， 语法 格式如下。selector1 selector2 property:value;子选择器用于选中标记的直接后代 （即儿子），它的定义符号是大于号 （），语法格式如下。selector1selector2相邻（adjacent-sibling）选择器是另一个有趣的选择器， 它的定义符号是加号 （+），相邻选择 器将选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素） 。在CSS中伪对象选择器主要有：first-letter、：first-line、：before和:after。之所以称这些选择器 是伪对象， 是因为它们在效果上

11、使文档增加了一个临时的元素，这是应用“虚构标记” 的一 个典型实例。字体属性用于控制网页中文本字符的显示方式。包括font，font-family，font-size，font-style，font-variant和font-weight等。font-family属性确定要使用的字体列表。font-size属性font-size属性用于控制文字的大小，它的取值分为4种类型：绝对大小、相对大小、长度值 以及百分数。该属性的默认值是medium。font-style属性font-style属性确定指定元素显示的字形。值包括normal、italic和oblique三种。默认值为normal，表示普

12、通字形；italic和oblique表示斜体字形。font-variant属性font-variant属性决定了浏览器显示指定元素的字体变体。有三个值：normal、small-caps和inherit。font-weight属性font-weight属性定义了字体的粗细值，它的取值可以是以下值中的一个：normal、bold、web 程序设计大作业bolder和lighter。font复合属性使用font属性可一次性设置前面介绍的各种字体属性（属性之间以空格分隔） 。在使用font属性设置字体格式时，字体属性名可以省略。font属性的排列顺序是：font-size倒手第二和font-fami

13、ly在最后， 两者是必须出现的， 而font-weight、font-variant、font-style三者在前面， 循序无要求。文本属性用于控制段落格式和文本的修饰方式，例如设置单词间距、字符间距、首行缩进、段落对齐方式等。CSS中 的常用文本属性包括word-spacing、letter-spacing、text-align、text-indent、line-height、text-decoration和text-transform等。在CSS中，颜色属性可以用设来置元素内文本的颜色，而各种背景属性则可以控制元素的背景颜色以或背景图像。color属性用来描述元素的前景颜色，CSS背景属性

14、包括background、background-attachment、background-color、background-image、background-position和background-repeat等。在HTML文档中可以直接通过标记来添加图片。使用border、width、height等属性可以在HTML中调整图片。使用CSS可以为图片设置更加丰富的风格和样式，包括添加边框、缩放图片、实现图文混排和设置对齐方式等。如果需要单独地定义边框一边的样式，可以使用border-top-style设定上边框样式、borderbottom-style设定下边框样式、border-right

15、-style设定右边框样式和border-left-style设定左边 框样式。默认情况， 网页上的图片按原始大小显示。 页面排版时， 通常情况下还需要对图片的大小进 行重新设定。如果对图片设置不恰当，会造成图片的变形和失真。设定图片大小，可以采用以下三种方式。使用img的标记属性width和height使用CSS3中max-width属性和max-height属性使用CSS中width和height属性网页效果的展示很多情况下都是通过图文混排来实现的。使用CSS可以设置多种不同的图文混排方式。文字环绕CSS使用float属性来实现该效果。float语法格式如下。float:none/left

16、/right;其中none表示默认值对象不浮动，left表示文本流向对象的右边，right表示文本流向对象 的左边。3.J avaScript 的主要知识点JavaScript是一种脚本语言，是一种介于HTML与高级编程语言（Java VB和C+等）之间的特殊语言。脚本是一种能完成某些功能的小程序段，该程序段由一组可以在Web服务器或客户端浏览器运行的命令组成。脚本语言可以嵌入HTML页面，并被浏览器解释执行。使用脚本可以把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能。JavaScript是一种脚本语言，是一种基于对象的编程语言，JavaScript本身提供了非常丰富的内部

17、对象供设计人员使用。JavaScript是一种解释性编程语言，其程序由浏览器解释执行。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。JavaScript程序的编写和运行web 程序设计大作业（1）启动Dreamweaver CS5新建HTML文件。（2）在与标记中输入代码。（3）将文件保存为.html或.htm格式文件即可。程序错误分为语法错误和逻辑错误两种。语法错误是指在程序编写过程中使用不符合语言规则的语句，从而产生的错误。 例如， 错误地使用了JavaScript的关键字，错误地定义了变量名称等， 这时浏览器运行JavaScript程序就 会报

18、错。很多包含JavaScript的网页都将JavaScript程序代码直接嵌入到HTML文件中，这是最常见的 使用JavaScript方法。在HTML中书写JavaScript时，需要使用一对标记来告 诉浏览器这是脚本程序。在HTML中书写JavaScript的语法格式如下。属性Ianguage是script标记的基本属性。一般被指定为JavaScript或VBScript。runat=server表示该段脚本在服务器端执行， 如果省略， 则表示该段脚本将发送到客户端运 行。本书主要讲授JavaScript在客户端的执行过程，因此该属性设置省略。是HTML注释语句。可以保证不识别标记的浏览器忽

19、略JavaScript代码。虽然大多数浏览器都支持JavaScript,但还有少数浏览器不支持JavaScript,也有一些浏览器 由于安全问题关闭了对JavaScript的支持。JavaScript语言区分字符大小写。在body和/body标记之间嵌入JavaScript在head和/head标记之间嵌入JavaScript。引用外部的JavaScript文件。1语句结束标志和Java C语言类似，JavaScript使用分号;表示一条语句的结束；而与Java C语言不同的 是，用分号结束一条语句并不是强制性的要求。2语句块一组大括号内的JavaScript语句称为语句块，一个语句块内的语句

20、可以被当作一条语句处 理。为了增加程序的可读性，以便于日后修改和维护代码，可以在JavaScript程序中为代码添加 注释。JavaScript中注释可分为单行注释和多行注释。单行注释用两个斜杠/来表示多行注释则用“/* ”开始，以“ */”结束。JavaScript中的数据类型可以分类3类，分别是3种基本数据类型、2种复合数据类型和两 种特殊数据类型。变量是在程序运行过程中可以改变的量， 是程序中被命名的存储单元， 它的主要作用是为数 据操作提供存放信息的容器。它的定义包括变量名、变量数据类型和作用域几个部分。 变量可以不声明直接赋值，也可以使用var关键字多次声明同一个变量。1顺序结构一个

21、JavaScript程序段可以有多条语句，通常，这些语句按照它们的书写顺序从头到尾依次 执行。这就是程序执行的最简单流程，即顺序结构。2分支结构分支结构主要包括两类语句:一类是条件分支if语句，另一类是多重分支switch语句。下面web 程序设计大作业对这两种类型的条件控制语句进行详细的讲解。3循环结构循环结构是在一定条件下， 反复执行某段程序的流程结构， 反复执行的程序块被称为循环体。 循环结构是程序中非常重要的和基本的一种结构，它是由循环语句来实现的。Java的循环语句共有3种：while语句、do-while语句和for语句。函数是一段能够实现特定运算的代码块，它可以被事件处理或其他语

22、句调用。JavaScript中的函数包括内部函数（内置函数）和外部函数（自定义函数） 。1.函数的引入在设计一个复杂的程序时， 通常根据所要完成的功能， 将程序中相对独立的部分， 每部分编 写一个函数。另外，JavaScript函数还主要用来封装那些在程序中可能要多次用到的模块，以提高程序的 可重用性。在事件处理中， 可将函数作为事件驱动的结果而调用的程序。 从而实现将函数与事件驱动相 关联。2.函数的语法格式函数是由关键字function、函数名、参数及置于大括号中需要执行的一个语句块组成。函数 定义的基本语法格式如下：function functionName（parameters） so

23、me statements;函数由关键字function定义，functionName是函数名。parameters是参数表，可以是一个或多个参数，是传递给函数使用或操作的值，其值可以 是常量 ，变量或其它表达式。函数通过函数名(实参)来调用，当函数有返回值时则必须使用return语句将值返回。 函数名对大小写是敏感的。3.函数的调用 直接调用函数 函数的定义通常放在HTML文 件 的head标记中，而函数的调用语句通常被放在body标记中，如果在函数定义之前调用函数，将会报错。函数的调用格式为如下。functionName(parameters);事件响应中调用函数JavaScript是基于

24、 对象的语言，而基于对象的基本特征，就是采用事件驱动。在JavaScript中常用的事件如下。单击事件onclick改变事件onchange选中事件onselect获得焦点事件onfocus失去焦点事件onblur载入文件事件onload卸载文件事件onunload1.对象的概念 对象用于描述客观世界存在的特定实体。 在计算机世界中，不仅存在来自于客观世界的对象，也包含为解决问题而引入的抽象对象。2.对象的属性和方法属性是用来描述对象静态特性的一组数据，用变量表示。 方法是用来描述对象的动态特征或操作对象的若干动作，用函数描述。1对象属性的引用 使用点(.)运算符objectNp

25、erties = value;通过对象的下标实现引用web 程序设计大作业objectNameindex = value；通过字符串的形式引用objectNameproperties = value;对象方法的引用与对象属性的引用方法相同，使用点运算符。objectName.methodName()；例：student.hello();对象的操作1. forin语句for(propretiesName in objectName) statements;示例demo0701.html2. with语句with(objectName) statements;3. this关键词this是指对当前

26、对象的引用。4. new运算符objectName = new Object (parameterl,parameter 2 , .)例：today=new Date() ;stu=new student(“”,”王刚”,21);JavaScript的对象类型内置对象是指JavaScript语言提供的对象，包括字符串对象(String)、数组对象(Array)，数学 对象(Math)、日期对象(Date)等，提供对象编程基本功能。浏览器对象是浏览器根据系统配置和所装载的页面，为JavaScript程序提供的对象，提供了访问、 控制、 修改客户端(浏览器)的方法。 主要包括Window对象、Na

27、vigator对象、Screen对象、Location对象等。Math对象在JavaScript程序中，关键字Math是对一个已创建好的Math对象的引用，因此使用Math对象时不必先使用new运算符创建实例。也就是说在调用Math对象的属性和方法时，直 接写成“Mperty”和“Math.method()”即可。1.Math对象的属性Math对象的属性是数学运算中常用的常量JavaScript内置对象为程序设计提供了常用功能，浏览器对象则提供了访问、控制、修改客 户端浏览器的方法。浏览器对象模型(Browser Object Model，BOM)是JavaScript可以操作浏

28、览器的各个功能部 件的接口，它提供访问各个功能部件(如窗口本身、屏幕功能部件、历史记录等)的途径以 及操作方法。BOM由一系列对象构成， 主要包括Window、Navigator、Screen、Location、History和Document等对象。JavaScript通过访问BOM(Browser Object Model)对象来完成访问、控制、修改客户端浏览 器的操作，如果要进一步处理浏览器窗口显示的页面文档，则必须使用HTML DOM技术。DOM有如下特点：DOM是跨平台与跨语言的。DOM是用于XHTML、XML文档的应用程序接口(API)。DOM提供一种结构化的文档描述方式，从而使HTML内容以结构化的方式显示。web 程序设计大作业DOM标准是由W3C制定与维护的 。DOM的顶层是document对象。4.当前 web 技术的发展应用及学习体会(1)当前web技术的发展应用当前web技术正在逐渐以万维网 (World Wide Web通用描述语言的第五代版本html5及其周边各种应用开发技术为主。 相比传统We