第8章网站建设

1、整理ppt第第8章章 网站建设网站建设 本章学习目标本章学习目标 本章主要讲解本章主要讲解Internet常用软件的使用方法。常用软件的使用方法。通过本章的学习，读者应掌握以下内容：通过本章的学习，读者应掌握以下内容： 建立网站的具体步骤建立网站的具体步骤 HTML与与CSS的基本知识的基本知识 浏览器端编程方法浏览器端编程方法 整理ppt本章目录本章目录8.1 网站的建立网站的建立 8.2 网页的制作语言网页的制作语言 8.3 级联样式表级联样式表CSS 8.4 网页脚本语言网页脚本语言JavaScript 整理ppt8.1 网站的建立网站的建立 建立网站的主要步骤如下：建立网站的主要步骤如

2、下：（1 1）首先在）首先在InternetInternet网上申请一个免费的主网上申请一个免费的主页空间和域名。页空间和域名。（2 2）在自己的计算机上设计、制作网页。）在自己的计算机上设计、制作网页。（3 3）当网页制作完成后，即可通过）当网页制作完成后，即可通过FTPFTP客户端客户端软件，将文件上传到软件，将文件上传到InternetInternet上。上。（4 4）最后，将网站登记到搜索引擎上，为自）最后，将网站登记到搜索引擎上，为自己所做的网站进行宣传。己所做的网站进行宣传。返回本章目录8.1.1 网页及网站设计概述网页及网站设计概述 1网页网页 从专业角度看，网页是一种用从专业角

3、度看，网页是一种用HTML撰写的文档。撰写的文档。HTML的全文是的全文是“HyperText Markup Language”，中文意思为，中文意思为“超超文本标记语言文本标记语言”。“超文本超文本”意指页面内除文本外，还可包意指页面内除文本外，还可包含图片、链接、甚至音频、视频等非文字元素。含图片、链接、甚至音频、视频等非文字元素。 Internet用户访问网站时所看到的第一个网页，称作主页用户访问网站时所看到的第一个网页，称作主页（Homepage或或Home Page）。）。 庞大的庞大的WWW资源库中的所有信息，都是通过这种简单的、资源库中的所有信息，都是通过这种简单的、易于理解的超

4、链接方式组织起来的。易于理解的超链接方式组织起来的。 在在Internet上进行网页浏览的过程如图上进行网页浏览的过程如图8-1示意了浏览器与示意了浏览器与Web服务器之间的关系。服务器之间的关系。 返回本章目录图8-1 Web资源访问过程 Web 服务器浏览器请求响应2网站规划设计网站规划设计规划网站时，一般应注意以下几点：规划网站时，一般应注意以下几点：（1）HTML文件的显示效果与其自身版本、浏览器对文件的显示效果与其自身版本、浏览器对HTML的的处理方法有关。处理方法有关。（2）在确定网站的总体结构时，应遵循）在确定网站的总体结构时，应遵循“层次分明层次分明”的基本的基本原则。原则。（

5、3）对一般网站而言，在选取材料时，应以文本信息为主，）对一般网站而言，在选取材料时，应以文本信息为主，以多媒体材料为辅。以多媒体材料为辅。返回本章目录（4）对主页要进行精雕细刻。）对主页要进行精雕细刻。（5）网站的内容要经常更新。）网站的内容要经常更新。（6）网页中的文本内容应简明扼要。）网页中的文本内容应简明扼要。3网页的主要内容网页的主要内容网页中的重要内容有：网页中的重要内容有：（1）背景。）背景。（2）文本。文本是一般网页中最主要的内容。与一般字处理）文本。文本是一般网页中最主要的内容。与一般字处理软件类似，网页编辑软件也可以设置页面中文本的各种属性，软件类似，网页编辑软件也可以设置页

6、面中文本的各种属性，此外，还可以设置段落格式，如行距、缩进、对齐方式等。当此外，还可以设置段落格式，如行距、缩进、对齐方式等。当然，还可以将文本设置为超链接。然，还可以将文本设置为超链接。（3）表格。表格是将大量数据以简洁明快的方式展示给浏览）表格。表格是将大量数据以简洁明快的方式展示给浏览者的有效方式。表格还是进行页面布局的有力工具。者的有效方式。表格还是进行页面布局的有力工具。返回本章目录 （4）框架。框架是进行页面布局的另一工具。借助框架，）框架。框架是进行页面布局的另一工具。借助框架，可将页面划分为若干区域，其中每个区域都对应一个独立的可将页面划分为若干区域，其中每个区域都对应一个独立

7、的HTML文件。但框架是在文件。但框架是在HTML3.2及以上版本中的功能，需要及以上版本中的功能，需要IE4.0或或NC4.0，才能正确显示。，才能正确显示。 （5）图像。图像是网页吸引访问者的重要手段。大小适中、）图像。图像是网页吸引访问者的重要手段。大小适中、制作精美的图像能够在很大程度上增加访问者的访问兴趣。最制作精美的图像能够在很大程度上增加访问者的访问兴趣。最好用表格对图像位置进行精确定位。好用表格对图像位置进行精确定位。 （6）表单。表单用于从访问者处获取信息。表单中可包含）表单。表单用于从访问者处获取信息。表单中可包含按钮、文本框等。按钮、文本框等。4 4网页的优化网页的优化

