web程序设计大作业.docx
- 文档编号：28949635
- 上传时间：2023-07-20
- 格式：DOCX
- 页数：18
- 大小：25.34KB
web程序设计大作业.docx
《web程序设计大作业.docx》由会员分享，可在线阅读，更多相关《web程序设计大作业.docx（18页珍藏版）》请在冰豆网上搜索。
web程序设计大作业
web程序设计课程考试大作业
姓名：
李德坤学号：
24专业：
计算机1301班
题目3：
结合所学的课程内容，论述web程序设计的相关技术、应用及学习体会
1.HTML的主要知识点
框架是一种在一个浏览器窗口中显示多个HTML文件的网页制作技术。
框架基本结构
框架分为框架集和框架两部分。
定义框架的语法格式如下。
标记
HTML中用于描述功能的符号称为“标记”。
标记在使用时必须用尖括号“<>”括起来，比如、
、等，都是标记。多数标记必须成对出现，以开头无斜杠的标记开始，以有斜杠的标记结束。
标记还可以嵌套使用。
属性
与标记相关的特性称为属性，每个属性总是对应一个属性值，将其称为“属性/值”对。
“属性/值”对出现在开始标记的“>”之前。
在HTML文档中，标题（Heading）很重要。
标题是通过
-等6对标记进行定义的。
定义最大的标题，定义最小的标题。
font标记用于编辑网页文字的样式，主要是设置文字的字体、字号、颜色等属性。
font标记语法格式如下：
HTML的一些元素可以定义字体信息，如粗体、斜体等。
不论是在普通文档，还是在网页文字中，合理的使用段落会使文字的显示更加美观，要表
达的内容也更加清晰。
在HTML文件中，有专门的段落标记
。
粗体标记，被标记对括起的字词或句子在网页中表现为粗体。
斜体标记，被标记对括起的字词或句子在网页中表现为斜体。
下划线标记，被标记对括起的字词或句子在网页中表现为添加下划线效果。
删除线标记，被标记对括起的字词或句子在网页中表现为添加删除线效果，用于呈现
那些不再准确或不再相关的内容。
在HTML5中，更加提倡使用CSS样式表控制网页的格式。
使用CSS样式表可以实现更加丰
富的网页效果，更加精确的控制网页格式，定义和使用CSS也有很多种方法。
HTML还提供了列表，可以对网页文字进行更好的布局和定义。
所谓列表，就是在网页中将
项目有序或无序的罗列显示。
HTML中有3种列表形式：
有序列表、无序列表和自定义列表。
有序列表
- 列表信息
- 列表信息
- 列表信息
有序列表是一个项目的序列，各项目前标有数字表示顺序。
有序列表的语法格式如下。
……
无序列表
- 列表信息
- 列表信息
- 列表信息
无序列表也是一个项目的序列，不用数字而采用一个符号标志每个项目。
无序列表的语法格式如下。
……
自定义列表的语法格式如下。
- 名称
- 说明
- 名称
- 说明
- 名称
- 说明
……
图像标记
在制作网页过程中，可以使用HTML代码中的标记向网页中嵌入一幅图像，也可以使
用CSS设置成某元素的背景图像。
利用标记插入图像是网页中最常用的图像插入方式。
背景音乐标记
若打开浏览器的同时，希望伴随播放背景音乐，而不显示音乐播放器，可以在HTML文件中
使用
src属性用于指定背景音乐文件的地址或音乐文件名，音乐文件必须加上后缀名。
loop属性用于定义音乐播放的次数，可设置为任意正整数，若设为“-1”，音乐将永远循环。
通过
语法
格式如下。
behavior用来设置滚动方式
scrollamount用来设置滚动速度
scrolldelay属性来设置滚动文字的延迟时间
direction用来设置滚动方向
多媒体文件标记
要在网页中插入音频和视频文件以及Flash文件就要使用
HTML5中新增的视频标记
HTML5中新增音频标记
其语法格式如下。
定义超链接语法格式如下。
href属性定义了链接标题所指向的目标文件的URL地址。
target属性指定用于打开链接的目标窗口，默认方式是原窗口。
表单定义标记
输入标记
标记是表单中输入信息常用的标记，其语法格式如下。
数值输入域—number
语法格式如下。
列表框标记
在HTML文件中，使用列表框标记
实例
文本域输入标记
框架是一种在一个浏览器窗口中显示多个HTML文件的网页制作技术。
框架基本结构
框架分为框架集和框架两部分。
定义框架的语法格式如下。
2.CSS的主要知识点
CSS（CascadingStyleSheet）称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.CSS。
CSS是用于控制网页样式，并允许将网页内容与样式信息分离的一种标记语言。
CSS的引入就是为了使HTML语言更好地适应页面的美工设计。
它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器来设置不同的样式风格。
选择器英文写作selector，在CSS中，根据选择器的功能或作用范围，将选择器主要分为标记选择器、类别选择器和ID选择器3种。
CSS可以认为是由多个选择器组成的集合，每个选择器由3个基本部分组成的—“选择器名称”、“属性”和“值”，格式如下。
selector{
property:
value;
}
一个HTML页面由很多不同的标记组成，例如
、
、等。标记选择器的格式定义如下。
tagName{
property:
value;
}
类选择器用来为一系列标记定义相同的呈现方式，语法格式如下。
.classValue{
property:
value
}
classValue是选择器的名称，具体名称由CSS制定者命名。
ID选择器和类选择器类似，都是对特定属性的属性值进行设置。
ID选择器和类选择器的区别是，一个HTML文件中只能使用一次某一ID的属性值。
定义ID选择器的基本语法格式如下。
#idValue{
property:
value;
}
在上面的语法格式中，idValue是选择器名称，可以由CSS定义者自己命名。
为了设置的CSS样式能够在网页中产生作用，必须将CSS和HTML文件联接在一起，才可以正常工作。
在HTML文件中使用CSS的方式有4种：
行内样式、嵌入式、链接式和导入式。
所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，其中每个选择器可以是任何类型的选择器。
并集选择器的语法格式。
selector1,selector2,…{
property:
value;
}
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。
后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开，语法格式如下。
selector1selector2{
property:
value;
}
子选择器用于选中标记的直接后代（即儿子），它的定义符号是大于号（>），语法格式如下。
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）在
与标记中输入代码。（3）将文件保存为.html或.htm格式文件即可。
程序错误分为语法错误和逻辑错误两种。
语法错误是指在程序编写过程中使用不符合语言规则的语句，从而产生的错误。
例如，错误地使用了JavaScript的关键字，错误地定义了变量名称等，这时浏览器运行JavaScript程序就会报错。
很多包含JavaScript的网页都将JavaScript程序代码直接嵌入到HTML文件中，这是最常见的使用JavaScript方法。
在HTML中书写JavaScript时，需要使用一对标记来告诉浏览器这是脚本程序。
在HTML中书写JavaScript的语法格式如下。
--
statements;
//-->
属性language是script标记的基本属性。
一般被指定为JavaScript或VBScript。
runat="server"表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。
本书主要讲授JavaScript在客户端的执行过程，因此该属性设置省略。
--...//-->是HTML注释语句。
可以保证不识别
标记选择器的格式定义如下。
tagName{
property:
value;
}
类选择器用来为一系列标记定义相同的呈现方式，语法格式如下。
.classValue{
property:
value
}
classValue是选择器的名称，具体名称由CSS制定者命名。
ID选择器和类选择器类似，都是对特定属性的属性值进行设置。
ID选择器和类选择器的区别是，一个HTML文件中只能使用一次某一ID的属性值。
定义ID选择器的基本语法格式如下。
#idValue{
property:
value;
}
在上面的语法格式中，idValue是选择器名称，可以由CSS定义者自己命名。
为了设置的CSS样式能够在网页中产生作用，必须将CSS和HTML文件联接在一起，才可以正常工作。
在HTML文件中使用CSS的方式有4种：
行内样式、嵌入式、链接式和导入式。
所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，其中每个选择器可以是任何类型的选择器。
并集选择器的语法格式。
selector1,selector2,…{
property:
value;
}
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。
后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开，语法格式如下。
selector1selector2{
property:
value;
}
子选择器用于选中标记的直接后代（即儿子），它的定义符号是大于号（>），语法格式如下。
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）在
与标记中输入代码。（3）将文件保存为.html或.htm格式文件即可。
程序错误分为语法错误和逻辑错误两种。
语法错误是指在程序编写过程中使用不符合语言规则的语句，从而产生的错误。
例如，错误地使用了JavaScript的关键字，错误地定义了变量名称等，这时浏览器运行JavaScript程序就会报错。
很多包含JavaScript的网页都将JavaScript程序代码直接嵌入到HTML文件中，这是最常见的使用JavaScript方法。
在HTML中书写JavaScript时，需要使用一对标记来告诉浏览器这是脚本程序。
在HTML中书写JavaScript的语法格式如下。
--
statements;
//-->
属性language是script标记的基本属性。
一般被指定为JavaScript或VBScript。
runat="server"表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。
本书主要讲授JavaScript在客户端的执行过程，因此该属性设置省略。
--...//-->是HTML注释语句。
可以保证不识别
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1