web程序设计基础讲义

《web程序设计基础讲义》由会员分享，可在线阅读，更多相关《web程序设计基础讲义（133页珍藏版）》请在金锄头文库上搜索。

1、第2章 WEB程序设计的基础,本章学习目标 本章主要讲解HTML语言、CSS和x HTML语言。通过本章学习，读者应该掌握以下内容： HTML语言基本知识 Css X HTML语言基础知识,2.1 HTML语言,2.1.1 HTML 语言的结构 HTML（超文本标记语言）是一种描述文档结构的标注语言，它使用一些约定的标记对WWW上的各种信息进行标注。当用户浏览WWW上的信息时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。HTML的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，并且显示结果相同。 HTML文件是标

2、准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看起来像是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签（start tag），元素结束标记叫做结尾链接签（end tag），在起始链接签和结尾链接签中间的部分是元素体。每一个元素都有名称和许多可选择的属性，元素的名称和属性都在起始链接签内标明。下面来看一个HTML文件，它在浏览器中显示的结果如图2-1所示。,

3、湖北工业大学这是一HTML的测试文件,图2-1 一个HTML例子在浏览器的显示结果,从上例中我们可以看出，HTML文件仅由一个HTML元素组成， 即文件以开始，以结尾，文件其余部分都是 HTML的元素体。而HTML元素的元素体又由头元素、体元素和一些注释组成。头元素和体元素的元素体又由其它的元素、文本及注释组成。 在上例中第五行是体元素的起始链接签，它标明体元素从此开始。因为所有的链接签都具有相同的结构，所以应该仔细分析这个链接签的各个部分，以便读者对链接签的写法有一个大概的了解。其格式为：内容 在HTML中有三个字符具有特殊的意义，即：（表示一个标签的结束），和,元素名也叫链接签名。需要注意

4、的是： （1） 和起始链接签之间不能有空格。 （2）元素名称不区分大小写。 （3）一个元素可以有多个属性，属性及其属性值不区分大小写，且各个属性用空格分开。 HTML文件中，有些元素只能出现在头元素中，而绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该HTML文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出形式。,2.1.2 构成网页的基本元素 下面介绍一下常用的有关Web页文本格式的标记。 1. 标记 标记用来给网页命

5、名，网页的名称写在与标记之间，显示在浏览器的标题栏中。例如，在图2-1中所示的浏览器页面中，其标题栏所显示的“湖北工业大学”是在HTML文件中的由湖北工业大学所定义的。 2. 标记 到标题元素有6种，用于表示文章中的各种题目。字体大小到顺序减小。下面这个例子中分别使用了到的标题。其HTML文件如下所示，在浏览器中的显示效果如图2-2所示。,图2-2 标记,这是一个测试网页标题测试 标题测试 标题测试,标题测试 标题测试 标题测试3. 预格式化文本标记 HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的字符（如空格、制表符和回车符）都忽略，若确实不需要重新

6、排版的内容，可以用通知浏览器。在图2-3和图2-4中显示了有无预格式化文本标记的对比。 下面是图2-3和图2-4的HTML源文件。,这是一个测试网页HTML是一种描述文档结构的标注语 言，它使用一些约定的标记对各种信息 进行标注。,图2-3 有标记,图2-4 无标记,4. 和标记 用于强制换行。 表示一个段落的开始。一般可不用。 5. 标记 这几个标记都是用来修饰所包含文档的。标记使文本加粗；标记使文本倾斜；标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。下面给出一个HTML源文件，其显示结果如图2-5所示。这是一个测试网页,HTML是一种 描述文档结构的 标注语言， 它使用一些

7、约定的标记对各种信息进行 标注。,图2-5 文档标记的修饰,6. 标记 用来修改字体和颜色。其中COLOR属性指定文字颜色，颜色的表示可以用6位十六进制代码，如；SIZE属性指定相对尺寸。 另外， 如果用户想要设置网页的背景色和文字颜色，可以将标记扩充为：其中各个元素的说明如表2-1所示，表2-2列出了一些常用颜色的RGB值,表2-1 设置背景景色和文字颜色,表2-2 常见颜色RGB值,例如要将网页背景颜色设置为蓝色， 2.1.3 超文本链接指针 超文本链接指针是HTML最吸引人的优点之一，可以这样说，如果没有超文本链接指针，就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随

8、机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。,1. 统一资源定位器URL 统一资源定位器（Uniform Resource Locator）是文件名的扩展。在单机系统中，如果要找一个文件，需要知道该文件所在的路径和文件名；在互连网上同样找一个文件，除了要知道以上内容之外，显然还需要知道该文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是，在单机系统中所有的文件都由统一的操作系统来管理，因而不必给出访问该文件的方法；而在互连网上，每个网络，每台主机的操作系统都不一样，因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的