8、优化的内容大致包括：减少数据量、改善视觉效果、提高优化的内容大致包括：减少数据量、改善视觉效果、提高网站对浏览器的兼容性等。网站对浏览器的兼容性等。返回本章目录 下面是几个常用的优化原则。下面是几个常用的优化原则。 （1 1）正确选择图像格式。）正确选择图像格式。 （2 2）提供多个版本。）提供多个版本。 （3 3）优化配色方案。）优化配色方案。 （4 4）突出网站特点。）突出网站特点。 一般情况下，对于提供专门资源的网站而言，进行内容取一般情况下，对于提供专门资源的网站而言，进行内容取舍时应遵循舍时应遵循“精精”的原则，以求突出重点和特色。的原则，以求突出重点和特色。此外，在优化网站时，还应

9、考虑如何为读者提供增值服务。此外，在优化网站时，还应考虑如何为读者提供增值服务。 返回本章目录8.1.2 免费网页空间的申请免费网页空间的申请 要建立网站首先必须在要建立网站首先必须在InternetInternet上获得一块存储网站的空间，上获得一块存储网站的空间，根据所制作网站用途的不同，目前有两种方式可获得存储空间：根据所制作网站用途的不同，目前有两种方式可获得存储空间：一种是租用虚拟主机，另一种是申请免费空间。一种是租用虚拟主机，另一种是申请免费空间。1 1选择免费网页空间的原则选择免费网页空间的原则 （1 1）测算自己的网站大致要多少存储空间，然后到相应的站）测算自己的网站大致要多少

10、存储空间，然后到相应的站点去申请。点去申请。 （2 2）所选择的网站附带的免费服务越多越好。）所选择的网站附带的免费服务越多越好。 （3 3）所申请的网站最好支持）所申请的网站最好支持ASPASP（动态服务端网页）或（动态服务端网页）或PHPPHP，并且还可以挂接数据库。并且还可以挂接数据库。 （4 4）访问速度越快越好。）访问速度越快越好。 （5 5）一定要选择能用）一定要选择能用FTPFTP方式上传网页文件的站点，以便对网方式上传网页文件的站点，以便对网站进行维护。站进行维护。返回本章目录 （6）应选择信誉度高的免费服务站点。）应选择信誉度高的免费服务站点。2如何查找提供免费个人网页的站点

11、如何查找提供免费个人网页的站点 可以利用搜索引擎来查找提供免费个人网页的站点。例如，可以利用搜索引擎来查找提供免费个人网页的站点。例如，在浏览器的地址栏中输入，启动网易搜索引擎，然后依次选择在浏览器的地址栏中输入，启动网易搜索引擎，然后依次选择“电脑网络电脑网络”“免费资源免费资源”“免费建站资源免费建站资源”。3申请免费网页空间申请免费网页空间 应尽可能在国内站点申请。应尽可能在国内站点申请。 按要求填写一些必要的资料，即可完成申请。按要求填写一些必要的资料，即可完成申请。顺便指出，目前有些空间提供商收取的费用十分低廉（如顺便指出，目前有些空间提供商收取的费用十分低廉（如10元元/月），应尽

12、量为网站申请付费空间，以享受更为全面的服务。月），应尽量为网站申请付费空间，以享受更为全面的服务。 返回本章目录8.1.3 上传个人网页 LeapFTP是一个功能丰富、性能稳定、操作简单的是一个功能丰富、性能稳定、操作简单的FTP客客户端软件，十分适合一般用户使用。户端软件，十分适合一般用户使用。利用利用LeapFTP上传网页的一般步骤如下：上传网页的一般步骤如下： （1）下载）下载LeapFTP安装程序，将其安装在本地计算机上。安装程序，将其安装在本地计算机上。 （2）启动）启动LeapFTP。 （3）在服务器网址栏输入空间提供商提供的）在服务器网址栏输入空间提供商提供的FTP地址、用户地址

13、、用户名（名（User）、口令（）、口令（Pass）和端口号（）和端口号（Port），然后单击），然后单击“连连接到服务器（接到服务器（Connect to server）”按钮，建立连接。按钮，建立连接。 （4）传送文件）传送文件 连接成功后，连接成功后，LeaoFTP窗口与图窗口与图8-4类似。完成对源文件类似。完成对源文件（或目录）及目的位置的选择后，将所选源文件（或目录）直（或目录）及目的位置的选择后，将所选源文件（或目录）直接拖动到目的位置释放即可完成上传任务。接拖动到目的位置释放即可完成上传任务。 返回本章目录图8-4 利用LeapFTP访问远程目录 返回本章目录 （5）完成上传后

14、，单击）完成上传后，单击“断开连接（断开连接（Disconnect from Server）”按钮。断开与服务器的连接，然后退出按钮。断开与服务器的连接，然后退出LeapFTP。在上传网页文件时应注意以下几个方面的问题：在上传网页文件时应注意以下几个方面的问题： l l 设计的网站中包含的所有文件都要全部上传（包括图片文设计的网站中包含的所有文件都要全部上传（包括图片文件等）。件等）。 l l 网页文件在进行超级链接时一定要使用相对路径。网页文件在进行超级链接时一定要使用相对路径。 l l 务必将个人网页的主页文件名设为空间提供商所指定的文务必将个人网页的主页文件名设为空间提供商所指定的文件名

15、，通常为件名，通常为index.htm或或default.htm。需要特别强调的是最。需要特别强调的是最好全部用英文名字。好全部用英文名字。 l l应保证网站各处的文件名（包括应保证网站各处的文件名（包括HTML文件中作为链接目标文件中作为链接目标的文件名）是严格一致的。的文件名）是严格一致的。 返回本章目录8.1.4 网站的宣传网站的宣传 将网站登记到著名的搜索引擎上，是宣传网站的常用方法。将网站登记到著名的搜索引擎上，是宣传网站的常用方法。 下面以搜狐为例介绍如何将一个网站加入到搜索引擎上。下面以搜狐为例介绍如何将一个网站加入到搜索引擎上。 （1）在搜狐主页的右上角单击）在搜狐主页的右上角

