web程序设计大作业Word格式.docx

web程序设计大作业Word格式.docx

《web程序设计大作业Word格式.docx》由会员分享，可在线阅读，更多相关《web程序设计大作业Word格式.docx（14页珍藏版）》请在冰豆网上搜索。

fontface="

"

size="

color="

/font>

HTML的一些元素可以定义字体信息，如粗体、斜体等。

不论是在普通文档，还是在网页文字中，合理的使用段落会使文字的显示更加美观，要表

达的内容也更加清晰。

在HTML文件中，有专门的段落标记<

p>

。

粗体标记<

b>

，被<

标记对括起的字词或句子在网页中表现为粗体。

斜体标记<

i>

标记对括起的字词或句子在网页中表现为斜体。

下划线标记<

u>

标记对括起的字词或句子在网页中表现为添加下划线效果。

删除线标记<

s>

标记对括起的字词或句子在网页中表现为添加删除线效果，用于呈现

那些不再准确或不再相关的内容。

在HTML5中，更加提倡使用CSS样式表控制网页的格式。

使用CSS样式表可以实现更加丰

富的网页效果，更加精确的控制网页格式，定义和使用CSS也有很多种方法。

HTML还提供了列表，可以对网页文字进行更好的布局和定义。

所谓列表，就是在网页中将

项目有序或无序的罗列显示。

HTML中有3种列表形式：

有序列表、无序列表和自定义列表。

有序列表<

ol>

有序列表是一个项目的序列，各项目前标有数字表示顺序。

有序列表的语法格式如下。

oltype="

start="

li>

列表信息<

/li>

……

/ol>

无序列表<

ul>

无序列表也是一个项目的序列，不用数字而采用一个符号标志每个项目。

无序列表的语法格式如下。

ultype="

/ul>

自定义列表的语法格式如下。

dl>

dt>

名称<

dd>

说明

/dl>

图像标记<

img>

在制作网页过程中，可以使用HTML代码中的<

标记向网页中嵌入一幅图像，也可以使

用CSS设置成某元素的背景图像。

利用<

标记插入图像是网页中最常用的图像插入方式。

背景音乐标记<

bgsound>

和滚动字幕标记<

marquee>

*

<

若打开浏览器的同时，希望伴随播放背景音乐，而不显示音乐播放器，可以在HTML文件中

使用<

标记实现，其语法格式如下。

bgsoundsrc="

url"

loop="

times"

src属性用于指定背景音乐文件的地址或音乐文件名，音乐文件必须加上后缀名。

loop属性用于定义音乐播放的次数，可设置为任意正整数，若设为“-1”，音乐将永远循环。

通过<

标记可以设置滚动文字，增加网页文字的动态效果，丰富网页的内容。

语法

格式如下。

marqueedirection=””scrollamount=””scrolldelay=””behavior=””>

滚动文字<

/marquee>

behavior用来设置滚动方式

scrollamount用来设置滚动速度

scrolldelay属性来设置滚动文字的延迟时间

direction用来设置滚动方向

多媒体文件标记<

embed>

要在网页中插入音频和视频文件以及Flash文件就要使用<

标记，其语法格式如下：

embedsrc="

width="

height="

autostart="

/embed>

HTML5中新增的视频标记<

video>

语法格式如下。

videosrc="

controls="

替代文字<

/video>

HTML5中新增音频标记<

audio>

其语法格式如下。

audiosrc="

controls"

替代内容<

/audio>

超级链接标记<

a>

定义超链接语法格式如下。

ahref="

url"

target="

target-windows"

>

链接标题<

/a>

href属性定义了链接标题所指向的目标文件的URL地址。

target属性指定用于打开链接的目标窗口，默认方式是原窗口。

表单定义标记<

form>

定义表单的基本语法格式如下。

formname="

formName"

method="

post|get"

action="

enctype="

encoding"

/form>

输入标记<

input>

标记是表单中输入信息常用的标记，其语法格式如下。

inputname="

控制名称"

type="

类型控制"

数值输入域—number

number"

min="

max="

step="

value="

列表框标记<

select>

在HTML文件中，使用列表框标记<

