PPT
【文档说明】(完整版)计算机网络概论第8章课件.ppt，共(188)页，2.026 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-7205.html
以下为本文档部分文字说明：
计算机网络概论第8章网页设计基础通过本章学习，读者应该掌握以下内容：HTML语言的基础知识级联式样式表（CSS）JavaScript语言的基础知识8.1HTML语言8.1.1HTML语言的结构HTML（
超文本标记语言）是一种描述文档结构的标注语言它使用一些约定的标记对WWW上的各种信息进行标注。HTML的优点是其跨平台性。8.1HTML语言8.1.1HTML语言的结构HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看
起来像是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。8.1HTML语言8.1.1HTML语言的结构从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指
导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结束标记。中间叫元素体。每个元素都有名称和许多可选择的属性。8.1HTML语言下面来看一个HTML文件结构实例，<HTML><HEAD><TITLE>武汉工业学
院</TITLE></HEAD><BODYbgcolor=yellow><P>这是一HTML的测试文件</P></BODY></HTML>HTML文件仅由一个HTML元素组成。即文件以<HTML>开始，以</HTML>结尾，文件其余部分都是H
TML的元素体。而HTML元素的元素体又由头元素<head>…</head>、体元素<body>…</body>和一些注释组成。头元素和体元素的元素体又由其它的元素、文本及注释组成。8.1HTML语言链接签的格式为：
<起始链接签属性名＝属性值>内容<结束链接签>例如：<BODYbgcolor=yellow><P>这是一HTML的测试文件</P></BODY>8.1HTML语言在HTML中有三个字符具有特殊的意义，即：<表示一个标签的开始。>表示一个
标签的结束。&表示转义序列的开始。每个转义字符都“&”开始，以分号“；”结束。（解决二义性问题）例如：“<”表示“<”符号。“ ”表示空格。8.1HTML语言元素名也叫链接签名。需要注意的是：（1）<和起始链接签之间不能有空格。（2）元素名称不区
分大小写。（3）一个元素可以有多个属性，属性及其属性值不区分大小写，且各个属性用空格分开。8.1HTML语言在头元素中的元素表示的是该HTML文件的一般信息，这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。出现在体元素中的元素是次序敏感的，改变元素在
HTML文件中的次序会改变该HTML文件的输出形式。8.1HTML语言1.<TITLE>标记<TITLE>标记用来给网页命名，显示在浏览器的标题栏中。例如，在图2-1中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”。8.1.2构成网页的基本元素2.<Hn>标记<H1>
…</H1>到<H6>…</H6>标题元素有6种，用于表示文章中的各种题目。字体大小<H1>到<H6>顺序减小。下面这个例子中分别使用了<H1>到<H6>的标题。8.1.2构成网页的基本元素<HTML><H
EAD><TITLE>这是一个测试网页</TITLE></HEAD><BODY><h1>标题测试</h1><h2>标题测试</h2><h3>标题测试</h3><h4>标题测试</h4><h5>标题测试</h5><h6>标题测试</h6></BODY></HTML>3
.预格式化文本标记<pre>HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用<pre>…<／pre>通知浏览器。下面是图2-3和图2-4的HTML源文件。8.1.2构成网页
的基本元素<HTML><HEAD><TITLE>这是一个测试网页</TITLE></HEAD><BODY><pre><!--（图2-4无此标记）-->HTML是一种描述文档结构的标注语言，它使用一些约定的标记对各种信息进行标注。</pre><!--（图2-
4无此标记）--></BODY></HTML>4.<BR>和<P>标记<BR>用于强制换行。<P>表示一个段落的开始。</P>一般可不用。5.<B><I><U><STRONG><S>标记这几个标记都是用来修饰
所包含文档的。<B>标记使文本加粗；<I>标记使文本倾斜；<U>标记给文本加下划线；<S>标记给文本加删除线；<STRONG>标记使文本字体加重。下面给出一个这几个元素的HTML源文件。8.1.2构成网页的基本元素<HTML><HEAD><TITLE>这是一个测试
网页</TITLE></HEAD><BODY><STRONG>HTML</STRONG>是一种<EM>描述文档结构</EM>的<U>标注语言</U>，<B>它使用</B>一些<I>约定的标记</I>对各种信息进行<S>标注<S
>。</BODY></HTML>6.<FONT>标记<FONT>…</FONT>用来修改字体和颜色。其中COLOR属性：指定文字颜色，颜色的表示可以用6位十六进制代码，如<FONTCOLOR=#00FF00>；SIZE属性：指定相对尺寸。8.1.2构成网页的基本元素
<HTML><HEAD><TITLE>这是一个测试网页</TITLE></HEAD><BODY><fontsize=7color=red>HTML是一种</font>描述文档结构的标注语言，
它使用一些约定的标记对各种信息进行标注。</BODY></HTML>如果用户想要设置网页的背景色和文字颜色，可以将<BODY>标记扩充为：<BODYbgcolor=#text=#link=#a
link=#vlink=#background=”imageURL”>8.1.2构成网页的基本元素表设置背景景色和文字颜色标记说明Bgcolor设置网页背景颜色Text设置网页非可链接文字的颜色Link设置网页可链接文字的颜色Alink设置网页正被点击
的可链接文字的颜色Vlink设置网页已经点击的可链接文字的颜色Background设置网页背景图案ImageURL设置网页背景图案的URL地址#代表颜色RGB值（格式为rrggbb）。它是用16进制的红-绿-蓝（red
-green-blue，RGB）值来表示。各种常见的颜色的RGB值如表9-2所示。颜色RGB颜色RGB黑色（Black）000000橄榄色（Olive）808000红色（Red）FF0000深表色（Teal）008080绿色（Green）008000灰
色（Gray）808080蓝色（Blue）0000FF深蓝色（Navy）000080白色（White）FFFFFF浅绿色（Lime）00FF00黄色（Yellow）FFFF00紫红色（Fuchsia）FF00
FF银色（Silver）C0C0C0紫色（Purple）800080浅色（Aqua）00FFFF茶色（Maroon）800000表常见颜色RGB值例如要将网页背景颜色设置为蓝色，<bodybgcolor=#0000ff>8.1.2构成网
页的基本元素超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。8.1.3超文本链接指针1.统一资源定位器URL统一资源定位器（U
niformResourceLocator）是文件名的扩展。它的构成为：protocol://machine.name[:port]／directory／filename8.1.3超文本链接指针其中：protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：
HTTP：超文本传输协议，该资源是HTML文件；FTP：文件传输协议，用ftp访问该资源；MAILTO：采用简单邮件管理传输协议SMTP，提供电子邮件服务。8.1.3超文本链接指针machine.name
是存放该资源主机的IP地址，通常以字符形式出现,如www.whpu.edu.cn。port（端口号）是服务器在其主机所使用的端口号。一般情况下端口号不需要指定，只有当服务器所使用的端口号不是默认的端口号时才指定。directory和filename是该资源的路径和
文件名。8.1.3超文本链接指针一个典型的URL为：http://www.whpu.edu.cn/网络采用传输协议；主机的名字是；但它并没有指出访问的目录和哪个文件，其实这时表示访问的是根目录下的默认主页文件。8.1
.3超文本链接指针与单机系统绝对路径、相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。绝对URL、相对URL是相对于最近访问的URL而言。8.1.3超文本链接指针当协议（http://）被省略时，就认为与当前页面的协议相同。当主机域名被省略时，就认是当前主机域名。当
目录路径被省略时，就认是当前目录。当文件名被省略时，就认是当前文件。8.1.3超文本链接指针2.建立一个链接（1）链接到其它站点在HTML文件中用链接指针指向一个目标。其基本格式为：<ahref="…">zzz</a>其中zzz可以是文字或图片并显示在网页中，href中的h表示超文本
，而ref表示“访问”或“引用”的意思。2.建立一个链接例如：<ahref="http://www.whpu.edu.cn/">武汉工业学院</a>在这个例子中，充当指针的是“武汉工业学院”。在编写HTML文件时，需要知道目标的URL。那么如何才能得到目标的URL呢？在编写HTML文件
时，对能确定关系的一组资源（例如在同一个目录中）应采用相对URL。2.建立一个链接（2）同一个文件中的链接超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。对于同一文件的不同部分，我
们怎样来标识呢？2.建立一个链接下面的内容将介绍链接指针元素的另外的一个用途，标识目标。标识一个目标的方法为：<ANAME="KKK">…….<／A>NAME属性将放置该标记的地方标记为“KKK”，指针：<ahref=
"#KKK">转向下一处</a>2.建立一个链接8.1.4在HTML文件中使用图像1.在HTML文件中显示图像在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。在
HTML网页中加图像是通过<IMG>标记实现的.例如：<IMGalt="校庆"src="images/center1.gif">1.在HTML文件中显示图像<IMG>标记有几个较为重要的属性。其中
：SRC属性：指明图形的URL地址；HEIGHT属性：决定图形的高度；WIDTH属性：决定图形的宽度；BORDER属性：决定边框线的宽度，0表示无边框；ALT属性：指明图像显示的备用文本；下面通过一个示
例来说明<IMG>标记的使用。<HTML><HEAD><TITLE>测试页</TITLE></HEAD><BODY><IMGalt="校庆"src="images/center1.gif"><IMGsrc="imag
es/center1.gif"border=8><IMGsrc="images/center1.gif"height=150width=150></BODY></HTML>图2-6HTML文件举例2.在HTML文件中利用图像建立链接如果在链接标记<A>和</A>的中间放置一个<IMG>标记
，这个图像将会成为一个可击点，产生一个链接。例如：<AHREF=”default.asp”><IMGSRC=”images/center1.gif”ALIGN=LEFT></A>8.1.5框架结构的使用框架能够将页面分成多个独立变化的窗口，每个窗口可以显示
不同的Web页面，并可以不断更换显示的对象。有关框架内容的HTML语法为：<FRAMESET><NOFRAMES>…</NOFRAMES><FRAMESRC=”URL”>…</FRAMESET><html><head><title>武汉工业学院</title><frames
etcols="*,140"><framesetrows="*,80"><framesrc="a.htm"name="f1"><framesrc="b.htm"name="f2"scrolling="no"></frameset><framesetr
ows="*,80"><framesrc="c.htm"name="f3"><framesrc="d.htm"name="f4"></frameset></frameset></head></ht
ml>图2-7框架结构示意图8.1.5框架结构的使用说明：<framesetcols="*,140">把浏览器窗口分成两列，其中“*”表示除了明确的值以外剩下的值。如果浏览器窗口的大小为640*480像素，那么框架中右面一列的宽度为个像素，左面一列的宽度为个像素。8.1.5框
架结构的使用<framesetrows="*,80">该句的含义是。下面一行的高度为像素；上面一行的高度为像素。8.1.5框架结构的使用<framesrc="a.htm"name="f1"><fram
e>标记有以下主要属性：SRC属性：指定框架单元的URL源，即在此框中显示“a.htm”的内容。NAME属性：为该框架单元起个标识名，主要用来为以后改变框架内容提供入口。8.1.5框架结构的使用SCROLLING属性:设置框架是否使用滚动条。有YES、NO和AUTO三个值
，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。8.1.5框架结构的使用target:_blank打开新窗口。target:_self在当前框架结构中打开，会覆盖当前内容。target:_top在当前窗口打开，覆盖所有的框架
内容。target:框架名指定框架打开.例w7-1.asp8.1.6表单的应用1.什么是表单HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。表单的操作是与服务器进行交互的操作，而服务器端的
操作是通过服务器端的程序来实现的。8.1.6表单的应用是在服务器端工作程序，通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。当用户输入信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务
器后，便激活了一个服务器端程序。该服务器程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给服务器，通过服务器传给Web服务器。图2-8表单示例2.表单的标记表单就是为Internet网络用户在浏览器上建立一个交互接
口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。表单的HTML格式如下<FORMACTION=“…”METHOD=”…”>…</FORM>2.表单的标记
FORM标记有以下主要属性：（1）ACTION属性：是用来指出，当这个FORM提交后需要执行的驻留在Web服务器上的程序名（包括路径）是什么。例如：<FORMACTION=”login.asp”METHOD=POST>…</FORM>2.表单的标记（2）METHOD属
性：用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。默认的方式是GET，这两者的区别是什么？2.表单的标记在<FORM>与</FORM>之间，可以使用除<FORM>以外的任何HTML标识，这将使FOR
M变得非常灵活。3.HTML中的INPUT标记下面是INPUT标记的标准格式：<INPUTTYPE=“…”VALUE=“…”>其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。：TYPE=“TEXT”表示在表单中使用单行文本框=“PASSWORD”表示在表单中为用户提供
密码输入框=“RADIO”表示在表单中使用单选按钮=“CHECKBOX”表示在表单中使用多选按钮=“SUBMIT”表示在表单中使用提交按钮=“RESET”表示在表单中使用重置按钮3.HTML中的INPUT标记（1）文字输入和密码输入用一个例子说明文字输入和密码输入的制作。请看下
例：3.HTML中的INPUT标记<HTML><HEAD><TITLE>这是个测试页</TITLE></HEAD><BODY><formaction=“reg.asp”method=POST>请输入您的真
实姓名:<inputtype=textname=姓名><br>您的主页的网址:<inputtype=textname=网址value=http://><br>密码:<inputtype=p
asswordname=密码><br><inputtype=submitvalue=“发送”><inputtype=resetvalue="重设"></form></body></html>图2-9文字输入和密码输入的例子请输入您的真实姓名:<inp
uttype=textname=姓名maxlength=8><br>3.HTML中的INPUT标记（2）复选框（Checkbox）和单选框（RadioButton）单选框和复选框的格式如下：单选框：<inputtype=radiova
lue=“…”checked>多选框：<inputtype=checkboxvalue=“…”checked>3.HTML中的INPUT标记下面来看一个例子，具体来体会一下。<HTML><HEAD><TITLE>这是
个测试页</TITLE></HEAD><BODY><FORMACTION=“REG1.ASP”METHOD=POST>选择一种你喜爱的水果:<br><INPUTtype=radioname=水果value=”香蕉”>香蕉<br><INPUTtype=radioname=
水果checkedvalue=”草莓”>草莓<br><INPUTtype=radioname=水果value=“橘子”>橘子</FORM></BODY></html><HTML><HEAD><TITLE>这是个测试页</TITLE></H
EAD><BODY><FORMACTION=“REG1.ASP”METHOD=POST><br>选择你所喜爱的运动:<br><INPUTtype="checkbox"name=ra1checkedvalue="足球">足球<br><INP
UTtype="checkbox"name=ra2checkedvalue="篮球">篮球<br><INPUTtype="checkbox"name=ra3value="排球">排球<br><INPUTTYPE=SUBMITVALUE=“发送”><INPUTTY
PE=RESETVALUE="重设"></FORM></BODY></HTML>图2-10单选框实例（3）按钮的制作其实“发送”按钮真正的含义叫“提交”。即当Internet网络用户用鼠标单击这个按钮后，用户输入的信息便提交给一个驻留在Web服务器上
的程序，让服务器进行处理.其典型的格式：<INPUTTYPE=”SUBMIT”VALUE=”发送”>。VALUE属性：如果缺省出现“SUBMIT”的字样，改变按钮上的提示。例如：VALUE=“提交”。3.HTML中的INPUT标记另一种在浏览器常
用的按钮叫“重置”按钮，当Internet网络用户用鼠标单击这个按钮后，网络用户输入的信息被清除，让网络用户重新输入信息。其典型的格式：<inputtype=“reset”value=”重新输入”>，VALUE属性：缺省VALUE属性为“RE
SET”的字样。改变按钮上的提示，例如：VALUE=“重新输入”。3.HTML中的INPUT标记设置下拉式菜单或带有滚动条的菜单，下拉菜单的标准格式如下所示：<SELECT...><OPTIONvalue=“kkk”>选项一….<
/SELECT>4.HTML中的SELECT标记NAME属性是当Internet网络用户将表单提交时作为输入信息的名字。SIZE属性控制在浏览器窗口中这个菜单选项的显示条数。MULTIPLE属性
允许读者一次可选多个选项，如果缺省MULTIPLE，一次只能选一项，类似于单选。OPTION带有SELECTED属性，若在SELECT标记中设定MULTIPLE属性的话，可以在多个OPTION标记中带有SELECTED属性，表示这些选项已经预选。4.HTML中的SELECT标记<HTM
L><HEAD><TITLE>武汉工业学院</TITLE></HEAD><BODY>请从下面课程中选择几门选择课:<FORMaction="h1.asp"method=getid=form1name=form1><SELECTname=x1multiple><OPTIONv
alue=“network”>网络技术<OPTIONvalue=“write”SELECTED>书法<OPTIONvalue=“music”>音乐欣赏<OPTIONvalue=“MUXmedia
”>多媒体技术</SELECT><INPUTTYPE=SUBMITVALUE=“发送”><INPUTTYPE=RESETVALUE="重设"></FORM></BODY></HTML>图2-11设置下拉菜单8.1.7HTML中的表格从这个例子
可以看出一个表格有一个标题（Caption），它表明表格的主要内容，并且一般位于表的上方；表格中由行和列分割成的单元叫做“表元”（Cell），它又分为表头（用TH标记来表示）和表数据（用TD标记来表示）；表格中分割表示的行列线称为“框线”（Border
）。一个表格的基本框架如下所示：<TABLEWIDTH=75%BORDER=1CELLSPACING=1CELLPADDING=1><CAPTION></CAPTION><TR><TD></TD><TD></TD><TD></TD></TR><TR
>1.表格的标记<TD></TD><TD></TD><TD></TD></TR><TR><TD></TD><TD></TD><TD></TD></TR></TABLE>1.表格的标记
（1）TABLE标记一个表格至少一个TABLE标记，由它来决定一个表格的开始和结束，而且TABLE标记可以嵌套。TABLE标记有以下五种属性：BORDER属性，指定围绕表格的框的宽度（只能用像素）。CELLSPACING属性，指定框线的宽度CELLPADDING属性，用于设置表元内容与边框
线之间的间距。ALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）。WIDTH属性，用来设置表格的宽度，可以以像素为单位，也可用占浏览器窗口的百分比来定义。（2）CATION标记CATION标记
用来标注表格标题的。CATION标记必须紧接在TABLE开始标记之后放在第一个TR标记之前。通过该标记所定义的表格标题一般显示在表格的上方，而且其水平方向是居中对齐。另外，如需要对表格的标题突出显示，可以在CATION标记之间加入其它对字体进行加重显示的标记。如：<TABLEWI
DTH=75%BORDER=1CELLSPACING=1CELLPADDING=1><CAPTION><H2>表格标题强调</H2></CAPTION><TR>……….</TR></TABLE>定义表格的一行。TR标记中有两个属性:ALIGN属性，用来设置表行中的每个表元在水
平方向的对齐方式，其取值可以是LEFT（左对齐）、CENTER（居中对齐）、RIGHT（右对齐）；VLIGN属性，用来设置表行中的每个表元在垂直方向的对齐方式，其取值可以是TOP（向上对齐）、CENTER（居中对齐）、BOTTOM（向下对齐
）。（3）TR标记例如，要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐，可使用如下源代码：<TRALIGN=RIGHTVALIGH=TOP>（3）TR标记（4）TH标记TH标记用来表示一个表行中的各个单元。同样具有AL
IGN和VALIGN属性，TH标记还有两个属性:WIDTH属性，用来设置表元的宽度，HEIGHT属性，用来设置表元的高度。2.表格使用实例在这个实例中，通过制作一个登记表格来给大家来说明如何制作一
个比较复杂的表格。在表格中经常会出现跨多行、多列的表元，这就要利用TD标记另外两个属性，即COLSPAN和ROWSPAN属性。例如<THCOLSPAN=3>登记照<TH>表示这个表项标题将横跨三个表项的位置；<THROWSPAN=3>登记照<TH>表示这个表项标题将纵
跨三个表项的位置；另外每个表元还可以设置其背景颜色。例如<THCOLSPAN=3BGCOLOR=yellow>登记照<TH>还可以在表格中插入超级链接或在表格中插入图片，如果能对这个例子举一反三的话，那么仅需制作一个无框线的表格，就可以把各种数据按照自己所希望的形式
在页面进行布置。下面就给出一个具体的实例（其页面效果如图2-13所示）：图2-13综合表格实例<HTML><HEAD></HEAD><BODY><P><TABLEborder=1cellPadding=1cellSpacing=1width="75%"><
caption><h3>大奖赛登记表</h3></caption><TR><TDbgcolor=LightGoldenrodYellow>报名号</TD><TD>757</TD><TDbgcolor=LightYellow>性别</TD><TD>女</TD>
<TDrowspan=2><IMGSRC="image\center.gif"></TD></TR><TR><TDbgcolor=FloralWhite>姓名</TD><TDcolspan=3><Ahref="http:/
/www.jljiangli.com.cn">江小丽</A></TD></TR><TR><TDbgcolor=Cornsilk>推荐单位</TD><TDcolspan=4>宇宙公司</TD></TR></TABLE></P></BODY></HTML>8.
2级联式样式表（CSS）级联式样式表（CSS）为HTML文档提供美观而一致的外观。使用CSS样式定义HTML页和Web窗体中元素和文本的外观和位置。可将style属性以内联方式添加到许多HTML元素
上，还可将CSS样式嵌入到<STYLE>块中或存储在外部级联式样式表（.css）文件中。8.2.1定义CSSCSS样式定义元素的显示方式以及在页中放置元素的位置。可以创建一个通用规则，只要Web浏览
器遇到一个元素实例，或是一个分配给某个样式CLASS的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。1.在STYLE块内定义CSS样式规则每个CSS样式规则都有两个主要部分：选择器、声明（包括属性和属性的值）例如一条说明“将<H1></H1
>标记内包含的所有文本设置为居中，并采用红色字体颜色”的简单CSS样式规则可以写成：H1{text-align:center;color:red;}1.在STYLE块内定义CSS样式规则CSS样式规则可以在HTML文档<HEAD>部分的<STYLE>块内
定义。以下是一个示例（运行结果如图2-14所示），它定义了一条CSS样式规则，并将该规则应用到Web页上的所有<H1>元素：<HTML><HEAD><TITLE>HTML4.0CSS举例</TITLE><STYLETYPE="text/css">H
1{text-align:center;color:red;}</STYLE></HEAD><BODY><H1>Thistextiscenteredandred</H1><H2>Thistextisn’tcenteredandred</H2></BODY></HTML>图2-1
4CSS示例2.CSS样式规则的优先级CSS样式规则从一定意义上讲是“级联”的，即全局样式规则会一直应用于HTML元素，直到有局部样式规则将其取代为止。在局部样式应用于HTML元素之后，全局样式规则中不与局部CSS样式规则冲突的部分继续应用于
这些元素。3.将HTML元素分配给CSS样式CLASS每当文本出现在分配给特定CLASS的HTML标记中时，就会自动应用CSS样式。在<STYLE>块中，CLASS样式规则的选择器以一个句点开始。例如：.head2{font-size
:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;}若要以内联方式应用这种类型的样式，请向支持内联样式的标记添加CLASS属性：<DIVCLASS="head2">作
为CLASS属性值输入的字符串，应与该页所应用样式规则的选择器相匹配。以下是一个页示例，它定义和应用了名为head2的CSS样式CLASS：<HTML><HEAD><TITLE>HTML4.0CSSStyleC
lassExample</TITLE><metacontent="InternetExplorer5.0"name="vs_targetSchema"><STYLETYPE="text/css">BODY{background:#F
BFBFB;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;}A:link{color:blue;text-decoration:none}A:active{col
or:red;text-decoration:none}A:visited{color:green;text-decoration:none}.head2{font-size:14pt;text-align:center;color:red;font-wei
ght:bold;font-style:italic;}</STYLE><LINKREL=stylesheetType="text/css"HREF="mystyles.css"></HEAD><BODY><DIVCLASS="head2"
>Thistextiscentered,large,red<SPANstyle="color:green;font-style:normal;text-decoration:underline;">andgreen</SPAN>,bo
ld,anditalic</DIV></BODY></HTML>4.外部CSS样式表外部CSS样式表文档是只包含样式规则、以.css为扩展名的纯文本文件。语句<LINKREL=stylesheetType
="text/css"HREF="mystyles.css">表示将外部CSS样式表“mystyles.css”中的样式规则应用到该页。下例中，“Mystyles.css”是一个外部CSS样式表文档，它包含<H1>标记的样式规则。<html><head><
TITLE>调用外部CSS</TITLE><metacontent="InternetExplorer5.0"name="vs_targetSchema"><LINKrel="stylesheet"href="Mystyles.
css"type="text/css"></HEAD><BODY><H1>Thistextisred</H1></BODY></HTML>4.外部CSS样式表外部CSS样式表中列出的样式规则的写
法与在<STYLE>块中的写法一样，只是两边没有<STYLE></STYLE>标记：H1{text-align:center;color:red;}.head2{font-size:14pt;text-align:c
enter;color:red;font-weight:bold;font-style:italic;}一个外部CSS样式表可链接到许多HTML页，从而在整个Web站点内应用一致的样式。CSS样式表将格式设置规则与内容分开，从而大大方便了样式规则的定位
和编辑。<STYLE></STYLE>块还可以用于公开文档，以通过可扩展标记语言（XML）对该文档进行处理。5.CSS的注释注释的好处?CSS用C/C++的标记进行注释的，“/*”放在注释的开始处，“*/”在结束处。下例说
明如何进行注释：<HEAD><TITLE>CSS例子</TITLE><STYLETYPE="text/css">H1{font-size:x-large;color:red}/*这是一个CSS的定义*/H2{font-size:large;color:blue}</STYLE><
/HEAD>8.2.2CSS属性分类CSS属性分为包括字体、颜色和背景、文本、边框、用户界面、表和视觉效果。1.字体字体格式属性确定格式化文本在Web浏览器中将如何显示。可设置首选字体系列、字体大小和颜色，以及文本是否显示为粗体、斜体或带下划线。可将字体格式设置属性添加
到在外部CSS样式表中定义的CSS样式规则，或添加到Web页＜HEAD＞部分的＜STYLE＞块中定义的CSS样式规则。1.字体若要将样式规则应用于Web页的＜BODY＞节中的某个特定HTML元素，需要将CLAS
S或ID属性添加到其值为所需CSS样式规则选择器的元素的开始标记中。也可将CSS字体属性直接添加到支持STYLE属性的HTML元素中。注意：如果定义了BODY{}样式，则该页上所有未由内联样式格式化的文本都将以指定样式显示。
表字体属性属性属性含义属性值font-family选择字体所有字体font-size选择字体大小<绝对大小>|<相对大小>|<长度>|<百分比>font-weight字体加粗normal|bold|bolder|lighter|100|200|300|400|500|600|700
|800|900font-variant字体变形normal(普通)|small-caps(小型大写字母)font-style字体风格normal(普通)|italic(斜体)|oblique(倾斜)<html><head><title>字体样式测试</ti
tle></head><body><pstyle="font-family:lucidaconsole">www.whpu.edu.cn</p><pstyle="font-style:italic">www.whpu.edu.cn</p><pstyle="font-style:o
blique;font-weight:bold;font-size:24pt">www.whpu.edu.cn</p><pstyle="font-style:oblique;font-weight:bold;font-size:24pt;font-varia
nt:small-caps">www.whpu.edu.cn</p><pstyle="font:italicsmall-capsbold36pt,GlitzyCurl">www.whpu.edu.cn</p></body></html>2.颜色和背景背景属性通过更改颜色或包含图
像来控制背景。如果采用图像作为Web页的背景，也可指定其位置和平铺属性。通过组合使用这两种属性，可确定背景图像在页面上的位置以及图像显示的频率。表2-4中列出了CSS的颜色和背景属性。表CSS的颜色和背景属性属性属性含义属性值
属性书写格式color定义前景色颜色如：H2{color:#000080}background-color定义背景色<颜色>|transparent(透明)如：BODY{background-color:white}background-image背景图象图片路径如：BODY{backgro
und-image:url(http://www.whpu.edu.cn/images/bg.gif)}font-variant字体变形font-style字体风格3.文本CSS文本属性用以改变页面文本的显示方式，这些属性可以细化页面的
排版，生成特殊的文本效果。表CSS的文本属性属性属性含义属性值Text-align水平对齐“左”（left）、“居中”（center）、“右”（right）或“两端对齐”（justify）Vertical-a
lign垂直对齐baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>word-spacing单词间距“正常”（normal）或“自定义”letter-spacing
字母间距“正常”（normal）或“自定义”line-height行间距normal|<数字>|<长度>|<百分比>text-indent文本缩进<长度>|<百分比>3.文本说明：在垂直对齐的属性值的说明如下：baseline（使元素和上级元素的基线对齐）middle（纵
向对齐元素基线加上上级元素的x-高度——字母"x"的高度——的一半的中点）sub（下标）super（上标）text-top（使元素和上级元素的字体向上对齐）text-bottom（使元素和上级元素的字体
向下对齐）影响相对于元素行的位置的关键字有top（使元素和行中最高的元素向上对齐）bottom（使元素和行中最低的元素向下对齐）<html><head><title>文本样式测试</title></head><
body><pstyle="letter-spacing:1em;text-align:justify;text-indent:4em;line-height:17pt">武汉工业学院WEB服务器的域名为：www.whpu.edu.cn；武汉工业学院FTP服务器的域名为：F
TP.whpu.edu.cn；</p></body></html>4.鼠标属性当把鼠标移动到不同的地方时；当鼠标需要执行不同的功能时；当系统处于不同的状态时，都会使鼠标的形状发生改变。用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。在C
SS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，详细列表如下：属性值说明Auto自动，根据默认状态自行改变Crossshair十字线光标。Default默认光标，通常为箭头光标。Hand手型光标。Help“帮助”光标，
它是箭头和问号的组合。Move移动E-resize箭头朝右方。Ne-resize箭头朝右上方。Nw-resize箭头朝左上方。n-resize箭头朝上方。Se-resize箭头朝右下方。Sw-resize箭头朝左下方。s-resize箭头朝下方。text文本“I
”型wait等待下面来看一段鼠标指针在不同文字对象对应于不同显示的代码：<html><head><title>changemouse</title></head><body><h1style="
font-family:文鼎新艺体简">鼠标效果</h1><pstyle="font-family:行书体;font-size:16pt;color:red">请把鼠标移到相应的位置观看效果。</p><divstyle="f
ont-family:行书体；font-size:24pt；color:green；"><p><spanstyle="cursor:hand">手的形状</span><br><spanstyle="cursor:mov
e">移动</span><br><spanstyle="cursor:ne-resize">反方向</span><br><spanstyle="cursor:wait">等待</span><br><spanstyle="cursor:help">求助</span></p></di
v></body></html>8.2.3CSS的单位1.长度单位一个长度的值由可选的正号“＋”或负号“－”、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3em就不是一个有效的长度的值，但1.3em就
是有效的。一个为零的长度不需要两个字母的单位声明。无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位：em（em，元素
的字体的高度)ex（x-height，字母“x”的高度）8.2.3CSS的单位px（像素，相对于屏幕的分辨率）绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位:in（英寸，
1英寸=2.54厘米）cm（厘米，1厘米=10毫米）mm（米）pt（点，1点=1/72英寸）pc（帕，1帕=12点）8.2.3CSS的单位2.百分比单位一个百分比值由可选的正号“＋”或负号“－”、
接着的一个数字，还有百分号“%”。在一个百分比值之中是没有空格的。百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。3.颜色单位颜色值是一个关键字或一个RGB格式的数字。WindowsVGA(视频图像阵
列)形成了16个关键字:aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，andyellow。8.2.3C
SS的单位RGB颜色可以有四种形式：#rrggbb（如，#00cc00）#rgb（如，#0c0）rgb（x,x,x），其中x是一个介乎0到255之间的整数（如，rgb（0,204,0））rgb（y%,y%,y%）y是一个介乎0.0到1
00.0之间的整数（如，rgb（0%,80%,0%））上述的例子指定同一颜色。8.3.1网页脚本语言——JavaScript脚本语言是一种简单的描术性语言，它是针对HTML语言不能很好地解决动态交互这个缺点而引入的，它能对Web页面中的元素进行控制。一般来说，脚本语言是通过一
个<Script>的标记嵌入到HTML文档中，并可以被浏览器解释执行，插入的脚本语言就如同子程序一样被HTML元素所调用，成为HTML的一部分。1．什么是脚本语言8.3.1网页脚本语言——JavaScript目前比较流行的脚本语言有:网景公司（Netscope
）的JavaScript微软公司（Microsoft）的VBScript。1．什么是脚本语言JavaScript语言起初叫称之为“Mocha”的语言，开始在网上进行β测试时，名字改为“LiveScript”。Sun公司推出Java之后，Netscape引进了Sun的
有关概念，在其发行Netscape2.0β测试版时才称其为“JavaScript”。它不仅支持Java的Applet小程序，同时向Web页的制作者提供一种嵌入HTML文档进行编程的、基于对象的Script（脚本）程序设计语言，采用的许多结构与Java相
似。2．JavaScript的产生与发展支持JavaScript的Navigator2.0的网络浏览器能够解释并执行嵌在HTML中的用JavaScript语言书写的“程序”。2．JavaScript的产生与发展3．一个简单的例子＜HTML＞＜HEAD＞＜TITLE＞This
isatest＜/TITLE＞＜/HEAD＞＜BODY＞你好＜SCRIPTLANGUAGE="JavaScript"＞document.write"Hello，JavaScript!"＜/SCRIPT＞＜/BODY＞＜/HTML＞JavaScript源代码被嵌在一个HTML文
档中，而且它可以出现在文档头部（HEAD节）和文档体部(BODY节)。SCRIPT标记的一般格式为：＜SCRIPTLANGUAGE="JavaScript"＞＜!--JavaScript语句串···--＞＜/SCRIPT＞为了使老版本的浏览器（即Navigator2.0版以前的浏览器）避开不识别
的“JavaScript语句串”，用JavaScript编写的源代码可以用注解括起来，即使用HTML的注解标记＜!--…--＞，而Navigator2.x可以识别放在注解行中的JavaScript源代码。8.3.2JavaScript语言在JavaScript中，数据类型是十分宽松的，程序员在声明
变量时可以不指定该变量的数据类型，JavaScript会自动地按照需要来分配适当的数据类型。JavaScript有以下几种基本的数据类型：1．JavaScript数据类型（1）数字类型（2）字符串类型（3）逻辑值类型（4）
空值C语言的变量定义格式为：inta=1;floatf1=3.14JavaScript的变量定义格式:Var变量名；或者Var变量名=初始值；说明：在使用变量之前，最好对每个变量使用关键字VAR进行变量声明，防止发生变量的有效区域冲突的问题。2．JavaScript变量Jav
aScript常量分为4类：整数、浮点数、布尔值和字符串。3．JavaScript常量在JavaScript的语法规则中，每一条语句的最后必须使用一个分号，例如：document.write(“kkk”);良好
的习惯：（1）一行写一条语句，如果使用复合语句块时，注意把复合语句块用大括号括起来，并且根据每一句作用范围的不同，应有一定的缩进。（2）另外一个好的编程风格是要适当加一些注释。4．JavaScript语句的结构＜SCRIPTLANGUAGE="JavaScript"＞
varSUM,P,i;SUM=0;//初始化累加和P=1;FOR(i=1;i<100;i++){SUM+=i;//求累加和P*=i;}＜/SCRIPT＞JavaScript拥有一般编程语言（如Ｃ语言）的运算符，包括算术运算符、比较运算符、连接运算符4．JavaScript运算符和
表达式（1）算术运算符运算符运算符定义举例说明+加法符号X=A+B-减法符号X=A-B*乘法符号X=A*B/除法符号X=A+B%取模符号X=A%BX等于Ａ除以Ｂ所得的余数++加１A++A的内容加1--减
1A--A的内容减1（2）位运算符运算符运算符定义举例说明~按位求反X=~A<<左移X=B<<A(A为移动次数，左边移入0)>>右移X=B>>A(A为移动次数，右边移入0)>>>无符号右移X=B>>>A(A为移动次数，右边移入符号位)&位“与”X=B&
A^位“异或”X=B^A|位“或”X=B|A（3）复合赋值运算符运算符运算符定义举例说明+=加X+=AX=X+A-=减X-=AX=X-A*=乘X*=AX=X*A/=除X/=AX=X/A%=模运算X%=AX=X%A<<=左移X<
<=AX=X<<A>>=右移X>>=AX=X>>A>>>=无符号右移X>>>=AX=X>>>A&=位“与”X&=AX=X&A^=位“异或”X^=AX=X^A|=位“或”X|=AX=X|A（4）比较运算符运算符运算符定义举
例说明==等于A==BA等于B时为真>大于A>BA大于B时为真<小于A<BA小于B时为真!=不等于A!=BA不等于B时为真>=大于等于A>=BA大于等于B时为真<=小于等于A<=BA小于等于B时为真?:条件选择E？A：B
E为真时选A，否则选B（5）逻辑运算符运算符运算符定义举例说明&&逻辑“与”A&&BA与B同时为True时，结果为True!逻辑“非”!A如A原值为True,结果为False||逻辑“或”A||BA与B有一个取值为True时，
结果为True（6）运算符的优先级运算符说明.[]()字段访问、数组下标以及函数调用++--~!typeofnewvoiddelete一元运算符、返回数据类型、对象创建、未定义值*/%乘法、除法、取模+-+加法、减法、字符
串连接<<>>>>>移位<<=>>=小于、小于等于、大于、大于等于==!==等于、不等于、恒等、不恒等&按位与^按位异或|按位或&&逻辑与||逻辑或?:条件=赋值（7）表达式JavaScript表达式可以用来计算数值，也可以用来
连接字符串和进行逻辑比较。JavaScript表达式可以分为三类：算术表达式字符串表达式逻辑表达式JavaScript允许加一些注释。并且有两种注释方法：单行注释和多行注释。单行注释：以“//”开始，以同一行的最后一个字符作为结束。多行注释：以
“/*”开始，以“*/”结束，符号“*/”可放在同一个行或一个不同的行中。6．脚本语言的注释下面举例说明怎样使用这两种注释方法：<Scriptlanguage=”JavaScript”>/*这是多行注释的第一行这是多行注释的
第二行*/k=24*7；//这是一个单行注释的例子</Script>6．脚本语言的注释JavaScript的脚本语言提供程序流程控制语句。这些语句分别是if、switch、for、do和while语句。（1）条件语句7．JavaScript程序流程控制If语句If语句是一个条件判断语句，它根据一
定的条件执行相应的语句块，其定义格式如下所示：If(expr){code_block1}else{code_block2}7．JavaScript程序流程控制If(expr){code_block1if(expr1){code_block3}}else
{code_block2}②switch语句switch语句测试一个表达式并有条件的执行一段语句，其语法格式如下：switch(表达式){case值1：code_block1break;case值2：code_block2break;case值3：code_block3break;…default
：code_blockn}下面举例说明switch语句的用法：<HTML><HEAD><TITLE>显示</TITLE><SCRIPTLANGUAGE=javascript><!--document.write("switch语名测试------");switch(14%3){ca
se0:sth="您好";break;case1:sth="大家好";break;default:sth="世界好";break;}document.write(sth);//--></SCRIPT></HEAD>
<BODY></BODY></HTML>for语句for语句用来产生一段程序循环，其语法格式如下：for(init;test;incre){code_block}（2）循环语句下面举例说明for语句的用法：<SCRIPTLANGUAGE=javascript>varsum=0;f
or(n=1;n<11;n++){sum=sum+ndocument.write(n,"SUM=",sum,"<br>");}</SCRIPT>while语句语法格式如下：while(expr){code_block;}②while语句下面举例说明while语句的用法：<SCRIPTL
ANGUAGE=javascript><!--vari,sum;i=1;sum=0;while(i<=10){sum+=i;document.write(i,"",sum,"<br>");i++;}//--></SCRIPT>do…while语句与while语句所执行的功能完全一样
，唯一的不同之处就是do…while语句不管条件是否成立，其循环体至少执行一次，然后再去判断表达式的取值是否为真。do…while语句的语法格式如下：do{code_block}while(expr);③do…while语句下面举例说明do…while语句的
用法：<SCRIPTLANGUAGE=javascript><!--vari,sum;i=1;sum=0;do{sum+=i;document.write(i,"",sum*100,"<br>");document.write("i小于10条件不成立,但本循环体
却执行一次!");i++;}while(i>10)//--></SCRIPT>①Break语句Break语句的作用就是使程序跳出各种流程。它常常是用在异常情况下终止流程。②Continue语句在for循环中，执行到Conti
nue语句后，程序立即跳转到迭代部分，然后到达循环条件表达式，而对While循环，程序立即跳转到循环条件表达式。（3）转移语句8.3.3JavaScript中的函数把相关的语句组织在一起，并给它们标注相应的名称，利用这种方法把程序分块，这种形式的组合就
称为函数，往函数中传递信息的方法是用参数，有些函数不需要任何参数，有些函数可以带多个参数。函数的定义方法如下所示：Function函数名([参数][，参数]){函数语句块}1．JavaScript函数概述下面通过一个具体
实例来看一下JavaScript中函数的定义和调用方法。其源代码如下：<HTML><HEAD><TITLE>一个JavaScripte程序测试</TITLE><SCRIPTLANGUAGE=javascript><!--functiontotal(i,j){varsum;sum=i+j;retu
rn(sum);}document.write("调用这个函数total(100,20),结果为:",total(100,20))//--></SCRIPT></HEAD><BODY></BODY></HTML
>JavaScript脚本语言所固有的，并且没有任何对象的相关性，这些函数就称为内部函数。IsNaN（变量），如果变量的值不是数值类型，则返回“True”，否则返回“False”。这个函数可以用来对用户的输入进行判断，看其输入是否是数值类型。2．内部函数<SCRIPTLANGUAGE=j
avascript><!--varstr;str=prompt("请你输入一个值,如3.14","");if(isNaN(str)){document.write("唉?受不了您,有例子都输不对!!!");}else{document.write("您真棒,输入正确(数值
类型)!!!");}//--></SCRIPT>3.用户自定义函数＜HTML＞＜HEAD＞＜TITLE＞Thisisafunction'stest＜/TITLE＞＜SCRIPTLANGUAGE="JavaScript"＞functionsquare(
i){document.write("Thecallpassed",i,"tothesquarefunction.","<BR>")returni*i}document.write("Thefunctionre-turne
d",”<BR>”)document.write(square(8))＜/SCRIPT＞＜/HEAD＞＜BODY＞＜BR＞Alldone.＜/BODY＞＜/HTML＞8.3.4JavaScript的事件JavaScript语
言是一个事件驱动的编程语言。事件是脚本处理响应用户动作的唯一途径，它利用了浏览器对用户输入的判断能力，通过建立事件与脚本的一一对应关系，把用户输入状态的改变准确地传给脚本，并予以处理，然后把结果反馈给用户，这样就实现了一个周期的交互过程。JavaScript对
事件的处理分为定义事件和编写事件脚本两个阶段，可以定义的事件类型几乎影响到HTML的每一个元素，例如：浏览器窗口、窗体文档、图形、链接等。1．JavaScript事件事件名称事件说明Abort用户中断图形装载Blur元素失去焦点Change元素内容发生改变，如
文本域中的文本和选择框的状态Click点击鼠标按钮或键盘按键Dragdrop浏览器外的物体被拖到浏览器中Error元素装载发生错误Focus元素得到焦点Keydown用户按下一个键Keypress用户按住一
个键不放Keyup用户将按下的键抬起Load元素装载Mousemove鼠标移动Mouseover鼠标移过元素上方Mouseout鼠标从元素上方移开Mousedown鼠标按键按下Mouseup鼠标按键抬起Move帧或者窗体移动Reset表单内容复位Resize元素大小属性发生改变Sub
mit表单提交Select元素内容发生改变，如文本域中的文本和下拉选单中的选项Unload元素卸载脚本函数包含在<Script>和</Script>标记之间。2．为事件编写脚本<HTML><HEAD><TITLE>一个JavaScripte程序测试</TITLE><S
CRIPTLANGUAGE=javascript>functionkkk(){do{username=prompt("请问您是何方神圣,报上名来","");}while(username=="")document.write(username,",久仰大名,请多多关照.");}</SCRIPT>
</HEAD><BODY><INPUTtype="button"value=你敢碰我吗?name=button1onclick="kkk()"></BODY></HTML>8.3.5JavaScript中的对象面向对象的系统包含三个要素：对象、类、继承。
JavaScript语言是一种基于对象的语言，它不能算是一个面向对象的语言，因为它不支持类和继承。对象：从概念级上说，表示客观世界的客体，任何实物都可以被称为对象；从物理实现说：一个对象是一个状态和一系列可被外部调用的操作方法的一个封装体，即指的是状态和操作的组合
，状态通过一组属性来确定，而操作通过一组方法来确定。1．基本概念在JavaScript中一个新对象的定义方法如下：对象的变量名=new对象类型（可选择的参数）访问对象属性的语法如下：对象的变量名.属性名访问对象方法的语法如下：对象的变量名.方法名（方法可选参数）例如：定义一个字符串对象（
即String对象）vargamma;gamma=newString("Thisisastring");document.write(gamma.substr(5,2));document.write(gamma.length);2．String对象名称功能CharAt(n)返回字符串的
第N个字符IndexOf(srchStr[,index])返回第一次出现子字符串srchstr的位置，index从某一指定处开始，而不从头开始。如果没有该子串，返回-1。LastIndexOf(srchStr[,index])返回最后一次出现子字符串srchstr的位置
，index从某一指定处开始，而不从头开始。Link(href)显示href参数指定的URL的超级链接Substring(n1,n2)返回由第n1和第n2字符之间的子字符串ToLowerCase()将字符转换成小写格式显示
ToUpperCase()将字符转换成大写格式显示<HTML><HEAD><TITLE>一个JavaScript对象的属性和方法的使用</TITLE><SCRIPTLANGUAGE=javascript>sth=newString("
这是一个字符串对象");document.write("sth='这是一个字符串对象'","<br>");document.writeln("sth字符串的长度为:",sth.length,"<br>");document.writeln("sth字符串的第4个字符为:'",sth.charA
t(4),"'<br>");document.writeln("从第2到第5个字符为:'",sth.substring(2,5),"'<br>");document.writeln(sth.link("http://www.lllbbb.com"),"<br>");</
SCRIPT></HEAD><BODY></BODY></HTML>Math对象所提供的属性和方法在进行数学运算时非常有用。它有很多的方法和属性，如sin()，cos()，abs()，PI，max()，min()等用于计
算的数学函数。用法如下：<SCRIPTLANGUAGE=javascript><!--document.write(Math.PI);//取得3.1415926document.write(Math.random());//产生
一个0到1之间随机数//--></SCRIPT>3．Math对象4．Math对象方法说明Concat(array2)方法返回一个包含array1和array2级联的Array对象Reverse()把一个
Array对象中的元素在适当位置进行倒转Pop()从一个数组中删除最后一个元素并返回这个元素Push()添加一个或多个元素到某个数组的后面并返回添加的最后一个元素Shift()从一个数组中删除第一个元素并返回这个元素Slice(start,end)返回数组的一部分。从in
dex到最后一个元素来创建一个新数组Sort()排序数组元素，将没有定义的元素排在最后Unshift()添加一个或多个元素到某个数组的前面并返回数组的新长度。Date对象提供了几种获取日期和时间的方法。定义Date对象的方法如下：vard1=newDat
e();5．Date对象方法说明GetDate()返回在一个月中的哪一天（1~31）GetDay()返回在一个星期中的哪一天（0~6），其中星期天为0GetHours()返回在一天中的哪一个小时（0~23）GetMinutes()返回在一小时中的哪一分钟（0~59）GetMonth
()返回在一年中的哪一月（0~11）GetSeconds()返回在一分钟中的哪一秒（0~59）GetYear()返回年号SetDate(day)设置日期SetHours(hours)设置小时数SetMinutes(
mins)设置分钟数SetSeconds(secs)设置秒SetYear(year)设置年6．浏览器和HTML对象WindowsFramesDocumentHistoryLocationDocumen
tDocumentElementBodyAnchorsFormsAllButtoncheckboxNavigatorLinks（2）Window对象Window对象封装了当前浏览器的环境信息。一个Window对象中
可能包含几个Frame（框架）对象。每个Frame对象在它所在的框架区域内作为一个根基，相当于整个窗口的Windows对象。Document对象封装了当前文档：History对象封装浏览器历史记录清单；Location对象封
装浏览器当前位置：Navigator对象提供客户环境的信息；Screen对象访问显示器屏幕参数：Event对象提供最新事件信息及控制事件处理。Window对象的属性广义的Window对象包括浏览器的每一个窗口、每一个框架（Frame）或者活动框架（IFrame）。每个Window对
象都有以下一些属性：Name这是Window对象的一个可读写属性，它返回当前窗口的名称。Parent这是Window对象的一个只读属性，如果当前窗口有父窗口，它返回当前窗口的父窗口的对象，可以使用返回对象的属性和方法。Opene
r这是Window对象的一个只读属性，属性返回产生当前窗口对象，可以使用返回对象的属性和方法。Self这是Window对象的一个只读属性，属性返回当前窗口的一个对象，可以通过这个对象访问当前窗口的属性和方法。Top这是Window对象的一个只读属性，属性返回
的是代表最上层窗口的一个对象，可以通过这个对象访问当前窗口的属性和方法。DefauItStatus这是Window对象的一个可读写属性，使作它可以返回或者设置将在浏览状态栏中显示的缺省内容。Status这是Wi
ndow对象的一个可读写属性，使用它可以返回或者设置将在浏览器状态中显示的内容。例如下例可以在浏览器状态栏中显示浏览当天的日期：Status=DataFormat(Date)Window对象的方法Alert使用Alert方法可以弹出一个警告框，警告框显
示一条信息，并且有一个“确定”按钮。用法：window.alert(“这次你可真走运!”)。Confirm使用Confirm方法可以弹出一个对话框，显示一条信息，并且显示“确定”和“取消”两个按钮。它能返回一
个逻辑布尔量的值，可以被脚本程序使用，下面来看一个具体的实例。其源代码如下所示。<SCRIPTLANGUAGE=JavaScript><!--Res=window.confirm("您有勇气确认码?");if(Res){document.write("您真勇敢
!")}else{document.write("您太年轻,还需要锻炼!")}//--></Script>Prompt用Prompt方法可以弹出一个信息框，显示一条信息，并且有一个文本输入框、一个“确定”按钮和一个“取消”按钮。如果选择“确定”按钮，则文本框
中输入的内容将被返回，可以被脚本程序使用。这个方法有两个参数：第一个是要在对话框中显示的信息；第二个是文本输入框内默认显示的内容。Open这种方法可以建立一个新的窗口，它可以使用许多参数。第一个参数是要在新窗口中打开的文件的URL地址，这个参数是
必须的：第二个参数是Target，即打开文件窗口的名字；随后的参数都是对新窗口属性的描述。例如要打开一个没有工具条、定位框和目录框的窗口，这个窗口中显示“Search.htm”，可以使用语句：window.open("h2.htm","kkk","tooibar=nolocation=no")。C
lose这种方法用来关闭一个窗口。例如：window.close()。这行代码将关闭当前窗口。SetTimeout方法:用来设置一个计时器，该计时器以毫秒为单位，当所设置的时间到时，会自动的调用一个函数。SetTimeo
ut方法可以使用三个参数；第一个参数用来指定设定时间到后调用函数的名称；第二个参数用来设定计时器的时间间隔；第三个参数用来指定函数使用的脚本语言类型（JavaScript或VBScript）。源文件③Win
dow对象的事件Window对象包含上面讲到的大多数对象的事件，这里就不一一详细介绍，只介绍两个Window对象特有的事件：OnLoad事件和OnunLoad事件。OnLoadWindow对象的OnLoad事件在分析完HTML文件的所有代码内容后被激活。可以使用这个对象事件在网页加载时执行一定的任
务。例如，可以在网页被加载时同时加载一个广告页OnUnload在窗口被卸载时，也就是离开当前浏览窗口时，事件内容被激活。也可以在网页被卸载时同时加载一个广告页（3）Document对象Document对象指的是在浏览器窗口中显示的HTML文档。Document对象的属性，简单的如：文档
的背景，文档字体的颜色等等；复杂的如：各种链接和锚的结合体，Form以及ActiveX控件等等。Document对象提供了一些强有力的方法，使得可以在文档中直接传送HTML语句。Document对象作为Window对象包含下的一个对象，可以利用“Window.document”访问当前文档的属
性和方法，如果当前窗体中包含框架对象，可以使用表达式“Window.frames(n).document”来访问框架对象中显示的Document对象，式中的“n”表示框架对象在当前窗口的索引号。①Document对象的属性Linkcolor用来设置当前文档中超链接
显示的颜色。使用方法：window.document.linkcolor=”red”Bgcolor和Fgcolor这两个属性分别用来读取或者设置Document对象所代表的文档的背景和前景颜色。Title是Document对象的一个只读属性，它返回当前网页
的标题。LastModified是Document对象的一个只读属性,它返回当前网页最近一次被修改的时间.All属性是一个对象的序列，它是当前文档中的所有HTML标记组成的对象序列．②Document对象的方法Document对象
提供了一些在脚本模式中强有力的方法。这些方法使得用户可以在脚本中建立显示在用户浏览器中的HTML文档。WriteWrite方法用于将一个字符串放在当前文档中，放入的内容将被浏览器所识别。如果一般文本，将在页面显示；如果是HTML标记
，将被浏览器解释。OpenOpen方法用于打开要输入的文档。当前文档的内容将被清除掉，而新的字符串可以通过Write方法放入当前文档。ClearClear方法用于清除当前文档中的内容，更新屏幕。（4）L
ocation对象Location对象封装了窗口里显示的URL的信息。①Location对象的属性HrefLocation对象的href属性可以返回或者设置页面完整的URL地址。例如，如下语句将把浏览器连接到武汉工业学院的主页：Do
cument.Location.href=”http://www.whpu.com/”HostLocation对象的host属性可以返回网页主机名以及所连接的URL的端口Protocal这个属性用来返回当前使用的协议。例如，
现在正在浏览器中访问FTP站点，那这个属性将返回字符串“ftp”。②Location对象的方法Location对象支持三种方法。Assign将当前URL地址设置为其参数所给出的URL.Reload重载当前网址。Replace用参数中给出的网址替换当前网址。（5）History对象History对象
有一个唯一的只读属性：length。它可以返回历史记录表中的URL地址数目。Backback方法以指引浏览器在历史记录清单中向前移动。例如:window.history.backl将指引浏览器跳向历史记录中的前一条记录。Forwardfor
ward方法以指引浏览器在历史记录清单中向后移动。例如:window.history.forward2指引浏览器跳向历史记录中后面的第二条记录。Gogo方法知道浏览器跳向历史记录中的一条纪录。例如:window.history.go10将指引浏
览器跳向历史记录中的第十条记录。返回<HTML><HEAD><TITLE>这是一个测试网页</TITLE></HEAD><BODY><h1>标题测试</h1><h2>标题测试</h2><h3>标题测试</h3><h4>标题测试</h4>
<h5>标题测试</h5><h6>标题测试</h6></BODY></HTML><HTML><HEAD><TITLE>这是一个测试网页</TITLE></HEAD><BODY><pre><!--（图8-18无此标记）-->HTML是一种描述文档结构的标注语言，它使用一些约
定的标记对各种信息进行标注。</pre><!--（图8-18无此标记）--></BODY></HTML>返回返回<HTML><HEAD><TITLE>这是一个测试网页</TITLE></HEAD><BODY><STRONG>HTML</STRONG>是一种<EM>描述文
档结构</EM>的<U>标注语言</U>，<B>它使用</B>一些<I>约定的标记</I>对各种信息进行<S>标注<S>。</BODY></HTML>返回返回<HTML><HEAD><TITLE>测试页</TITLE></
HEAD><BODY><IMGalt="校庆"src="images/center1.gif"><IMGalt="校庆"src="images/center1.gif"border=8><IMGalt="校庆"src="images/center1.gif"height=150width
=150></BODY></HTML>返回返回<HTML><HEAD><TITLE>一个JavaScript计时器的应用</TITLE><SCRIPTLANGUAGE=JavaScript>varflag;interval=1000;functionchange(){var
today=newDate();text1.value=today.getHours()+":"+today.getMinutes()+":"+today.getSeconds();imerID=window.setTimeout("change()",interval);}</SCRIPT>
</HEAD><BODYonload="change()"><INPUTid=text1name=text1></BODY></HTML>返回返回
辽公网安备 21102102000191号
营业执照