16、单击“网站登陆网站登陆”链接，进入网页链接，进入网页登记页面。登记页面。 （2）在出现的页面中根据具体情况进行选择，逐级深入，最）在出现的页面中根据具体情况进行选择，逐级深入，最终进入资料填写页面。终进入资料填写页面。 （3）填写网站名称、网站地址，完成后单击）填写网站名称、网站地址，完成后单击“进行下一步进行下一步”按钮。按钮。 （4）按要求填写其他信息。完成后单击）按要求填写其他信息。完成后单击“进行下一步进行下一步”按钮。按钮。 （5）如果信息符合要求，则出现）如果信息符合要求，则出现 “提交成功提交成功”页面。页面。 （6）如果信息被正确收入，可得到一封）如果信息被正确收入，可得到一封

17、E-mail。 返回本章目录8.2 网页的制作语言网页的制作语言8.2.1 HTML语言的结构及语法规范语言的结构及语法规范 HTML语言的结构语言的结构 HTML（超文本标记语言）是一种描述文档结构的语言，（超文本标记语言）是一种描述文档结构的语言，它利用标签来描述文档结构、指定文档内容在浏览器中的显示它利用标签来描述文档结构、指定文档内容在浏览器中的显示格式、位置等。格式、位置等。 一个一个HTML文件包含两部分信息，其一是文本内容，其二即文件包含两部分信息，其一是文本内容，其二即为标签。标签有分单独出现的标签和成对出现的标签两种。为标签。标签有分单独出现的标签和成对出现的标

18、签两种。整个整个HTML文档由文档头和文档主体两部分构成，这两部分文档由文档头和文档主体两部分构成，这两部分内容分别用内容分别用标签和标签和标签界定。文档头中包含标签界定。文档头中包含文档标题等属性；文档主体则规定了将在浏览器窗口中显示的文档标题等属性；文档主体则规定了将在浏览器窗口中显示的内容及其显示格式。内容及其显示格式。 返回本章目录华北航天工业学院华北航天工业学院这是一个这是一个HTML的测试文件的测试文件 返回本章目录 HTML HTML语言的语法规范语言的语法规范在使用在使用HTML时，应注意以下几点：时，应注意以下几点：l l HTML文档的标签是可以嵌套的。文档的

19、标签是可以嵌套的。l l 有些标签（例如有些标签（例如）没有任何属性，而有些标签（例）没有任何属性，而有些标签（例如如）则可包含一个或多个属性。）则可包含一个或多个属性。l l 在在HTML中有三个字符具有特殊的意义，即中有三个字符具有特殊的意义，即“”和和“&”。l l 元素名称对大小写不敏感。元素名称对大小写不敏感。l l 一个标签可以有多个属性，属性及其属性值对大小写不敏一个标签可以有多个属性，属性及其属性值对大小写不敏感，不同属性间用空格分隔。感，不同属性间用空格分隔。l l HTML文件中，有些标签只能出现在文档头部中，而绝大多文件中，有些标签只能出现在文档头部中，而绝大多数标签只能

20、出现在文档主体中。数标签只能出现在文档主体中。返回本章目录8.2.2 网页中文本的基本格式网页中文本的基本格式 下面介绍一些常用的有关下面介绍一些常用的有关WebWeb页文本格式的标签。页文本格式的标签。1 1标签标签 标签用来给网页命名，网页的名称将被显标签用来给网页命名，网页的名称将被显示在浏览器的标题栏中。示在浏览器的标题栏中。2标签标签 标签是成对出现的。位于标签是成对出现的。位于和和之间之间的内容是的内容是HTML文档中的标题。标题文字都以粗体显文档中的标题。标题文字都以粗体显示，上级标题总比下级标题更大些，具体大小与浏览示，上级标题总比下级标题更大些，具体大小与浏览器有关。器有关。

21、返回本章目录3预格式化文本标签预格式化文本标签 为预格式化标签。它是成对出现的。对位为预格式化标签。它是成对出现的。对位于于和和之间的内容，浏览器将严格按照之间的内容，浏览器将严格按照编辑编辑HTML文档时的字符及位置进行显示。文档时的字符及位置进行显示。 图8-11 有标签 图8-12 无标签 返回本章目录4和和标签标签 “BR”即即Break，是换行标签，它是单独出现的。，是换行标签，它是单独出现的。的作用相当于回车符。的作用相当于回车符。 “P”即即Paragraph（段落）。（段落）。标签用于划分段标签用于划分段落，作用是插入一个空行。它可以单独使用，也可以落，作用是插入一个空行。它可

22、以单独使用，也可以成对使用。成对使用。5标签标签 标签是单独出现的标签。其作用是换行并标签是单独出现的标签。其作用是换行并画出一条水平线。该标签的属性有：画出一条水平线。该标签的属性有：size属性、属性、width属性、属性、align属性、属性、color属性属性 返回本章目录6字符格式标签字符格式标签 HTML文档的字符格式标签主要有文档的字符格式标签主要有、和、和四种。它们都是成对出现的。四种。它们都是成对出现的。7标签标签 是字体标签，它是成对出现的，用于指是字体标签，它是成对出现的，用于指定文本的字体大小、颜色等。该标签可包含若干属性，定文本的字体大小、颜色等。该标签可包含若干属性