，同时嵌套列表项标记<

option>

，可以实现列表框的效果，其语法格式如下。

实例

selectname="

optionvalue="

/select>

文本域输入标记<

textarea>

有时网页中需要一个多行的文本域，用来输入更多的文字信息，行间可以换行，并将这些信

息作为表单元素的值提交到服务器。

定义文本域的语法格式如下。

textareaname="

rows="

cols="

wrap="

id="

/textarea>

2.CSS的主要知识点

CSS（CascadingStyleSheet）称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.CSS。

CSS是用于控制网页样式，并允许将网页内容与样式信息分离的一种标记语言。

CSS的引入就是为了使HTML语言更好地适应页面的美工设计。

它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器来设置不同的样式风格。

选择器英文写作selector，在CSS中，根据选择器的功能或作用范围，将选择器主要分为标记选择器、类别选择器和ID选择器3种。

CSS可以认为是由多个选择器组成的集合，每个选择器由3个基本部分组成的—“选择器名称”、“属性”和“值”，格式如下。

selector{

property:

value;

}

一个HTML页面由很多不同的标记组成，例如<

div>

等。

标记选择器的格式定义如下。

tagName{

类选择器用来为一系列标记定义相同的呈现方式，语法格式如下。

.classValue{

value

classValue是选择器的名称，具体名称由CSS制定者命名。

ID选择器和类选择器类似，都是对特定属性的属性值进行设置。

ID选择器和类选择器的区别是，一个HTML文件中只能使用一次某一ID的属性值。

定义ID选择器的基本语法格式如下。

#idValue{

value;

在上面的语法格式中，idValue是选择器名称，可以由CSS定义者自己命名。

为了设置的CSS样式能够在网页中产生作用，必须将CSS和HTML文件联接在一起，才可以正常工作。

在HTML文件中使用CSS的方式有4种：

行内样式、嵌入式、链接式和导入式。

所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，其中每个选择器可以是任何类型的选择器。

并集选择器的语法格式。

selector1,selector2,…{

property:

在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。

后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开，语法格式如下。

selector1selector2{

子选择器用于选中标记的直接后代（即儿子），它的定义符号是大于号（>

），语法格式如下。

selector1>

selector2

相邻（adjacent-sibling）选择器是另一个有趣的选择器，它的定义符号是加号（+），相邻选择器将选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）。

在CSS中伪对象选择器主要有:

first-letter、:

first-line、:

before和:

after。

之所以称这些选择器是伪对象，是因为它们在效果上使文档增加了一个临时的元素，这是应用“虚构标记”的一个典型实例。

字体属性用于控制网页中文本字符的显示方式。

包括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，表示普通字形；

italic和oblique表示斜体字形。

font-variant属性

font-variant属性决定了浏览器显示指定元素的字体变体。

有三个值：

normal、small-caps和inherit。

font-weight属性

font-weight属性定义了字体的粗细值，它的取值可以是以下值中的一个：

normal、bold、bolder和lighter。

font复合属性

使用font属性可一次性设置前面介绍的各种字体属性（属性之间以空格分隔）。

在使用font属性设置字体格式时，字体属性名可以省略。

font属性的排列顺序是：

font-size倒手第二和font-family在最后，两者是必须出现的，而font-weight、font-variant、font-style三者在前面，循序无要求。

文本属性用于控制段落格式和文本的修饰方式，例如设置单词间距、字符间距、首行缩进、段落对齐方式等。

CSS中的常用文本属性包括word-spacing、letter-spacing、text-align、text-indent、line-height、text-decoration和text-transform等。

在CSS中，颜色属性可以用设来置元素内文本的颜色，而各种背景属性则可以控制元素的背景颜色以或背景图像。

color属性用来描述元素的前景颜色，CSS背景属性包括background、background-attachment、background-color、background-image、background-position和background-repeat等。

在HTML文档中可以直接通过<

标记来添加图片。

使用border、width、height等属性可以在HTML中调整图片。

使用CSS，可以为图片设置更加丰富的风格和样式，包括添加边框、缩放图片、实现图文混排和设置对齐方式等。

如果需要单独地定义边框一边的样式，可以使用border-top-style设定上边框样式、border-bottom-style设定下边框样式、border-right-style设定右边框样式和border-left-style设定左边框样式。

默认情况，网页上的图片按原始大小显示。

页面排版时，通常情况下还需要对图片的大小进行重新设定。

如果对图片设置不恰当，会造成图片的变形和失真。

设定图片大小，可以采用以下三种方式。

使用img的标记属性width和height

使用CSS3中max-width属性和max-height属性

使用CSS中width和height属性

网页效果的展示很多情况下都是通过图文混排来实现的。

使用CSS，可以设置多种不同的图文混排方式。

文字环绕

CSS使用float属性来实现该效果。

float语法格式如下。

float:

none/left/right;

其中none表示默认值对象不浮动，left表示文本流向对象的右边，right表示文本流向对象的左边。

3.JavaScript的主要知识点

JavaScript是一种脚本语言，是一种介于HTML与高级编程语言（Java、VB和C++等）之间的特殊语言。

脚本是一种能完成某些功能的小程序段，该程序段由一组可以在Web服务器或客户端浏览器运行的命令组成。

脚本语言可以嵌入HTML页面，并被浏览器解释执行。

使用脚本可以把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能。

JavaScript是一种脚本语言，是一种基于对象的编程语言，JavaScript本身提供了非常丰富的内部对象供设计人员使用。

JavaScript是一种解释性编程语言，其程序由浏览器解释执行。

JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。

JavaScript程序的编写和运行

（1）启动DreamweaverCS5新建HTML文件。

（2）在<

与<

/body>

标记中输入代码。

（3）将文件保存为.html或.htm格式文件即可。

程序错误分为语法错误和逻辑错误两种。

语法错误是指在程序编写过程中使用不符合语言规则的语句，从而产生的错误。

例如，错误地使用了JavaScript的关键字，错误地定义了变量名称等，这时浏览器运行JavaScript程序就会报错。

很多包含JavaScript的网页都将JavaScript程序代码直接嵌入到HTML文件中，这是最常见的使用JavaScript方法。

在HTML中书写JavaScript时，需要使用一对<

script>

/script>

标记来告诉浏览器这是脚本程序。

在HTML中书写JavaScript的语法格式如下。

scriptlanguage="

javascript"

runat="

server"

!

--

statements;

//-->

属性language是script标记的基本属性。

一般被指定为JavaScript或VBScript。

runat="

表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。

本书主要讲授JavaScript在客户端的执行过程，因此该属性设置省略。

--...//-->

是HTML注释语句。

可以保证不识别<

标记的浏览器忽略JavaScript代码。

虽然大多数浏览器都支持JavaScript，但还有少数浏览器不支持JavaScript，也有一些浏览器由于安全问题关闭了对JavaScript的支持。

JavaScript语言区分字符大小写。

在<

和<

标记之间嵌入JavaScript。

和<

/head>

引用外部的JavaScript文件。

1．语句结束标志

和Java、C语言类似，JavaScript使用分号"

;

表示一条语句的结束；

而与Java、C语言不同的是，用分号结束一条语句并不是强制性的要求。

2．语句块

一组大括号"

{}"

内的JavaScript语句称为语句块，一个语句块内的语句可以被当作一条语句处理。

为了增加程序的可读性，以便于日后修改和维护代码，可以在JavaScript程序中为代码添加注释。

JavaScript中注释可分为单行注释和多行注释。

单行注释用两个斜杠//来表示

多行注释则用“/﹡”开始，以“﹡/”结束。

JavaScript中的数据类型可以分类3类，分别是3种基本数据类型、2种复合数据类型和两种特殊数据类型。

变量是在程序运行过程中可以改变的量，是程序中被命名的存储单元，它的主要作用是为数据操作提供存放信息的容器。

它的定义包括变量名、变量数据类型和作用域几个部分。

变量可以不声明直接赋值，也可以使用var关键字多次声明同一个变量。

1．顺序结构

一个JavaScript程序段可以有多条语句，通常，这些语句按照它们的书写顺序从头到尾依次执行。

这就是程序执行的最简单流程，即顺序结构。

2．分支结构

分支结构主要包括两类语句:

一类是条件分支if语句，另一类是多重分支switch语句。

下面对这两种类型的条件控制语句进行详细的讲解。

3．循环结构

循环结构是在一定条件下，反复执行某段程序的流程结构，反复执行的程序块被称为循环体。

循环结构是程序中非常重要的和基本的一种结构，它是由循环语句来实现的。

Java的循环语句共有3种：

while语句、do-while语句和for语句。

函数是一段能够实现特定运算的代码块，它可以被事件处理或其他语句调用。

JavaScript中的函数包括内部函数（内置函数）和外部函数（自定义函数）。

1.函数的引入

在设计一个复杂的程序时，通常根据所要完成的功能，将程序中相对独立的部分，每部分编写一个函数。

另外，JavaScript函数还主要用来封装那些在程序中可能要多次用到的模块，以提高程序的可重用性。

在事件处理中，可将函数作为事件驱动的结果而调用的程序。

从而实现将函数与事件驱动相关联。

2.函数的语法格式

函数是由关键字function、函数名、参数及置于大括号中需要执行的一个语句块组成。

函数定义的基本语法格式如下：

functionfunctionName（parameters）{

somestatements;

函数由关键字function定义，functionName是函数名。

parameters是参数表，可以是一个或多个参数，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。

函数通过函数名（实参）来调用，当函数有返回值时则必须使用return语句将值返回。

函数名对大小写是敏感的。

3.函数的调用

直接调用函数

函数的定义通常放在HTML文件的<

标记中，而函数的调用语句通常被放在<

标记中，如果在函数定义之前调用函数，将会报错。

函数的调用格式为如下。

functionName（parameters）;

事件响应中调用函数

JavaScript是基于对象的语言，而基于对象的基本特征，就是采用事件驱动。

在JavaScript中常用的事件如下。

单击事件onclick

改变事件onchange

选中事件onselect

获得焦点事件onfocus

失去焦点事件onblur

载入文件事件onload

卸载文件事件onunload

1.对象的概念

对象用于描述客观世界存在的特定实体。

在计算机世界中，不仅存在来自于客观世界的对象，也包含为解决问题而引入的抽象对象。

2.对象的属性和方法

属性是用来描述对象静态特性的一组数据，用变量表示。

方法是用来描述对象的动态特征或操作对象的若干动作，用函数描述。

1．对象属性的引用

使用点（.）运算符

objectName.properties=value;

通过对象的下标实现引用

objectName[index]=value；

通过字符串的形式引用

objectName[properties]=value;

对象方法的引用与对象属性的引用方法相同，使用点运算符。

objectName.methodName（）；

例：

student.hello（）;

对象的操作

1．for…in语句

for（propretiesNameinobjectName）{

示例demo0701.html

2.with语句

with（objectName）{

}3.this关键词　

this是指对当前对象的引用。

4.new运算符

objectName=newObject（[parameter1，parameter2，……]）

today=newDate（）;

stu=newstudent（“20010001”,”王刚”,21）;

JavaScript的对象类型

内置对象是指JavaScript语言提供的对象，包括字符串对象（String）、数组对象（Array），数学对象（Math）、日期对象（Date）等，提供对象编程基本功能。

浏览器对象是浏览器根据系统配置和所装载的页面，为JavaScript程序提供的对象，提供了访问、控制、修改客户端（浏览器）的方法。

主要包括Window对象、Navigator对象、Screen对象、Location对象等。

Math对象

在JavaScript程序中，关键字Math是对一个已创建好的Math对象的引用，因此使用Math对象时不必先使用new运算符创建实例。

也就是说在调用Math对象的属性和方法时，直接写成“Math.property”和“Math.method（）”即可。

1.Math对象的属性

Math对象的属性是数学运算中常用的常量

JavaScript内置对象为程序设计提供了常用功能，浏览器对象则提供了访问、控制、修改客户端浏览器的方法。

浏览器对象模型（BrowserObjectModel，BOM）是JavaScript可以操作浏览器的各个功能部件的接口，它提供访问各个功能部件（如窗口本身、屏幕功能部件、历史记录