第 1 章 HTML基础
--------------------------------------------------------------------------------
1.1 什么是HTML
1.1.1 Web页的基本概念
1.1.1.1 Internet与WWW
通俗地讲,Internet就是许多不同功能的计算机通过网络设备连接起来组成一个覆盖全球的网络。从信息资源的角度看,Internet是一个集各个部门、各个领域的各种信息资源为一体,供网上用户共享信息资源网。
Internet能提供的服务包括:WWW服务、E-mail服务、FTP服务、TELNET服务、网上传呼(ICQ;OICQ)、电子商务、网络炒股、在线聊天、联网游戏等。
由此可见,WWW(World Wide Web,译为“万维网”)并不就是Internet,它只是Internet提供的服务之一,不过它是Internet上发展最为蓬勃的部分,相当多的其他Internet服务是基于WWW服务的。
1.1.1.2 WWW与浏览器
从技术的角度讲,WWW是由遍布在Internet上称为Web服务器的计算机组成,它将不同的信息资源有机地组织在一起,能过一种叫浏览器的软件进行浏览。
浏览器是获取WWW服务的基础,它的基本功能就是对网页进行显示。
1.1.1.3 网站与主页
WWW是由Internet上无数的Web服务器构成的,通过浏览器访问这些服务器上的网页,不同的网页通过超链接联系在一起,构成了WWW的纵横交织结构。
通常我们把一系列逻辑上可以视为一个整体的页面叫做网站,或者说,网站就是一个有共同主题的页面的集合。
主页是网站中一个特殊页面,它是网站的入口页面,其中包含指向其他页面的超链接。通常主页的名称是固定的,例如:index.html(.html或.htm后缀表示HTML文档)
1.1.2 HTML的工作原理
HTML(HyperText Markup Language,超文本标记语言)是表示网页的一种规范(或者说是一种标准),它通过标记符定义了网页内容如何显示。
网页是用HTML语言写成的文本文件,但它与文本文件不同的是,网页中包含有指向其它位置的链接,通过这些链接使网页组织成了网状结构。
在HTML文档中,通过使用标记符可以告诉浏览器如何显示见网页,即确定网页内容的显示格式。所以HTML文档就是网页文件,有时也称为Web页。
1.2 创建Web页
1.2.1 标记符基础
HTML语言是影响网页内容显示格式的标记符集合,浏览器根据标记符决定网页的实际显示效果。
1.2.1.1 基本的HTML语法
在HTML中所有的标记都用尖括号括起来。绝大多数的标记符是成对出现的,即有开始标记符与结束标记符,开始标记符和相应的结束标记符定义了标记所影响的范围。结束标记符与开始标记符的区别是多一个斜线。例如:
<h1>让我们一起来学习HTML!!</h1>
但是,也有少数标记符是单一的不成对的,例如:<br>、<hr>等。
HTML标记符是不区分大小写的。
1.2.1.2 标记符的属性
属性是用来描述对象特征的特性。许多标记符还包含一些属性,以便对标记符作用的内容进行更详细的控制。
在HTML中,所有的属性都放置在开始标记符的尖括号里,属性与标记符之间用空格分隔;属性的值放在相应的属性名之后,用等号分隔;而不同的属性之间用空格分隔。例如:
<font size=7 color=red>大家好</font>
1.2.2 Web页的基本结构
HTML文档中通常都包括以下基本标记符:<html>和</html>、<head>和</head>、<body>和</body>。
1.2.2.1 HTML标记
<html>是Web页的第一个标记符,</html>是最后一个标记符。Web页的其它所有内容都必须位于这两个标记符之间。
1.2.2.2 首部标记
<head>和</head>位于Web页的开头,其中不包括Web页的任何实际内容,而是提供一些与Web页有关的特定信息。首标记的内容也用特定的标记括起来。
(1) TITLE 标记符
在首标记符中,最基本、最常用的是标题标记符<title></title>,用于定义网页的标题,网页标题可被浏览器用书签和收藏清单。
(2) META 标记符
它用于说明Web页有关的信息。在META标记符中常用的属性有:name、http-quiv以及content。name是给出关于网页某一属性的名称,而content是给出属性的值,http-equiv指定HTTP响应名称,通常用于替换name属性。
META 标记符的一个常用功能是设置自动页面跳转。即使浏览器自动从一个页面跳马转到另一个页面。语法格式如下:
<META http-equiv="Refresh" content="5; url=URL">
(3) BGSOUND标记符
它用于指定网页的背景音乐。语法格式如下:
<BGSOUND src=音乐文件 loop=播放次数>
音乐文件的格式一般为.wav、.mid或.mp3。
1.2.2.3 正文标记符
正文标记符<BODY>和</BODY>包含 Web 页的内容。文字、图形、链接以及其他 HTML 元素都位于该标记符内。
注意:空格、回车这些格式控制在显示时都不起作用,如要使它们起作用,应使用预格式化元素<PRE>和</PRE>。
1.2.3 设置页面属性
正文标记符包括一些常用属性,用于设置网页背景颜色和图案,以及设置文档和超链接的颜色。
(1) 颜色的表示
在HTML中可以用两种方式来表示颜色:
通过颜色名表示颜色
通过设置RGB(Red Green Blue)值来表示颜色
通过颜色名表示颜色,直接给出要显示颜色的英文名称即可。但是,在HTML中只保留了16个颜色名,所以用颜色名所能表示的颜色很有限。
通过RGB值表示颜色,是利用三色光的相互混合调制出成千上万种颜色。
RGB表示法的标准格式是:以“#”开头,后面紧跟着6位16进制数,每2位为一组,代表一种颜色成分,按“#RRGGBB”方式排列。
#000000 #008000
#C0C0C0 #00FF00
#808080 #808000
#FFFFFF #FFFF00
#800000 #000080
#FF0000 #0000FF
#800080 #008080
#FF00FF #00FFFF
1.2.3.2 设置页面背景图像
设置页面背景图像是通过设置BODY标记符中的background属性实现的,其语法格式如下:
<body background="图像文件的URL">
1.2.3.3 设置背景图像水印效果
Internet Explorer还支持BODY标记符的另一个属性—bgproperties,该属性可以设置背景图案的水印效果。语法格式如下:
<body background=图像文件URL bgproperties=效果>
1.2.3.4 设置文字和超链接的颜色
设置正文和超链接的颜色,可以使用BODY标记符的text、link、vlink和alink属性。常用的语法格式如下:
<body text=#RRGGBB link=#RRGGBB vlink=#RRGGBB alink=#RRGGBB>
其中:
text 用于设置正文颜色
link 用于设置未被访问的超链接的颜色
vlink 用于设置已被访问的超链接的颜色
alink 用于设置激活超链接的颜色
1.2.4 添加注释
不论是编写程序还是制作网页,为所做的工作添加注释都是一种良好的工作习惯。HTML 的注释由开始标记符<!-- 和结束标记符 --> 构成。注释内容都将被浏览器解释为注释,而不在浏览器中显示。
1.2.5 显示特殊字符
如果需要在网页中显示某些特殊字符,例如: <(小于号)、>(大于号)、”(引号)等,则需使用参考字符来表示,而不能直接输入。参考字符以“&”号开始,以“;”结束,既可以使用数字代码,也可以使用代码名称。 最常见的特殊字符如下表所示(完整的编码请参见附录2)
特殊字符 数字代码 代码名称
" + "
& & &
< < <
> > >
1.3 发布Web页
1.3.1 创建本地站点
1.3.2 申请网页空间
1.3.3 用FTP上传网页
--------------------------------------------------------------------------------
第 2 章 文本格式
--------------------------------------------------------------------------------
2.1 文本分段
在HTML文档中对段落的控制包括:段落标记符P、换行标记符BR、水平线标记符HR、标题标记符Hn、用于设置段落对齐的align属性、DIV标记符以及CENTER标记符。
2.1.1 段落标记符P和换行标记符BR
分段标记符
分段标记符用于将文档划分为段落,标记为<P></P>,其中结束标记符通常可省略。
换行标记符
换行标记符用于在文档中强制断行,标记为一个单独的<BR>。
2.1.2 水平线标记符HR
在HTML中除了可以用P标记划分落,还可以用添加水平线的方法分隔文档的不同部分。
水平线的标记符为<HR>,它包括以下属性:
SIZE 属性用来改变水平线的粗细程度
WIDTH 属性用来更改水平线的长度
NOSHADE 属性用来使水平线以实线显示
COLOR 属性用来设置水平线的颜色
ALIGN 属性用来设置水平线的对齐方式
其中:COLOR 属性在 Microsoft Internet Explorer 3 及更高版本中,通过在<HR>中设置 COLOR 属性可以控制水平线的颜色。
2.1.3 标题标记符Hn
在HTML中,用户可以通过Hn标记符来标识文档中的标题和副标题,其中:n是1-6的数字;<H1>表示最大的标题,<H6>表示最小的标题。使用标题样式时,必须使用结束标记符。
2.1.4 段落对齐
在HTML中,一般使用标记符的align属性来设置段落的对齐方式。
2.1.4.1 align属性
ALIGN 属性用于设置段落的对齐格式,其值包括:
RIGHT(右对齐)
LEFT(左对齐)
CENTER(居中对齐)
JUSTIFY(两端对齐)
ALIGN 属性可应用于多种标记符,最典型的是应用于 DIV、P、Hn(标题标记符)、HR 等标记符。
2.1.4.2 DIV标记符CENTER标记符
DIV 标记符
DIV 标记符用于为文档分节,以便为文档的不同部分应用不同的段落格式,其标记为<DIV></DIV>。位于 DIV 标记符中的多段文本将被认为是一个节,可为它们设置一致的对齐格式。
SPAN 标记符
SPAN标记符的功能及用法与DIV相似,但通常用于标记一行内的某些字符。
CENTER 标记符
如果要将文档内容居中,还可使用 CENTER 标记符,方法为:将需居中的内容置于<CENTER>和</CENTER>之间。
2.2 控制文本的显示效果
2.2.1 字体控制标记符FONT
FONT标记符用于控制字符的样式,包括开始标记符<FONT>和结束标记符</FONT>,FONT标记符具有3个常用的属性:
size 属性
字号属性的值可以从 1 到 7,3 是默认值,字号越大显示的字符就越大。该属性值也可以用 +n 或 -n 来作为相对值指定。
color 属性
字体标记符的 COLOR 属性可用来控制文字的颜色,使用方法与正文标记符<BODY>中使用的 BGCOLOR 属性相同。但要注意一般不能将color的属性值与bgcolor的属性值设置为相同。
face 属性
FACE 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称(用逗号隔开)。
2.2.2 用物理字符样式
所谓物理字符样式,是指标记符本身就说明了所修饰文字的效果的标记符。常用的物理标记符有:
标记符 功能 标记符 功能
<B></B> 粗体 <STRIKE></STRIKE> 删除线
<BIG></BIG> 大字体 <SUB></SUB> 上标
<I></I> 斜体 <SUP></SUP> 下标
<S></S> 删除线 <TT></TT> 等宽
<SMALL></SMALL> 小字体 <U></U> 下划线
2.2.3 逻辑字符样式
所谓逻辑字符样式是指标记符本身从某种程度上反映了被修饰对象所表示的含义。例如:ADDRESS标记符用以修饰某个地址。常用逻辑字符样式如下表:
标记 功能
<ADDRESS></ADDRESS> 用于修饰地址
<CITE></CITE> 用于说明文本属于引用
<CODE></CODE> 用于说明程序代码
<DFN></DFN> 用于表示定义了术语
<EM></EM> 用于强调某些字词
<KBD></KBD> 用于说明用户的键盘输入
<SAMP></SAMP> 用于表示文本样本
<STRONG><STRONG> 用于强调某些字词
<VAR></VAR> 用于表示变量
2.2.4 滚动文字效果
滚动文字是用于IE的一种常用网页效果,它使位于<MARQUEE>和</MARQUEE>标记符之间的内容可以以滚动方式显示。
在MARQUEE标记符中常用的属性如下:
width和height 这两个属性定义了字符滚动区域的宽度和高度。可以用像素数和百分比来表示。
align 指定了滚动字符如何于周围对象对齐。
behavior 定义了字符如何滚动。
bgcolor 定义了滚动字符区域的背景。
direction 定义了字符滚动的方向。
hspace和vspace 定义了滚动字符四周水平和垂直方向上的间隙。
loop 指定滚动重复次数
scrollamount 指定文本滚动步长的像素数。
scrolldelay 指定两次滚动间的毫秒延时数。
2.3 列表格式
2.3.1 有序列表
有序列表(Ordered list)也称数字式列表,它是一种在表的各项前显示有数字或字母的缩排列表。
定义有序列表需要使用有序列表的方法格式如下:
<ol [type=x][start=n]>
<li [type=x][value=n]>列表项1
<li [type=x][value=n]>列表项2
. . .
</ol>
其中:type和start分别用来设置数字序列样式和数字序列的起始值。n为任意整数;x的取值见下表:
值 含义
1 阿拉伯数字,默认值
A 大写字母
a 小写字母
I 大写罗马字母
i 小写罗马字母
2.3.2 无序列表
无序列表(Unordered list)也称强调式列表,它是一种在表的各项前显示有特殊项目符号的缩排列表。
<ul [type=x]>
<li [type=x]>列表项1
<li [type=x]>列表项2
. . .
</ul>
其中:type用来控制列表项前特殊符号的显示。x的取值如下表:
值 含义
disc 实心圆
circle 空心圆
square 实心或空方块,取决于浏览器
注意:在IE中,type的值是区分大小写的。
2.3.3 定义列表
定义列表用于定义术语,它是一种在表的各项前没有任何数字和符号的缩排列表。语法格式如下:
<DL>
<DT>术语1[</DT>]
<DD>说明1[</DD>]
<DT>术语2[</DT>]
<DD>说明2[</DD>]
. . .
</DL>
2.4 格式的嵌套中的问题
格式嵌套的问题,也就是要考虑当不同的格式设置作用于同一段内容时HTML将如何处理,通常的原则是:
如果嵌套的格式是相容的,则取格式叠加的效果
如果嵌套的格式是冲突的,则取离被修饰内容最近的样式符的修饰效果
--------------------------------------------------------------------------------
第 3 章 图像与超链接
--------------------------------------------------------------------------------
3.1 Web页图像基础
3.1.1 位图与矢量图
位图图形由排列成网格的称为像素的点组成,如果把图像放大到一点程度会看到像马赛克那样拼合在一起形成的图像。
矢量图形使用称为矢量的线条和曲线描述图像,它是用数学信息来描述图像的。
3.1.2 Web页图像格式
虽然有很多计算机图像格式,但由于受网络带宽和浏览器的限制,在Web上常用的图像格式有以下三种:GIF、JPEG和PNG,它们都是标准的位图格式。
3.1.2.1 GIF格式
GIF格式(Graphic Interchange Format,图形交换格式)采用图像的无损压缩处理,是目前在Web上应用最广泛的图像格式之一。GIF格式具有以下特点:
无损压缩
最多 256 色
能够使用透明色
交错式 Gif(interlaced gif)
动画 Gif
3.1.2.2 JPEG格式
JPEG格式(Joint PhotoGraphics Exper,联合图形专家组图片格式)使用有损压缩来减小图片文件的大小,因此用户将看到随着文件的减小,图片的质量也降低了。JPEG格式具有以下特点:
有损压缩
没有颜色限制
可以控制压缩比
不支持透明色
不支持动画
3.1.2.3 PNG格式
PNG格式(Portable Networks Graphics,可移植网络图形格式)是近年来新出现的一种图像格式,它适于任何类型,任何颜色深度的图片。该格式采用无损压缩来减小图片文件的大小。PNG格式具有以下特点:
无损压缩
没有颜色限制
支持透明色,且透明度可调(0%-100%)
3.1.3 使用网页图像的要点
在网页上使用图片,通常应注意以下三点:
图像文件的大小
网页中图片的数量和质量
合理的使用动画
3.2 图像处理的基本操作(略)
3.3 图像标记符IMG
3.3.1 插入图像
在HTML中,使用IMG标记符可以在网页中插入图像,它有两个基本属性:
src 表示要插入图像文件的URL
alt 表示图像的简单文本说明
3.3.2 设置图像属性
3.3.2.1 指定图像的宽和高
IMG标记符中的width和height属性可以指定图像的宽度和高度,其单位可以是像素,也可以是百分数,如果用百分数,表示图像占当前浏览器窗口大小的比例。
3.3.2.2 图像的边框
使用IMG标记符的border属性,可以给图像添加边框效果,边框的取值是像素数。
3.3.2.3 设置图像周围的空白
在IMG标记符内使用属性hspace和vspace设置图像周围的空白,其中hspace表示水平方向的空白,vspace表示垂直方向的空白,它们的取值都是像素。
3.3.2.4 图像的对齐
(1) 图像在页面中的对齐
设置图像在页面中的对齐,可以使用DIV或P标记符将IMG标记符括起开,然后使用DIV或P标记符的align属性。
(2) 图像与周围内容的垂直对齐
使用IMG标记符的align属性,可以控制图像与周围内容的垂直对齐。此时,align属性的值可以是:
top 表示图像的顶部与周围内容的顶部对齐
middle 表示图像的中央与周围内容对齐
bottom 表示图像的底部与周围内容的底部对齐,此值为默认值
(3) 图文混排时的图像对齐
如果要在图像的左、右一环绕文本,也是使用IMG标记符的align属性,此时的align的取值是:
left 表示图像居左,文本在图像的右侧
right 表示图像居右,文本在图像的左侧
3.4 创建超链接
3.4.1 相对地址与绝对地址
3.4.1.1 什么是URL
URL(Universal Resource Locator,统一资源定位器)是表示Web上资源的一种方法,通常可以理解为资源的地址,一个URL,通常包括三部分:一个协议代码、一个主机地址,以及资源在主机上的路径和文件名。
3.4.1.2 绝对URL与相对URL
(1) 绝对URL
绝对URL是指Internet上资源的完整地址,其形式通常如下:
协议://主机名[/[路径/]资源文件名]
例如:
http://www.aust.edu.cn
ftp://ftp.aust.edu.cn/pub/j2sdk.zip
(2) 相对URL
相对URL是指Internet上资源相对于当前页面的地址,它包含从当前页面指向目标页面的路径。
当使用相对URL时,可以使用与DOS文件目录类似的特殊符号:点(.)和双点(..),分别表示当前目录和上一级目录。
相对URL本身并不能唯一资源,但浏览器会根据当前页面的绝对URL正确理解相对URL。
3.4.2 页面链接
创建超链接使用A标记符,它的最基本属性是href用于指定链接的目标。其语法格式如下:
<a href=目标对象URL>超链接</a>
其中:在<a>与</a>之间可以用任何可单击的对象作为超链接的源,例如:文字或图像。
如果href属性指定的文件格式是浏览器所能识别的格式,那么单击超链接时将会直接显示其内容,若浏览器不能识别,那么那么浏览器将下载所链接的对象。
3.4.3 锚点链接
当页面较长时,就需要在页面内部进行跳转,要实现这一功能,首先就为页面中需要跳转到的位置设立标志并命名,即建立“锚点”。这通过A标记符的name属性来实现,语法格式如下:
<a name=标志名>[...]</a>
对于锚点的链接,就将href的值指定为符号#后标志名(锚点名)。如果将href的值指定为一个单独的#号,则表示空链接,不做任何跳转。
3.4.4 电子邮件链接
当浏览网页的用户单击了电子邮件的超链接后,系统将自动启动邮件客户程序,并将邮件地址填写到“收件人”栏中,用户可能编辑并发该邮件。电子邮件超链接的格式如下:
<a href="mailto:收件人邮箱">联系</a>
3.5 使用图像映射
3.5.1 什么是图像映射
所谓图像映射是指在一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同的区域时便可以跳转到相应的目标页面。
3.5.2 创建图像映射
3.5.2.1 定义映射区域
定义映射区域使用MAP标记符,在<MAP>和</MAP>之间添加映射区域。添加映射区域使用AREA标记符。该标记符具有三个基本属性:
href 标识出目标的URL
shape 说明映射区域的形状。取值可是:
rect 矩形
circle 圆形
poly 多边形
default 整个图像区域
coords 用于标识映射区域的边界。
3.5.2.1 对映射区域进行引用
标记了映射区域之后,就可以通过在IMG标记符中使用usermap属性来引用相应的映射信息。
一个完整的图像映射语法如下:
<map name="mymap">
<area href=URL1 shape=rect coords="x1,y1,x2,y2">
<area href=URL2 shape=circle coords="x,y,r">
<area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
</map>
<img src=image_URL usemap=#mymap>
注意:map标记符中,name属性的取值必须与img标记符中,usemap属性的取值相同,只是usemap属性的值前面多了一个#
--------------------------------------------------------------------------------
第 4 章 表格与框架
--------------------------------------------------------------------------------
4.1 创建表格
4.1.1 表格的基本构成
表格由行和列组成,行列交叉构成了单元格,对于某些表格来说,还有用于说明表格用途的标题。
在HTML中创建一个普通的表格应包括以下标记符:
TABLE 用于定义整个表格,表格内的所有内容都应位于<TABLE>和</TABLE>之间。
CAPTION 用于定义表格的标题,表格的标题应置于<CAPTION>和</CAPTION>之间,该标记的align属性说明标题的位置,其取值如下:
top 标题置于表格上部中央(默认)
bottom 标题置于表格下部中央
left 标题置于表格上部的左侧
right 标题置于表格上部右侧
TR(table row)用于定义表格的行,对于每一个表格行,都对应一个TR标记符。
TD(table data) 表格中和每一个单元格都对应于一个TD标记符。
TH(table heading)用来定义表格行或列的标题所在的单元格。
4.1.2 合并单元格
如果在网页中需要创建不规则的表格,可以通过合并单元格来实现。
行合并
在<TD>或<TH>标记符内使用rowspan属性可以进行行合并,rowspan的取值表示垂直方向上合并的行数。
列合并
在<TD>或<TH>标记符内使用colspan属性可以进行列合并,colspan的取值表示水平方向上合并的列数。
4.2 表格的属性设置
4.2.1 边框与分隔线
4.2.1.1 frame属性
frame属性用于控制是否显示边框,以及如何显示边框,该属性的取值可以是:
void 表示无边框(默认值)
above 表示仅有顶部边框
below 表示仅有底部边框
hsides 表示仅有顶部和底部边框
vsides 表示仅有左、右边框
lhs 表示仅有左边框
rhs 表示仅有右边框
box 表示包含全部四个边框
border 表示包含全部四个边框
4.2.1.2 rules属性
rules属性用于控制是否显示以及如何显示单元格之间的分隔线,取值可以是以下几种:
none 表示无分隔线(默认值)
rows 表示仅有行分隔线
cols 表示仅有列分隔线
all 表示有所有分隔线
groups 表示仅在行级和列组有分隔线(目前所有的浏览器都尚不支持)
4.2.1.3 border属性
border属性用于设置边框的宽度,其值为像素数。如果设置border=“0”,则意味着frame=“void”,rules=“none”(除非另外设置);如果设置border为其它值(如何使用不指定值的单独一个border,相当于border=“1”),则意味着frame=“border”,rules=“all”(除非另外设置)。
4.2.2 控制单元格空白
在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白,使用cellpadding属性可以控制表格分隔线和单元格中数据之间的距离,这两个属性的取值通常都采用像素数。
4.2.3 表格的对齐
表格的对齐包括表格在页面中的对齐和表格数据在单元格中的对齐。
4.2.3.1 表格的页面对齐
表格在页面中的对齐,可以直接在TABLE标记符中使用align属性进行设置。另外,也可以使用DIV标记的align属性设置表格的对齐,方法是将TABLE标记符嵌套在<DIV align="...">和</DIV>之间。
如果不使用TABLE标记符的align属性进行设置,则跟在表格后的文本自动显示在表格的下一行,不会形成环绕的效果。如果使用TABLE的align属性进行设置,并且使用的是lefg或right值,则跟在表格后面的文本会仅次于表格的右边或左边,从而形成文本与表格的环绕效果。
4.2.3.2 表格内容的水平对齐
设置表格内容的水平对齐方法是:在标记符<TR>、<TH>、<TD>内使用align属性进行设置,常的取值可以是:
center 表示单元格内容居中对齐
left 表示单元格内容左对齐(默认值)
right 表示单元格内容右对齐
justify 表示内容两端对齐(有些浏览器不支持,如:IE)
4.2.3.3 表格内容的垂直对齐
设置表格内容的垂直对齐方法是:在标记符<TR>、<TH>、<TD>内使用valign属性进行设置,常的取值可以是:
top 表示数据靠单元格顶部
bottom 表示数据靠单元格底部
middle 表示数据在单元格垂直方向上居中(默认值)
4.3 使用表格设计网页布局
本节介绍表格在网页中另一个重要的应用——设计页面布局,其技术主要包括:控制表格和单元格的大小、设置表格和单元格的背景、使用嵌套表格等。
4.3.1 控制表格和单元格的大小
由于表格能将网页划分为任意大小的矩形区域,所以表格在网页中更多地是用作排版工具。通过标记符的width和height属性设置表格和单元格大小,这两个属性的取值可以是像素数,也可以是百分比。
4.3.2 设置表格和单元格的背景
在TABLE、TR、TH或TD标记符内使用bgcolor属性设置背景颜色,在TABLE、TH或TD标记符内使用background属性设置背景图案。
4.3.3 使用嵌套表格
大设置页面布局时,常用的一种方法是将表格嵌套,其方法是:将表格作为一个单元格的内容,放置在<TD>...</TD>之间即可。
4.4 创建框架
4.4.1 什么是框架
框架是将浏览器窗口划分为不同的部分,每部分装载不同的网页,从而获得在一个浏览器窗口同时显示多个页面的特殊效果。此外,通过为超链接指定目标框架,可以为框架之间建立内容之间的联系,可以实现页面导航的功能。
4.4.2 指定框架结构
要对页面进行划分,首先要定义框架集页,在框架集页中不包含任何可显示的内容,而只是包含如何组织各个框架的信息和框架中的初始页面的URL。
在HTML中框架集通过<FRAMESET>...</FRAMESET>和<FRAME>标记符来定义。各个框架的大小由FRAMESET标记符的rows、cols设定,取值可以是像素数、百分比或“*”号。各个框架中初始页的URL和各个框架的名称由FRAME标记符的src属性和name来设定。其语法格式如下:
<FRAMESET [rows|cols]="nn|nn%,...,*">
<FRAME name=名称1 src=页面URL1>
<FRAME name=名称2 src=页面URL2>
......
<FRAME name=名称n src=页面URLn>
</FRAMESET>
注意:在框架集页中不能有BODY标记符。
4.4.3 框架的嵌套
网页中需要同时包含横向和纵向的框架,就需要使用框架嵌套技术,即在要使用FRAME标记符的地方,再使用一个FRAMESET标记符定义一个框架集,常用语法如下:
<FRAMESET [rows|cols]="nn|nn%,*">
<FRAME name=名称1 src=页面URL1>
<FRAMESET [cols|rows]="nn|nn%,*">
<FRAME name=名称2 src=页面URL2>
<FRAME name=名称3 src=页面URL3>
</FRAMESET>
</FRAMESET>
4.5 控制框架的显示效果
4.5.1 边框效果
4.5.1.1 框架边框的设置
使用FRAME标记符的frameborder属性可以控制是否显示边框,其取值是:
1 表示生成3D边框(默认值)
0 表示不显示边框
注意:只有将相邻框架的边框都设置为0,才能不显示边框。
4.5.1.2 框架流动条的设置
使用FRAME标记符的scrolling属性可以控制是否在框架内加入流动条,其取值如下:
yes 表示强制添加滚动条
no 不添加滚动条
auto 当需要时自动添加滚动条(默认值)
4.5.1.3 设置边框的不可移动
如果要固定页面中各个框架的大小及位置,可以在FRAME标记符中设置noresize属性,其语法如下:
<FRAME noresize>
4.5.2 设置框架空白
FRAME标记符的marginwidth属性可以控制框架内容和框架边框在水平方向上的空白;marginheight属性可以控制框架内容和框架边框在垂直方向上的空白。这两个属性的取值都是像素数。
4.6 使用框架设计网页布局
4.6.1 指定超链接的目标框架
由于每一个框架本身是一个小窗口,控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性。常用格式如下:
<A href=目标URL target=框架名>...</A>
target属性的值可以是已定义的框架名,也可以是以下特殊框架:
_top 表示目标页面将占用整个浏览器窗口。
_self 表示在当前超链接所在的框架中显示目标页面。
_blank 表示在一个新的浏览器窗口中显示页面。
_parent 表示将目标页面装入当前框架的父框架中,但是有的浏览器将其解释为_top,如:IE。
4.6.2 使用页内框架
页内框架是在页面中设置小窗口,在窗口中显示另一页面的内容。
在HTML中使用IFRAME标记符来设置页内框架,对于包含在<IFRAME>和</IFRAME>标记符之间的内容,只有不支持页内框架浏览器才显示,常用的格式如下:
<IFRAME src=URL width=nn height=nn>
不支持页内框架游览器显示的内容
</IFRAME>
IFRAME标记符包括以下属性,可以控制页内框架的显示:
src 指定页内框架内要显示页面的URL
width 设置页内框架的宽,取值是像素数或百分比。
height 设置页内框架的高,取值是像素数或百分比。
align=top|middle|bottom|left|right指定页内框架对齐方式。
frameborder=1|0 指定是否显示页内框架的边框。
name 指定页内框架的名称。
scrolling=yes|no|auto 指定页内框架是否有滚动条
marginwidth 指定页内框架中的内容在水平方向上与边框间的间隔。
marginheight 指定页内框架中的内容在垂直方向上与边框间的间隔。
--------------------------------------------------------------------------------
第 5 章 表单与特殊对象
--------------------------------------------------------------------------------
5.1 创建表单
5.1.1 什么是表单
表单是用于实现网页浏览者与服务器(或者说网页所有者)之间交互的一种页面元素,在WWW上它被广泛用于各种信息的搜集和反馈。
5.1.2 表单控件的类型
表单通常由两类元素构成:一是普通的页面元素;二是用于接收信息的特定页面元素,也就是所谓的表单控件。
控件是表单中用于接收用户输入或处理的元素,典型的控件有:
文本框
密码框
多行文本框(文本区域)
复选框
单选框
选项(下拉)菜单
按钮
提交按钮
重置按钮
普通按钮
文件选择框
隐藏控件
对象控件
对于每个控件,都有一个名称(由控件的name属性指定),该名称的有效范围是所在的表单。对于每个控件,都有一个初始值和一个当前值,这两个值都是字符串。控件的初始值是预先指定的,而当前值则根据用户的交互操作确定。
5.1.3 FORM 标记符
FORM标记符的基本语法是:
<FORM action=服务器端程序的URL method=get|post [enctype=编码类型]>
<!-- 此处是各种表单控件 -->
</FORM>
FORM标记符作为包含控件的容器,其内部不能再嵌入FORM标记符(即表单不能嵌套)。
5.2 创建表单控件
5.2.1 文本框与口令(密码)框
创建单行文本框的基本语法是:
<INPUT type=text name=“控件名” value=“初始值” size=nn maxlength=mm>
其中:type属性用于设置控件的类型,name属性用于指定控件的名称,value用于接收用户填写的数据,name与value属性都是后台程序处理表单数据时需要使用的,size属设置文本框的宽度,maxlength属性设置文本框的最大输入长度。
创建口令(密码)框的基本语法是:
<INPUT type=“password” name
=“控件名” value=“” size=nn>
除type属性说明该控件是一个口令框(输入的字符以*号回显在输入框中)外,其它属性都同文本的对应属性。
5.2.2 复选框与单选框
复选框和单选框都是允许用户进行选择的控件,常用于选择多种选项或选择互斥的选项。
创建复选框的语法如下:
<INPUT type="checkbox" name=控件名 value=控件值 [checked]>选项文本
创建单选框的语法如下:
<INPUT type="radio" name=控件名 value=控件值 [checked]>选项文本
5.2.3 文件选择框
当需要用户在表单中选择文件,然后将选中文件的内容发送到服务器,则可以使用“文件选择框”控件。其语法是:
提示文本:<INPUT type="file"
name=控件名 size=nn>
5.2.4 按钮
当用户完成了表单的填写,可是单击表单中的提交按钮,将数据提交给服务器;如果想重新填写,可单击重置按钮,使用表单恢复到填写前的状态;另外,还可以在表单中使用自定义按钮,以便响应特定的事件。
创建提交按钮的语法是:
<INPUT type=submit name=... value=...>
创建重置按钮的语法是:
<INPUT type=reset name=... value=...>
创建自定义按钮的语法是:
<INPUT type=button name=... value=...>
5.2.5 多行文本框
创建多行文本行的语法格式如下:
<TEXTAREA name=控件名 rows=xx cols=yy>
[默认文本]
</TEXTAREA>
5.2.6 选项(下拉)菜单
可以使用选项菜单来让浏览者进行单项或多项选择。创建选项菜单的语法如下:
<SELECT name=...
<OPTION [label=..] value=.. [selected]>选项1[</OPTION>]
<OPTION [label=..] value=.. [selected]>选项2
...
</SELECT>
5.3 设置控件的标签
为了使浏览者能更方便地选择或定位输入点,在网页设计时应该使浏览者在单击与某个控件相关的文本时,即选中该控件。实现此功能是通过LABLE标记符实现的。其语法格式如下:
<LABEL for=“control_ID”>标签文本</LABEL>
<INPUT id=“control_ID”>
5.4 网页中的特殊对象
随着网络宽的不断加大,在网页中使用多媒体对象越来越普遍,如Flash动画等。
5.4.1 OBJECT标记符和PARAM标记符
如果要将多媒体对象嵌入到网页中,应使用OBJECT标记符,它包括以下常用属性:
classid=URL 用于指定对象实现的位置
codebase=URL 用于指定由classid、data和archive属性指定相对路径的基准路径。
codetype=content-type 指定下载由classid所指定的对象时使用的数据类型。
data=URL 指定对象数据的位置
type=content-type 指定对象数据的内容类型。
archive=URL列表 此属性指定了一个由空格分隔的存档文件列表这此存档文件中可能包含由classid和data属性所指定的资源。
declare 将当前的OBJECT定义成为一个声明,而在后面引用此声明的OBJECT定义中实现该对象。
standby=text 用于指定装载对象数据时显示的简短说明。
align、border、width、height、hspace、vspace等 这些属性与在IMG标记符中使用方法相同。
在插入对象的同时,还需要使用PARAM标记符指定对象相关的参数。该标记符的常用属性如下:
name 定义了一个运行时参数的名称,此名称必须由所插入的对象识别。
value 定义了一个运行时参数的确值。
valuetype 指定了value属性的类型,可能的取值为:
data 表示value属性指定的值作为一个字符串传递给对象,默认值。
ref 表示value属性指定的值是和个URL
object 表示value属性指定的值是一个指向同一文档中一个OBJECT声明的标识符,该标识符的值必须是声明的OBJECT标记的id属性值。
type=content-type 当valuetype属性的值为ref时,此属性指定了URL所代表资源的内容类型。
--------------------------------------------------------------------------------
第 6 章 CSS技术
--------------------------------------------------------------------------------
6.1 CSS入门
6.1.1 什么是CSS
CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的设置网页格式。
6.1.2 CSS的属性单位
6.1.2.1 长度单位
在CSS中用于描述长度的单位包括:
cm 厘米
mm 毫米
em 当前字体中m字母的宽度
ex 当前字体中x字母的高度
in 英寸
pc 1pc=12点
pt 点,1pt=1/72英寸
px 像素
6.1.2.2 百分比单位
在CSS中除了可以使用绝对数来指定单位(如上面所介绍的),还可以用相对数来指定单位。例如:
P{line-height:150%}
表示该段行高是标准行高的1.5倍。
6.1.2.3 颜色
层叠样式表允许网页设计者使用以下方式中的一种指定颜色:
颜色名 直接使用标准颜色名称
#RRGGBB 使用6位十六进制数表示颜色
#RGB 使用3位十六进制数表示颜色,它是#RRGGBB方式的快捷方式。例如:#00FFEE可以表示为#0FE。
grb(rrr,ggg,bbb) 使用十进制数表示颜色。
grb(rrr%,ggg%,bbb%)使用百分数表示颜色。
6.2 CSS样式定义
样式表项的组成如下:
selector{property1:value1;property2:value2;......}
其中selector表示需要应用样式的内容,property表示由CSS标准定义的样式属性,value表示样式属性的值。
Selector 类型:HTML 标记符、用户定义的 class 类样式、自定义的 ID、虚类 等。
6.2.1 HTML标记符selector
HTML标记符是最典型的selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。例如:
H1{text-align:center;font-family:楷体_gb2312}
若将相同的样式应用于不同的selector,可以采用编组的方法简化样式定义。例如:
H1 {color:#ff0000}
H2 {color:#ff0000}
H3 {color:#ff0000}
可以简化为:
H1,H2,H3 {color:#ff0000}
6.2.2 具有上下文关系的HTML标记符selector
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将selector指定为具有上下文关系的HTML标记符。例如:要使位于P标记符内的CODE标记符内的B元素具有红色属性,则应使用如下格式:
P CODE B {color:red}
6.2.3 用户定义的类 selector
可以使用类(class)来为单一HTML标记符创建多个样式。其语法格式如下:
selector.classname{property:value;...}
例如:H1.rr {color:red}
然后在网页中需要处引用,所下所示:
<H1 class="rr">此标题为红色</H1>
如果要定义应用于所有标记符的类,可以直接用句点后跟类名即可。其语法格式如下:
.classname{property:value;...}
例如:.rr{color:red} , 然后在网页中需要处引用,所下所示:
<p class="rr">本段落文字为红色</P>
<H1 class="rr">本标题为红色</H1>
6.2.4 用户定义ID selector
要将一个ID样式包括在样式定义中,应以一个井号“#”作为ID名称的前缀,其语法格式如下:
#IDname{property:value;...}
定义了ID样式后,在引用该样式的标记符内使用id属性。例如:
#rr {color:red}
<P id="rr">本段落文字为红色</P>
<H1 id="rr">本标题为红色</H1>
注意:使用.classname和使用#IDname这两种方式在效果上没有区别,但最好只使用其中之一,以免造成混淆。
6.2.5 虚类 selector
对于A标记符,可以用虚类的方式设置不同类型超链接的显示方式。所谓不同类型超链接,是指访问过的、未访问过的、激活的以及鼠标指针悬停于其上的4种状态的超链接。其虚类的selector如下:
A:link或:link 未被访问过的超链接
A:visited或:visited 已被访问过的超链接
A:active或:active 当超链接处于选中状态
A:hover或:hover 当鼠标指针移动到超链接上
6.3 在网页中使用CSS
6.3.1 在标记符中直接嵌套样式信息
使用style属性可以在HTML标记符中直接嵌入样式定义。
<标记符 style="property1:value1;...">
例如:
<p style="font-size:14pt;color:red">
仅位于此标记符内的文本受样式的影响
</p>
6.3.2 在STYLE标记符中定义样式信息
CSS应用于网页的最常用的方式是在HEAD标记符内使用STYLE标记符,然后在STYLE标记符中定义样式。语法格式通常如下:
<head>
. . . . . .
<style>
[<!--]
selector1{property1:value1;...}
selector2{property1:value1;...}
. . . . . .
selectorN{property1:value1;...}
[-->]
</style>
</head>
6.3.3 链接外部样式表中的样式信息
如果要在多个网页中使用相同的样式,最好的办法是将网页中要使用的样式,单独放在一个文件中定义,然后通过链接的方式引用其中的样式。
链接引用外部样式表的方法为:在HEAD标记符内使用LINK标记符,通过指定相应属性链接到外部样式表。LINK标记符的用法如下:
<LINK rel="stylesheet" type="text/css" href=样式表文件的URL>
其中:rel属性规定了被链接文件的关系,在链接样式表文件(.css文件)的情况下,取值永远是“stylesheet”;type属性规定了链接文件的MIME类型,它的值永远是“text/css”;href属性指定了要链接的样式表文件的URL。
6.3.4 样式的优先级
如果有多个样式同时修饰一个对象,样式如果冲突,则采用高优先级样式;如果没有冲突,则采用叠加的样式效果。
样式的优先级遵循“就近优先”的原则,也就是说,距离所修饰对象越近的样式,其优先级越高。
6.4 CSS属性
6.4.1 字体与文本属性
6.4.1.1 字体属性
CSS中字体属性包括:
font-family 属性用于确定要使用的字体列表,取值可以是字体名称,也可以是字体族名称,值之间用逗号分隔。
font-size 用于控制字体的大小。它的取值分为4种类型:
绝对大小,可能的取值有:
xx-small
x-small
small
medium
large
x-large
xx-large
相对大小,可能的取值为:
smaller 比上一级字体小一号
larger 比上一级字体大一号
使用长度值直接指定。如:P{font-size:12px}
使用百分比,如:H1{font-size:70%}表示以H1标准字体的70%显示。
font-style 用于指定元素显示的字形。取值为:
normal 普通字体(默认值)
italic 表示斜体字型
oblique 表示斜体字型
font-variant 指定了浏览器显示指定元素的字体变体。该属性有两个值:
normal 默认值
small-caps 表示小体大写,即文本中的小写字母显示为大写,不过尺寸要比标准的大写字母要小一些。
font-weight 定义了字体的粗细程度。
font 可一次性设置前面介绍的种种字体属性,属性之间以空格分隔。
6.4.1.2 文本属性
文本属性用于控制文本段落格式。
letter-spacing 用于设置字符间距
line-height 用于设置行间距
text-align 设置对齐方式
text-decoration 对特定选项的文本进行修饰,它的取值可以是:
none 表示不加任何修饰(默认值)
underline 加下划线
overline 加上划线
line-through 加删除线
blink 表示添加闪烁效果
text-indent 设置首行缩进
text-transform 用于转换文本,取值为:
none 默认值
capitaliae 所选文本中每个单词的首字母大写显示;
uppercase 所有字母都以大写显示
lowercase 所有字母都以小显示
6.4.2 颜色与背景属性
color 用于控制文本的颜色
background-color 用于设置HTML元素背景颜色。
background-image 用于设置HTML元素背景图案。
background-attachment 控制背景图案是否随内容一起滚动,取值为:
scroll 表示背景随内容一起滚动(默认值)
fixed 表示背景静止
bachground-position 用于指定背景图案与相对关联区域左上角的位置。
background-repeat 设置背景图案是否重复显示,以及如何重复。取值可以是:
repeat
repeat-x
repeat-y
no-repeat
background 与font类似,可以同时设置上述属性
6.4.3 布局属性
6.4.3.1 页面元素周围的空白
在任何一个HTML元素的周围,都包括边框、边界和填充这三种空白。最接近元素内容的是填充,接下一来是边框,最外围是边界。CSS的margin、border和background属性分别用于设置以上三个区域。
6.4.3.2 边框属性
CSS边框属性包括:
border
border-bottom
border-bottom-color
border-bottom-style
border-botton-width
border-color
border-left
border-left-color
border-lefy-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
6.4.3.3 边界属性
CSS边界属性包括margin、margin-bottom、margin-left、margin-right以及margin-top。
6.4.3.4 填充属性
CSS填充属性包括padding、padding-left、padding-right、padding-top以及padding-bottom。
6.4.3.5 浮动属性
CSS浮动属性包括:
float 可以将元素的内容浮动到页面的边缘,其取值为:
none
left
right
clear 设置了元素是否允许浮动元素在它旁边,取值可以是:
none
left
right
both
6.4.4 定位和显示属性
6.4.4.1 定位属性和宽高属性
定位属性包括:
position 用来规定元素在页面中的位置,它的取值可以是:
static 默认值
relative
absolute
top
bottom
left
right
z-index
width和height属性可以控制元素的宽度和高度,此时position属性必须指定为absolute。它们的取值可以是长度值,也可以是百分比。
6.4.4.2 显示属性
在CSS中,有两个属性可以控制元素的显示和隐藏。
display 用于确定一个元素是否应绘制在页面上,它的取值有多个,但在一般浏览器中,只有一个none可以使用。当使用属性隐藏元素时,不但元素不可见,而且元素不占用任何空间。
visibility 用于控制元素的可见性,取值包括:
visible 可见
hidden 隐藏
inherit 继承(默认值)
与display不同之处在于当隐藏元素时,仍然为元素保留原有的显示空间。
6.4.5 列表属性
列表属性用于设置网页中列表的格式,CSS中的列表属性包括:
list-style-image 指定图片作为列表项目符号,取值为:
none 默认值
url(imageURL)
list-style-position 设置列表元素标记的位置,取值可以是:
inside
outside
list-style-type 用来设置项目符号和编号的样式,取值如下:
disc 实心黑园点
circle 空心园圈
square 方形黑块
decimal 十进制数
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写字母
upper-alpha 大写字母
none 无
list-style 用于一次性设置上述属性
6.4.6 鼠标属性
鼠标属性通过cursor属性来设置在对象上移动的鼠标指针的形状,取值如下:
auto 浏览器基于当前文本决定显示哪种指针
crosshair 简单十字形
default 随平台而定的默认指针(通常为箭头)
hand 手形
move 指示某对象被移动的交叉箭头
*-resize 指示边缘被移动的前头(*可以是n、ne、nw、s、se、sw、e以及w,分别代表北、东北、西北、南、东南、西南、东以及西等方向)
text 编辑文本指针(通常为I形)
wait 指示程序正忙,用户需要等待的沙漏图标
help 指示用户可以得到帮助的问号图标
6.5 CSS过滤器效果
过滤器(filter)是CSS的一种扩充,它能够将特定的效果应用于文本容器、图片或其它对象。
6.5.1 过滤器属性列表
过滤器效果是通过filter样式表属性定义的,其格式如下:
filter:过滤器名(参数)
其中参数用于控制特定的过滤效果。各种常用的过滤器效果和相关的说明详见相关教材。
--------------------------------------------------------------------------------
第 7 章 JavaScript与DHTML技术
--------------------------------------------------------------------------------
7.1 使用客户端脚本
7.1.1 使用SCRIPT标记符
7.1.1.1 什么是客户端脚本
脚本(Script)实际上就是一段程序,用来完成某些特殊的功能。脚本程序有可以在服务器端运行的,称为服务器端脚本,例如:PHP、ASP等;也有在浏览器端运行的,称为客户端脚本,例如:JavaScript和VBScript。
7.1.1.2 使用SCRIPT标记符插入脚本
在网页中最常用的一个插入脚本的方法是:把脚本标记符<SCRIPT>...</SCRIPT>置于网页上的HEAD部分或BODY部分,然后在其中加入脚本程序。其语法格式如下:
<SCRIPT language="JavaScript" type="text/javascript">
<!--
在此编写JavaScript代码
//-->
</SCRIPT>
或者:
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT>
<!--
在此编写JavaScript代码
//-->
</SCRIPT>
</HEAD>
7.1.2 直接添加脚本
与直接在标记符内使用style属性指定CSS样式一样,也可以直接在HTML表单的输入元素标记符内添加脚本,以响应输入元素的事件。
例如:
<html>
<head><title>JavaScript 示例</title>
<body>
<form>
<input type=button onClick="javascript:alert('Hello !');" value="OK">
</form>
</body></html>
7.1.3 链接脚本文件
如果同一段脚本可以在若干网页中使用,则可以将脚本放在单独的一个文件里,然后在需要文件的网页中引用。语法格式如下:
<SCRIPT type="text/javascript"
src=脚本文件URL></SCRIPT>
说明:JavaScript文件是纯文本文件,可以用任何文本编辑器进行编辑,然后程序应以.js为扩展名保存。
7.2 JavaScript 简介
7.2.1 JavaScript语言基础
7.2.1.1 JavaScript基本数据类型
JavaScript 有六种数据类型。主要的类型有:
number
string
object
Boolean
null
undefined
JavaScript采用弱数据类型的形式,因而一个数据的变量或常量不必首先作声明,而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型,它是通过在赋值时自动说明其数据类型的。
变量的声明使用关键字 var ,变量名可以是任意长度的字母、数字和下划线组成(“_”),同时变量名第一个字符不能是数字。
注意:JavaScript 是对大小写敏感的,也就是说区分大小写,如变量 count 和变量 Count 是两个不同的变量!
7.2.1.2 JavaScript运算符与表达式
(1)运算符
运算符完成操作的一系列符号,在JavaScript中包括以下运算符:
算术运算符
JavaScript中的算术运算符有单目运算符和双目运算符。
双目运算符:
+(加) 、-(减)、 *(乘)、 /(除)、 %(取模)。
单目运算符:
-(取反)、++(递加1)、--(递减1)。
比较运算符:
比较运算符它的基本操作过程是,首先对它的操作数进行比较,尔后再返回一个true或False值,有8个比较运算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
布尔逻辑运算符:
包括&&(逻辑与)、||(逻辑或)、!(逻辑非)。
位操作运算符
包括|(按位或)、&(按位与)、^(按位异或)、<<(左移)、 >>(右移)、 >>>(右移,零填充)。
字符串运算符:+(字符串的连接操作)
三目操作符
操作数?结果1:结果2
若操作数的结果为真,则表述式的结果为结果1,否则为结果2。
赋值运算符: = 、op=
(2)表达式
在定义完变量后,就可以对它们进行赋值、改变、计算等一系列操作,这一过程通常又叫称一个叫表达式来完成,可以说它是变量、常量、布尔及运算符的集合,因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。
7.2.1.3 JavaScript语句
JavaScript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等,来实现编程的。
(1)条件语句
if语句
基本格式
if(表述式)
语句段1;
......
else
语句段2;
.....
功能:若表达式为true,则执行语句段1;否则执行语句段2。
switch语句
分支语句switch可以根据一个变量的不同取值采取不同的处理方法。 语法如下:
switch (expression)
{
case label1: 语句串1;
case label2: 语句串2;
case label3: 语句串3;
...
default: 语句串3;
}
如果表达式取的值同程序中提供的任何一条语句都不匹配,将执行default 中的语句。
(2)For循环语句
for语句
基本格式
for(初始化;条件;增量){
语句集;
}
功能:实现条件循环,当条件成立时,执行语句集,否则跳出循环体。
while循环
基本格式
while(条件){
语句集;
}
该语句与For语句一样,当条件为真时,重复循环,否则退出循环。
For与while语句都是循环语句,使用For语句在处理有关数字时更易看懂,也较紧凑;而while循环对复杂的语句效果更特别。
do ... while 语句
do while语句是while语句的变体,格式如下:
do{
语句集;
}while(条件);
break语句 结束当前的各种循环,并执行循环的下一条语句。
continue语句 结束当前的循环,并马上开始下一个循环。
with语句
基本语法如下:
with (对象名称){
执行语句
}
作用是这样的:如果你想使用某个对象的许多属性或方法时,只要在with语句的()中写出这个对象的名称,然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。
return语句:用于返回函数调用的值。
for in语句:用于对一个对象的所有属性进行循环,直到每个属性都访问到。
7.2.1.4 JavaScript函数
(1) 定义函数
基本语法:
function 函数名 (参数列表){
函数体;
return 表达式;
}
(2) JavaScript全局函数
JavaScript中包含以下7个全局函数,用于完成一些常用的功能:
escape(character) 返回字符的编码
eval(String) 返回字符串表达式中的值
isFinite( ) 用于确定一个变量是否有界,如果有界则返回true,否则为false。
isNaN( ) 用于确定一个变量是NaN,如果是返回true,否则返回false。
parseFloat(floatstring) 返回实数,若字符串不是以数字开头,则返回NaN。
parseInt(numbestring ,radix) 返回不同进制的数,若字符串不是以数字开头,则返回NaN。
unescape( ) 返回字符串ASCI码,它完成escape( )函数的逆操作。
7.2.2 使用JavaScript对象
7.2.2.1 什么是对象
对象是由属性和方法两个基本的元素的构成的。对象的属性是指对象的背景色,长度,名称等。对象的方法是指对属性所进行的操作,就是一个对象自己所属的函数。
在JavaScript中可以操作的对象通常包括两种类型:浏览器对象和JavaScript内部对象。
7.2.2.2 Array对象
Array对象也就是数组对象,具体对象的产生必须使用new Array()命令,由new Array()产生的数组都是动态数组,也就是数组的大小是不定的。也可以由new Array(arrayLength)来产生一个指定大小的数组,该对象常用的只有一个length属性,表示一个数组中元素的个数。
Array对象的常用方法有:
reverse():将一个数组顺序取反;
sort():按字典顺序对数组元素重新排序
7.2.2.3 Date对象
日期对象属于一个内置对象,只提供了对象结构,可以采用下述方法产生一个具体的对象实例。
Now=new Date();
以当前的系统日期、时间产生一个对象实例。
常用方法如下:
getDate(): 当月日期部分,1~31
getDay():返回该星期的第几天0~6
getMonth(): 返回月份,0~11
getTime(): 返回自1970年1月1日00:00:00以来的毫秒数
getYear(): 在2000年以前,返回后两位,2000年以后返回4位
getHours():返回小时数
getMintes():返回分钟数
getSeconds():返回秒数
setYear();设置年
setDate():设置当月号数
setMonth():设置当月份数
setHours():设置小时数
setMintes():设置分钟数
setSeconds():设置秒数
setTime ():设置毫秒数
7.2.2.4 Math对象
Math对象包含用来进行数学计算的属性和方法,其属性也就是标准的数学常量,其方法则构成了数学函数库。
常用属性
Math.E e 2.71828459045
Math.LN2 ln2 0.69314718056
Math.LN10 ln10 2.30258509299
Math.LOG2E log2e 1.44269504889
Math.LOG10E log10e 0.43429448190
Math.PI 圆周率 3.14159265359
常用方法
floor(num) 返回小于等于num的最大整数
max(n1,n2) 取n1、n2中的最大值
min(n1,n2) 取n1、n2中的最小值
pow(n1,n2) 返回n1的n2次方
random() 产生0-1之间的随机数
sqrt(n) 返回n的平方根
toString() 返回对象的字符串
7.2.3 使用浏览器对象
7.2.3.1 文档对象模型
文档对象模型(DOM):用于表示HTML元素以及WEB浏览器信息的一个模型。一个对象是所有能与脚本交互的某种事物,而对象模型就是所有那些对象组成的总体。是一种为了命名所有那些事物的系统,该命名系统是建立在对象层次的基础上。
7.2.3.2 document对象
窗口内的内容就是document,因此它是最主要的对象之一。文档对象有很多的属性和方法,文档对象的属性大部分可以由HTML标识符定义,但JavaScript提供了动态更改页面属性的方法,如动态更改页面背景色。
(1) document对象的常用属性
bgColor - 页面的背景色;
fgColor - 页面的前景色,即文本的颜色;
linkColor - 超文本链接的颜色
lastModified - 此页面 (HTML 文件) 最后被修改的时间;
forms - 表单 (form) 对象组成的数组,数组中的每一个元素对应于网页中的每一个 <FORM> 标记,数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序;
links - 超文本链接对象组成的数组,数组中的每一个元素对应于网页中的每一个 <A> 标记,数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序;
title - 当前页面的标题
(2)document对象的常用事件
事件(event)在此的含义就是用户与Web页面交互时产生的操作。对于document对象来说,非常有用的事件有:
onClick 当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。
onLoad 当文档载入时,产生该事件。
onUnload 当网页退出时引发onUnload事件。
(3)document对象的常用方法
document对象最常用的方法为write(),表示在文档中写内容。
7.2.3.3 window对象
window对象是最顶级的对象,它是其他对象的父对象。
(1) window对象的常用属性
document 表示窗口中显示的当前文档
history 表示最近访问过的URL列表
location 表示窗口中显示的当前URL
status 表示窗口状态栏中的临时信息
(2) window对象的常用方法
alert() 它是一个弹出对话框,用以提示用户某些注意事项。
confirm() 它是一个消息框,有两个按钮"确认"和"取消",单击确认返回true,单击取消,返回false,利用返回值可以作进一步的工作。
prompt() 这是一个消息框,不过该消息框允许用户输入某种信息。该信息被当作prompt()的结果返回。
open() 该方法打开一个新的浏览器窗口,原窗口不变。新打开的窗口可以定义大小、有无工具栏、有无状态栏、有无地址栏、可否改变尺寸、有无滚动条。
close() 关闭当前浏览的窗口。
blur()从窗口中移走焦点。在很多系统中,该操作把窗口送往后台。
focus()使窗口获得焦点。在很多系统中,该操作把窗口送往前台。
7.2.3.4 Form对象
Form对象封装了<form>标签定义的表单中的相关信息。它的几个数值属性基本是和<form>标签中相对应的,有type、name、action、method、encoding、target等。除了上面和HTML标签相对应的属性外,还有两个属性是和表单内的元素有关的,一个是elements,它是一个数组,数组中的每一个元素都是由<input>定义的一个对象,另一个是length,它是elements数组的元素的个数。
Form对象的方法较少,只有两个:submit()和reset(),submit()方法会触发submit事件。
7.3 DHTML技术
7.3.1 什么是DHTML
DHTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它是建立在原有技术的基础上,可分为三个方面:
HTML
CSS
客户端脚本(如:JavaScript)
7.3.2 DHTML应用示例(略)