23、，其中其中COLOR属性指定文字颜色，颜色可以用属性指定文字颜色，颜色可以用6位十六位十六进制数表示，如进制数表示，如；SIZE属性指定相对尺寸。属性指定相对尺寸。 返回本章目录 另外，如果用户想要设置网页的背景色和文字颜另外，如果用户想要设置网页的背景色和文字颜色，可以将色，可以将标签扩充为标签扩充为 其中其中“x”为为6位十六进制数，代表颜色位十六进制数，代表颜色RGB（red-green-blue，红，红-绿绿-蓝）值，其格式为蓝）值，其格式为rrggbb。 8.2.3 文档的超链接 使用超链接技术可以使顺序存放的文件在一定程使用超链接技术可以使顺序存放的文件在一定程度上可被随机访问。度

24、上可被随机访问。 就本质而言，超链接是在并无物理联系的两段文就本质而言，超链接是在并无物理联系的两段文字或两个文件建立的逻辑联系。字或两个文件建立的逻辑联系。 返回本章目录8.2.3 文档的超链接 使用超链接技术可以使顺序存放的文件在一定程使用超链接技术可以使顺序存放的文件在一定程度上可被随机访问。度上可被随机访问。 就本质而言，超链接是在并无物理联系的两段文就本质而言，超链接是在并无物理联系的两段文字或两个文件建立的逻辑联系。字或两个文件建立的逻辑联系。 统一资源定位器统一资源定位器URL URL（Uniform Resource Locator）即统一资）即统一资源定位器，它

25、是文件名的扩展，指出了文件在源定位器，它是文件名的扩展，指出了文件在Internet中的位置。中的位置。 URL由协议名、服务器地址、文件在服务器中的由协议名、服务器地址、文件在服务器中的路径（即目录）和文件名四部分构成。路径（即目录）和文件名四部分构成。URL的格式为的格式为 返回本章目录protocol:/machinename:port/directory/其中其中 l l protocol是访问资源所采用的协议，即访问该资是访问资源所采用的协议，即访问该资源的方法，它可以是：源的方法，它可以是：HTTP、FTP等。等。 l l 是存放资源主机的是存放资源主机的I

26、P地址，通常地址，通常以字符形式出现，如以字符形式出现，如。 l l port是访问资源所使用的端口号。是访问资源所使用的端口号。 l l directory和是资源的路径和文件名。和是资源的路径和文件名。 与单机系统绝对路径、相对路径的概念类似，与单机系统绝对路径、相对路径的概念类似，URL也有绝对与相对之分。绝对也有绝对与相对之分。绝对URL、相对、相对URL是相是相对于当前访问的对于当前访问的URL而言的。而言的。 返回本章目录 浏览器在识别浏览器在识别URL时，遵循下列规则：时，遵循下列规则： l l 当协议（当协议（http:/）被省略时，则认为与当前页面）被省略时，则认为与当前页面

27、的协议相同。的协议相同。 l l 当服务器名称被省略时，则认为是当前服务器。当服务器名称被省略时，则认为是当前服务器。 l l 当文件路径被省略时，则认为是当前目录。当文件路径被省略时，则认为是当前目录。 l l 当文件名被省略时，则认为是目录中的默认文件。当文件名被省略时，则认为是目录中的默认文件。 超链接超链接1链接到其他站点（文档）链接到其他站点（文档） 在在HTML文档中，当需要链接其他文档时，应使用文档中，当需要链接其他文档时，应使用标签。其基本格式为标签。其基本格式为 返回本章目录zzz 实际上这个实际上这个“zzz”在在HTML文件中充当的是指针的文件中充当的是指针

28、的角色，通常被称为锚标，是链接的源点。角色，通常被称为锚标，是链接的源点。 在制作在制作HTML文档时，需要知道目标的文档时，需要知道目标的URL。对。对于于Internet上的资源而言，在用浏览器查看时，将鼠上的资源而言，在用浏览器查看时，将鼠标移至资源锚标处，其标移至资源锚标处，其URL一般会在浏览器的状态栏一般会在浏览器的状态栏中显示出来。中显示出来。 此外，制作此外，制作HTML文档时，对能够确定关系的一文档时，对能够确定关系的一组资源（比如在同一个目录中）应采用相对组资源（比如在同一个目录中）应采用相对URL，这，这不仅简单，而且便于维护。但是，引用外部资源时，不仅简单，而且便于维护

29、。但是，引用外部资源时，只能使用绝对只能使用绝对URL。 返回本章目录2链接到本页的另一位置或其他页面中的特定位置。链接到本页的另一位置或其他页面中的特定位置。 上面提到的超链接用于链接其他页面，这种链接方上面提到的超链接用于链接其他页面，这种链接方式称做远程链接。式称做远程链接。 事实上，超链接可以指向本页面中的任何位置，这事实上，超链接可以指向本页面中的任何位置，这种链接方式叫做本地链接。种链接方式叫做本地链接。 在某一位置做在某一位置做“记号记号”需要使用下列格式的需要使用下列格式的标签：标签： name属性将放置该标记的地方标记为属性将放置该标记的地方标记为“KKK”，KKK是一个全文

30、唯一的标记串。这样，就在放置标记是一个全文唯一的标记串。这样，就在放置标记的地方做了一个叫做的地方做了一个叫做“KKK”的的“记号记号”。做好。做好“记记号号”后，可以用下列方法来建立指向它的超链接：后，可以用下列方法来建立指向它的超链接：转向下一处转向下一处 返回本章目录 源文档在源文档在IE5中的显示效果如图中的显示效果如图8-14所示。当用户所示。当用户单击锚标单击锚标“电子邮件电子邮件”后，浏览器将载入目标文件并后，浏览器将载入目标文件并自标记位置开始显示，如图自标记位置开始显示，如图8-15所示。所示。 返回本章目录 图8-14 源文档的显示效果 图8-15 目标文档的显示效果 8.