9、构成为： protocol:/ machine.name:portdirectoryfilename,其中： protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是： HTTP：超文本传输协议，该资源是HTML文件； FTP：文件传输协议，用ftp访问该资源； MAILTO：采用简单邮件管理传输协议SMTP，提供电子邮件服务。 machine.name是存放该资源主机的IP 地址，通常以字符形式出现,如 。 port（端口号）是服务器在其主机所使用的端口号。一般情况下端口号不需要指定，只有当服务器所使用的端口号不是默认的端口号时才指定。 directory和filename 是

10、该资源的路径和文件名。,一个典型的URL为：http:/ 它表示湖北工业大学WWW服务器上的起始HTML文件。在这个网址中可以看出，它告诉网络采用超文本传输协议（HTTP）；主机的名字是www. ；但它并没有指出访问的目录和哪个文件，其实这时表示访问的是根目录下的默认主页文件。 与单机系统绝对路径、相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。绝对URL、相对URL是相对于最近访问的URL而言。比如现在正在浏览一个URL为http:/ 当协议（http:/）被省略时，就认为与当前页面的协议相同。 当主机域名被省略时，就认是当前主机域名。 当目录路径被省略时，就认是当前目录。

11、 当文件名被省略时，就认是当前文件。 2. 建立一个链接,（1）链接到其它站点 在HTML文件中用链接指针指向一个目标。其基本格式为：zzz 其中zzz可以是文字或图片并显示在网页中，当用户单击它时，浏览器就会显示由href属性中的统一资源定位器（URL）所指向的目标，实际上这个ZZZ在HTML文件中充当指针的角色，它一般显示为蓝色。href中的h表示超文本，而ref表示“访问”或“引用”的意思。例如： 湖北工业大学 用户用鼠标单击“湖北工业大学”，即可看到湖北工业大学的主页内容。在这个例子中，充当指针的是“湖北工业大学”。,在编写HTML文件时，需要知道目标的URL。那么如何才能得到目标的U

12、RL呢？对于自己主机内的文件，它的URL可以根据该文件的实际情况决定。对于Internet上的资源，在用浏览器查看时，它的URL会在浏览器的状态栏中显示出来，把它抄下来写到新制作的HTML文件中即可。 在编写HTML文件时，对能确定关系的一组资源（比如在同一个目录中）应采用相对URL，这不仅简化HTML文件，而且便于维护。比如当需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时，用相对URL写的HTML文件对其中的URL不需要进行任何更改（只要它们的相对关系没有改变）。但如果用绝对URL编写HTML文件，就不得不修改每个链接指针中的URL，这是一件很乏味也很容易出错的工作。对

13、于各个资源之间没有固定的关系，比如某个HTML文件是介绍各大学情况的，它所指向的目标分布在全球的主机中，这时你就只能用绝对URL了。,（2）同一个文件中的链接 上面提到的链接指针可以使读者在整个Internet网上方便地链接，这种链接方式称作远程链接。但如果编写了一个很长的HTML文件，从头到尾地读很浪费时间，能不能在同一文件的不同部分之间也建立起链接，使用户方便地在上下方之间跳转呢？ 答案是肯定的，超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。对于一个完整的文件，可以用它的URL来唯一

14、地标识它，但对于同一文件的不同部分，我们怎样来标识呢？,下面的内容将介绍链接指针元素的另外的一个用途，标识目标。标识一个目标的方法为： . NAME属性将放置该标记的地方标记为“KKK”，KKK是一个全文唯一的标记串，和 之间的内容可有可无。这样，就把放置标记的地方做了一个叫做“KKK”的标记（如果对Microsoft Word很熟悉的话，这就相当于在Word中的定义“书签”）。做好标记后，可以用下列方法来指向它， 转向下一处 ,这时就可以点击“转向下一处”这段文字，浏览器就从标记名为KKK的部分开始显示此HTML文件的内容了。 2.1.4 在HTML文件中使用图像 1. 在HTML文件中显示

15、图像 Web之所以拥有无限的可扩展性和诱人的魅力，完全是由于有超级链接和图形图像的使用。通过前面的学习，已经能够建立文本网页，如果在此基础上再加入一些色彩绚丽的图像，得到的网页就会更加生动、更具有吸引力。在这一节中将介绍如何使用HTML标记在网页上加入图像。,在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。在HTML网页中加图像是通过标记实现的，它有几个较为重要的属性。其中： SRC属性：指明图形的URL地址； HEIGHT属性：决定图形的高度； WIDTH属性：决定图形的宽度； BORDER属性：决定边框线的宽度，0表示无边框； ALT属性：指明图像显示的备用文本；,图2-6 HTML文件举例,下面通过一个示例来说明标记的使用。图像的文件名为“center1.gif”，它是当前目录下的IMAGES子目录中的文件。其HTML源文件如下： 1 2 3 测试页 4 ,5 6 7 8 9 10 ,