31、2.4 在网页中使用图像在网页中使用图像1在网页中显示图像在网页中显示图像 在浏览器上显示的图像必须满足特定的格式，目前在浏览器上显示的图像必须满足特定的格式，目前使用的浏览器通常支持使用的浏览器通常支持GIF和和JPEG格式的图像。格式的图像。 在网页中加入图像所用的标签是在网页中加入图像所用的标签是，该标签的，该标签的主要属性有：主要属性有：src属性、属性、height属性、属性、width属性、属性、border属性、属性、alt属性属性 下面通过一个示例来说明下面通过一个示例来说明标记的使用方法。标记的使用方法。图像的文件名为图像的文件名为“cake.jpg”，它是当前目录下的子，它

32、是当前目录下的子目录中的文件。其目录中的文件。其HTML源文件如下：源文件如下： 返回本章目录 测试网页测试网页生日快乐生日快乐 返回本章目录 顺便指出，如果在同一文件中需要反复使用一个相顺便指出，如果在同一文件中需要反复使用一个相同的图像文件时，最好在同的图像文件时，最好在标记中使用相对标记中使用相对URL，而不使用绝对而不使用绝对URL。 图8-16 标签功能示意图 返回本章目录 2将图像设置为锚标将图像设置为锚标 如果在超链接标签如果在超链接标签和和的中间放置一个的中间放置一个标签，则可生成一个图像锚标。例如：标签，则可生成一个图像锚标。例如： 8.2.5 框架页面框架页面 框架能够将浏

33、览器窗口划分成数个相对独立的子窗框架能够将浏览器窗口划分成数个相对独立的子窗口，每个子窗口可以显示不同的页面。用框架划分屏口，每个子窗口可以显示不同的页面。用框架划分屏幕空间可以优化页面的视觉效果，并可有效地提高屏幕空间可以优化页面的视觉效果，并可有效地提高屏幕利用率。幕利用率。 返回本章目录 与框架有关的与框架有关的HTML语法为语法为 其中其中可以在用可以在用户浏览器不支持框架结构时显示一些信息，以免用户户浏览器不支持框架结构时显示一些信息，以免用户对空白窗口不知所措。该标签是成对出现的，位于对空白窗口不知所措。该标签是成对出现的，位于和和之间的内容就是网之间的内容就是网页编辑者希望告诉用

34、户的信息，例如页编辑者希望告诉用户的信息，例如“您的浏览器不您的浏览器不支持框架显示支持框架显示”等。等。 返回本章目录 子窗口由子窗口由指定，并且可以嵌套。将在指定，并且可以嵌套。将在子窗口中显示子窗口中显示HTML文档的文档的URL由由标签的标签的src属性决定。属性决定。8.2.6 表单表单 标签标签 表单标签表单标签是成对出现的，位于是成对出现的，位于和和之间的内容就是一个表单。之间的内容就是一个表单。标签标签有有action和和method两个属性。两个属性。1action属性属性 该属性用于规定服务器方用于接收表单信息的程序该属性用于规定服务器方用于接收表单信息的程序

35、文件名（包括路径）。文件名（包括路径）。返回本章目录 例如：表单例如：表单 被提交后，被提交后，Web服务器上的服务器上的“login.asp”就将开始就将开始运行，以接收用户输入的信息。运行，以接收用户输入的信息。2method属性属性 该属性用于规定表单信息的传送方式，属性值可为该属性用于规定表单信息的传送方式，属性值可为post或或get，默认值为，默认值为get。 在在与与之间，可以使用除之间，可以使用除以外的任何以外的任何HTML标签，这一特点使得表单可以具有标签，这一特点使得表单可以具有非常丰富的格式。非常丰富的格式。 返回本章目录 在在FORM的开始与结束标记之间，除了可以使用以

36、的开始与结束标记之间，除了可以使用以前介绍的那些标签外，还有三个特殊标签，即前介绍的那些标签外，还有三个特殊标签，即INPUT（用于在浏览器窗口中定义一个可以供用户输入的单（用于在浏览器窗口中定义一个可以供用户输入的单行文本框、单选钮或复选框等等）、行文本框、单选钮或复选框等等）、SELECT（用于（用于在浏览器窗口中定义一个列表框）和在浏览器窗口中定义一个列表框）和TEXTAREA（用（用于在浏览器窗口中定义多行文本框）。于在浏览器窗口中定义多行文本框）。 标签标签 是表单中最常用的标签。它是一个单独使是表单中最常用的标签。它是一个单独使用的标签，必须嵌套于表单

37、中，用于定义一个输入域。用的标签，必须嵌套于表单中，用于定义一个输入域。通常在网页上所见到的文本框、按钮等都是由这个标通常在网页上所见到的文本框、按钮等都是由这个标记定义的。记定义的。 返回本章目录 下面是下面是INPUTINPUT标签的标准格式：标签的标准格式：INPUT type= 其中其中typetype属性用于指定该输入域的输入方式（如文本属性用于指定该输入域的输入方式（如文本框、单选钮或复选框等）。框、单选钮或复选框等）。1 1文字和密码输入文字和密码输入 返回本章目录 图8-18 文字和密码示例 属性属性name=name=“姓名姓名”，定义了文本框在这个表单中的名，定义了文本框在

38、这个表单中的名字叫字叫“姓名姓名”。当用户在这个文本框中输入信息并送。当用户在这个文本框中输入信息并送到到WebWeb服务器后就激活了相应的程序。服务器后就激活了相应的程序。属性属性value=value=“HTTP:/HTTP:/”，表示该文本框的默认值为，表示该文本框的默认值为“HTTPHTTP：/”。对密码输入框而言，用户输入的任何字符，都将被显对密码输入框而言，用户输入的任何字符，都将被显示为示为“* *”。此外，有时还需要限制用户输入字符串的长度，此时此外，有时还需要限制用户输入字符串的长度，此时应设定应设定maxlengthmaxlength（最大长度）属性。例如，一般汉（最大长度

39、）属性。例如，一般汉族人的姓名至多为四个汉字即族人的姓名至多为四个汉字即8 8个半角字符，如个半角字符，如姓名：姓名：input type=text name= maxlength=8 返回本章目录 图8-19 单选钮和复选框用法示例“重选重选”按钮可执行按钮可执行“重置重置”操作，即当用户单击此按钮后，操作，即当用户单击此按钮后，表单中所有输入域中的信息将被重新设置为默认值，以便用户表单中所有输入域中的信息将被重新设置为默认值，以便用户重新输入信息。重新输入信息。重置按钮的格式为重置按钮的格式为 返回本章目录 标签和标签和标签标签 标签必须嵌套于标签必须嵌套于标签中使用，用于定

40、义列表标签中使用，用于定义列表框。框。标签必须成对使用。而标签必须成对使用。而标签必须嵌套标签必须嵌套标签中使用，用于定义将出现在列表框中的内容。标签中使用，用于定义将出现在列表框中的内容。 在在标签中，如果包含标签中，如果包含multiplemultiple，则意味着列表框支，则意味着列表框支持同时选择多项的操作。而在默认情况下，只允许选择单项持同时选择多项的操作。而在默认情况下，只允许选择单项 在在标签中，如果包含标签中，如果包含selectedselected，则意味着该选项在，则意味着该选项在初始状态下是被选择的。初始状态下是被选择的。 返回本章目录图8-20 列表框用法示例 8.2.

41、7 表格表格 表格是表格是HTMLHTML文档中的重要元素，它除具有一般表格的功能外，文档中的重要元素，它除具有一般表格的功能外，还经常被用于编排版面。还经常被用于编排版面。 图图8-218-21示意了一个简单的表格。该表格由三部分组成：标题示意了一个简单的表格。该表格由三部分组成：标题（CaptionCaption）、表头和表数据。其中，标题用于概述表格内容、）、表头和表数据。其中，标题用于概述表格内容、功能等，可视需要取舍；表头用于定义列标题，也可视需要取功能等，可视需要取舍；表头用于定义列标题，也可视需要取舍；表数据是表格的主要内容，一般是必须的。舍；表数据是表格的主要内容，一般是必须的

42、。 在在HTMLHTML中，组成表格的小方格称为单元格（中，组成表格的小方格称为单元格（CellCell）；用于分）；用于分割空间以构成表格的直线称为框线（割空间以构成表格的直线称为框线（BorderBorder）。）。 返回本章目录返回本章目录图8-21 表格示例 HTML表格的语法结构表格的语法结构与表格有关的许多标签都需要嵌套使用。一个单元格是通过与表格有关的许多标签都需要嵌套使用。一个单元格是通过标签、标签、标签和标签和（或（或）标签嵌套定义）标签嵌套定义的，其描述定位顺序是表、行和列。的，其描述定位顺序是表、行和列。学生基本情况表学生基本情况表姓名姓名性别性别出生日期出

43、生日期 返回本章目录返回本章目录 与表格有关的标签与表格有关的标签1标签标签 标签是表格的标识符，用于界定表格的范围。标签是表格的标识符，用于界定表格的范围。标签可以嵌套在标签可以嵌套在标签中，以构造表中表。标签中，以构造表中表。标签的主要属性有：标签的主要属性有：border属性、属性、cellspacing属性、属性、cellpadding属性和属性和width属性。属性。2标签标签 标签应成对出现。位于标签应成对出现。位于和和标签之间的内容为表格标题。标签之间的内容为表格标题。标签有两个可选属性：标签有两个可选属性：align和和valign。其中，。其中，align的值可

44、为的值可为left、right或或center，；，；valign的值可为的值可为top或或bottom。3标签标签标签是成对出现的标签，用于界定表格中的行。标签是成对出现的标签，用于界定表格中的行。标签有两个可选的属性：标签有两个可选的属性：align和和valign。 返回本章目录4标签和标签和标签标签 标签和标签和标签都是用来定义单元格的，都是成对标签都是用来定义单元格的，都是成对出现的标签且应嵌套在出现的标签且应嵌套在标签内使用。这两个标签内几乎标签内使用。这两个标签内几乎可以包含所有的可以包含所有的HTML标签（包括标签（包括标签）。标签）。在默认情况下，在默认情况下，所界定的单元格

45、中内容将被加粗显示。所界定的单元格中内容将被加粗显示。除此之外，除此之外，标签与标签与标签的的属性、功能是完全相标签的的属性、功能是完全相同的。同的。 （或（或）标签还有两个属性，一个是）标签还有两个属性，一个是width属性；属性；另一个是另一个是height属性。属性。 此外，还可以用此外，还可以用（或（或）的）的rowspan属性、属性、colspan属性来定义复杂表格。属性来定义复杂表格。 返回本章目录4标签和标签和标签标签 标签和标签和标签都是用来定义单元格的，都是成对标签都是用来定义单元格的，都是成对出现的标签且应嵌套在出现的标签且应嵌套在标签内使用。这两个标签内几乎标签内使用。这

46、两个标签内几乎可以包含所有的可以包含所有的HTML标签（包括标签（包括标签）。标签）。在默认情况下，在默认情况下，所界定的单元格中内容将被加粗显示。所界定的单元格中内容将被加粗显示。除此之外，除此之外，标签与标签与标签的的属性、功能是完全相标签的的属性、功能是完全相同的。同的。 （或（或）标签还有两个属性，一个是）标签还有两个属性，一个是width属性；属性；另一个是另一个是height属性。属性。 此外，还可以用此外，还可以用（或（或）的）的rowspan属性、属性、colspan属性来定义复杂表格。属性来定义复杂表格。 返回本章目录 8.3 级联样式表级联样式表CSS 级联样式表（级联样式

47、表（Casding Style Sheet）简称）简称CSS，是以，是以HTML为基础的语言，用于定义网页中内容的格式。其主要特点是，为基础的语言，用于定义网页中内容的格式。其主要特点是，可以独立地为网页中的各种对象定义格式，并可将一种格式可以独立地为网页中的各种对象定义格式，并可将一种格式用于多个网页。用于多个网页。 IE3.0和和NC4.0及以后的版本都支持及以后的版本都支持CSS。 CSS克服了克服了HTML文档内容与格式说明相混合的缺陷，且提文档内容与格式说明相混合的缺陷，且提供了远比供了远比HTML丰富的格式。此外在使用方法上，也比丰富的格式。此外在使用方法上，也比HTML灵活了许多

48、。灵活了许多。 定义定义CSS样式时，不必考虑浏览器的兼容性。不支持样式时，不必考虑浏览器的兼容性。不支持CSS的的浏览器能够自动忽略浏览器能够自动忽略CSS样式。样式。 返回本章目录8.3.1 样式定义的语法规则样式定义的语法规则1选择符的定义方法选择符的定义方法 下面是一个下面是一个HTML文档的头部，其中通过文档的头部，其中通过CSS，对，对HTML标标签签和和的格式进行了修改。的格式进行了修改。CSS示例示例H1color:redH2color:green 位于位于和和之间的部分就是样式定义。其中：之间的部分就是样式定义。其中：H1和和H2称为选择符，称为选择符，color称为属性，称

49、为属性，red、green则称为属性则称为属性值。值。 样式定义的一般格式如下：样式定义的一般格式如下： 选择符选择符 属性：值；属性：值；属性：值；属性：值； 返回本章目录2选择符的分类选择符的分类第一类选择符为第一类选择符为HTML标签名，如标签名，如P、BODY、A等。等。第二类选择符为类。可以使同一元素具有不同的格式。第二类选择符为类。可以使同一元素具有不同的格式。与元素相关联的，称为相关类选择符，反之称为独立类选择与元素相关联的，称为相关类选择符，反之称为独立类选择符。符。第三类选择符为第三类选择符为ID。其功能与独立类选择符相同，定义方法。其功能与独立类选择符相同，定义方法也类似。

50、只是定义时，以也类似。只是定义时，以“#”而不是以而不是以“.”开始。开始。ID选择符对选择符对JavaScript提供了较强的支持，如果不需编写浏提供了较强的支持，如果不需编写浏览器端脚本而只是用览器端脚本而只是用CSS指定格式，则应选择类选择符。指定格式，则应选择类选择符。3选择符的组合、继承和关联选择符的组合、继承和关联在定义选择符时，如果需要赋予某些操作符一些相同的属性在定义选择符时，如果需要赋予某些操作符一些相同的属性值，则可以进行组合声明。值，则可以进行组合声明。在文档中，选择符是可以嵌套的。在嵌套结构中，除另有定在文档中，选择符是可以嵌套的。在嵌套结构中，除另有定义的情况外，位于

51、内层的选择符将自动继承外层选择符的格义的情况外，位于内层的选择符将自动继承外层选择符的格式。式。 返回本章目录当两个或多个选择符嵌套使用时，可能需要使嵌套结构中位当两个或多个选择符嵌套使用时，可能需要使嵌套结构中位于内层选择符中的内容具有某种特定的格式，这时可以对选于内层选择符中的内容具有某种特定的格式，这时可以对选择符进行关联定义。择符进行关联定义。增加关联格式说明前后的源文档在浏览器中的显示效果如图增加关联格式说明前后的源文档在浏览器中的显示效果如图8-22及及8-23所示。所示。 图8-22 未关联选择符的嵌套效果 图8-23 关联后选择符的嵌套效果 返回本章目录8.3.2 样式表的定义

52、模式样式表的定义模式在上面的举例中，样式定义是在在上面的举例中，样式定义是在标签中进行的。事标签中进行的。事实上，可以采用若干种模式进行样式定义。实上，可以采用若干种模式进行样式定义。1在在HTML文档的头部定义样式文档的头部定义样式这就是前面举例中采用的模式，在此不赘述。这就是前面举例中采用的模式，在此不赘述。2在在HTML标签内定义样式标签内定义样式可以在可以在HTML标签内加入临时有效的样式，采用这种方式所定标签内加入临时有效的样式，采用这种方式所定义的样式不是永久有效的。义的样式不是永久有效的。3 3在独立的样式表文件中定义样式在独立的样式表文件中定义样式可以将样式定义存储在独立文件中

53、。建立样式表文件后，就可以将样式定义存储在独立文件中。建立样式表文件后，就可以在多个可以在多个HTMLHTML文档中进行调用。文档中进行调用。这种方法的最大优点是，可以十分便捷地对大量网页的格式这种方法的最大优点是，可以十分便捷地对大量网页的格式进行修改，只要这些网页调用了相同的样式表文件。进行修改，只要这些网页调用了相同的样式表文件。 返回本章目录一个简单的样式表文件内容如下所示。一个简单的样式表文件内容如下所示。Pfont-family:华文隶书华文隶书.d-centertext-align:center如果上面样式表文件的文件名为如果上面样式表文件的文件名为sample.css，且与下列

54、源文，且与下列源文档共处同一目录，则可以用链接方式或导入方式引用。档共处同一目录，则可以用链接方式或导入方式引用。 链接方式：链接方式： 导入方式：导入方式： 返回本章目录8.4 网页脚本语言网页脚本语言JavaScript8.4.1 JavaScript的基础知识的基础知识1脚本语言概述脚本语言概述脚本是一种可以完成某些处理和计算功能的小程序段。与一脚本是一种可以完成某些处理和计算功能的小程序段。与一般的编程语言不同，这些程序在运行前不需要一次性编译，般的编程语言不同，这些程序在运行前不需要一次性编译，而是在运行过程中被逐行解释、执行。在脚本中所使用的命而是在运行过程中被逐行解释、执行。在脚

55、本中所使用的命令和语句称为脚本语言。令和语句称为脚本语言。脚本语言是对脚本语言是对HTML的一个重要补充。的一个重要补充。就语法规范和语句格式而言，脚本语言的语法与一般的编程就语法规范和语句格式而言，脚本语言的语法与一般的编程语言并没有什么区别，只是为了保证安全，脚本语言不提供语言并没有什么区别，只是为了保证安全，脚本语言不提供可能给浏览器方带来重大损失的编程资源。可能给浏览器方带来重大损失的编程资源。目前比较流行的脚本语言有网景公司（目前比较流行的脚本语言有网景公司（Netscape）的）的JavaScript和微软公司（和微软公司（Microsoft）的）的VBScript。 返回本章目录

56、 JavaScript是基于浏览器、基于对象的编程语言，可用于开是基于浏览器、基于对象的编程语言，可用于开发浏览器端应用程序发浏览器端应用程序 VBScript是是Microsoft公司在公司在Visual Basic编程语言的基础编程语言的基础上设计的。上设计的。 NC仅支持仅支持JavaScript，而，而IE同时支持同时支持JavaScript和和VBScript。此外，在处理自定义对象时，。此外，在处理自定义对象时，JavaScript比比VBScript能提供更多的属性和方法。能提供更多的属性和方法。 2JavaScript的特点的特点JavaScript的主要特点如下：的主要特点如

57、下：JavaScript采用事件驱动机制。事件驱动的意思是，当事件采用事件驱动机制。事件驱动的意思是，当事件发生时，发生时，JavaScript将作出响应。将作出响应。JavaScript是安全的语言。它不能对用户文件进行修改、删是安全的语言。它不能对用户文件进行修改、删除等操作。除等操作。JavaScript是与平台无关的语言。是与平台无关的语言。JavaScript不依赖于具体不依赖于具体的平台，它只依赖浏览器。的平台，它只依赖浏览器。 返回本章目录 3初识初识JavaScript 嵌入嵌入HTML文档的文档的JavaScript代码实际上是作为代码实际上是作为HTML文档文档的一部分存在

58、的。在用户使用浏览器浏览包含的一部分存在的。在用户使用浏览器浏览包含JavaScript代代码的码的Web页面时，浏览器自动对该页面时，浏览器自动对该HTML文档进行解析，并执文档进行解析，并执行其中的行其中的JavaScript代码。代码。返回本章目录JavaScript测试测试JavaScript!-d o c u m e n t . w r i t e ( Hello,WebWorld!);-返回本章目录上面源文档在浏览器中的输出结果如图上面源文档在浏览器中的输出结果如图8-27所示。所示。图8-27 一个JavaScript的例子返回本章目录 8.4.2 JavaScript语言语言8

59、.4.2.1 JavaScript的的数据类型数据类型JavaScript是一种弱类型的语言，不必事先声明常量或变量是一种弱类型的语言，不必事先声明常量或变量的数据类型。在使用或赋值时，的数据类型。在使用或赋值时， JavaScript会自动为常量或会自动为常量或变量选择最适合的类型。变量选择最适合的类型。JavaScript有有以下几种基本数据类型：以下几种基本数据类型：1数值数值型型包括整型数值和实型数值。包括整型数值和实型数值。2字符串型字符串型指用单引号或双引号扩起来的零个或多个字符。指用单引号或双引号扩起来的零个或多个字符。3 3布尔型布尔型其值仅可为其值仅可为“真真”或或“假假”，

60、分别用，分别用truetrue或或falsefalse表示。表示。4 4空值空值代表什么也没有。空值用代表什么也没有。空值用nullnull表示。表示。 返回本章目录 JavaScript的的变量变量1命名规则命名规则JavaScript规定，变量名可由字母、数字和下划线组成，但规定，变量名可由字母、数字和下划线组成，但首字符必须是字母或下划线。变量名不能与首字符必须是字母或下划线。变量名不能与JavaScript中的中的关键字发生冲突。关键字发生冲突。为增强程序的可读性，变量名尽量使用能代表变量意义的字为增强程序的可读性，变量名尽量使用能代表变量意义的字符。符。在多数情况下，