《网站建设原理与实践》电子教案 第7章 网站的静态网页实现技术

《《网站建设原理与实践》电子教案 第7章 网站的静态网页实现技术》由会员分享，可在线阅读，更多相关《《网站建设原理与实践》电子教案 第7章 网站的静态网页实现技术（162页珍藏版）》请在金锄头文库上搜索。

1、第7章 网站的静态网页实现技术,网站的静态网页主要是通过HTML实现的，即静态网页是用HTML制作的。HTML（Hyper Text Markup Language）语言是超文本标识语言，目前最新的版本是HTML 4.0。HTML语言是一种描述文档结构的语言，使用描述性的标识符（称为标签）来指明文档的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。一般来说，HTML文件是以“.htm”或“.html”作为文件的扩展名。,7.1 HTML基础知识,HTML是专门在Internet上进行传输，可以让设计者建立并能让所有Web的使

2、用者读出的页面。HTML是一种标识语言，用来创建与系统平台无关的文档。也就是说，HTML不是编程语言而是一种描述性标识语言。 HTML是把一些信息根据需要链接起来的信息管理技术。人们可以通过超文本中的链接打开另外一个相关的文件，用鼠标点击文本中的高亮度或带下划线的文字，即可打开与之相链接的文本，获得所需的信息。,7.1 HTML基础知识,超文本由若干互联的文本块组成，这些信息块可以是若干屏、窗口、文件或更小的块信息，这样的信息单元称为节点（Node）。不管节点有多大，每个节点都有若干指针指向其他节点或从其他节点指向该节点的指针，这些指针称为链接（Link）。超文本文件亦称为锚点（Anchor）

3、，或称为锚标。 1. 超文本的节点 超文本中信息网络的每个节点都包含一个特定的主题信息，节点的大小视主题而定。按照节点的功能可以分为表现型节点、组织型节点和推理型节点三类。,7.1 HTML基础知识,（1）表现型节点是一般性超文本节点，主要包括：由文本段组成的文本节点：图形图像节点；由声音或合成语音构成的声音节点：用于执行一个过程的按钮节点。 （2）组织科节点是组织节点的节点，主要包括： 目录节点，它以条目形式给出信息的索引指针，指向索引节点：索引节点，由索引项组成，索引项用指针指向目标节点或相关索引项。 （3）推理型节点只有在智能超文本中才有，主要包括对象节点和规则节点。超文本中的“超”体现

4、在它不仅能包含文本，而且还可以包含图像、音频和视频等多媒体信息，即将文本的概念扩展到超文本。因此超文本也称为超媒体（Hypermedia）。,7.1 HTML基础知识,2. 超文本的链接 链接是超文本的灵魂，它定义了超文本的结构。超文本的链接主要包括以下三类： （1）基本链接：用于建立节点之间的基本顺序，类似文章的章、节这样的层次结构。 （2）索引链接：可以从一个索引点引到该节点的索引入口。 （3）执行链接：将一种执行活动与按钮节点相连，使超文本成为高层程序的界面。 在浏览器的显示中，链接表现为带下划线的彩色字符或图案。如果链接被访问，颜色会改变，以便提示用户。链接的颜色可以通过HTML参数来

5、改变。,7.1 HTML基础知识,3.锚点 锚点是链接的指针，它指向同一文档的不同部分或其他不同的文档。在HTML语言中有两种锚点： （1）NAME锚点：属于标记锚点，用来将文档中的某个或某些段落标识为节点，供用户通过链接查找信息。 （2）HREF锚点：属于执行锚点，用来指向其他超文本节点，或引用本文档中用NAME锚点标记了的段落，或执行某个URL命令（如发送电子邮件、执行FTP或HTTP命令）。因此HREF锚点又可分为URL命令锚点和内部锚点两种。,7.1 HTML基础知识,锚点在浏览器中的显示就是链接，所以有一些HTML文献直接称锚点为链接，即认为锚点就是链接。通过HREF锚点执行的链接称

6、为超链接（Hyperlink）。不过，在大多数情况下并没有严格区分链接与超链接，例如Web页面中的链接也可以称为超链接。,7.1 HTML基础知识,4.HTML的标签 HTML定义了三种标签用于描述页面的整体结构，以及浏览器和HTML工具对页面的确认；另外还有一种标签即页面结构标签不影响页面的显示效果，帮助工具对文件进行解释和过滤。这些标签是可选的，如果页面不包含标签，浏览器通常也能够读取页面。下面介绍HTML的四个最重要的标签。 （1） ：标签放在HTML文件的最开始处，用以告诉浏览器这个文件为HTML文件，而在文件的最后，当然足的结束标签了，虽然这个标签可以省略不用，但希望读者还是要养好使

7、用该标签的习惯。 （2） ：标签一般放在标签的后面，用来标明文件题目或定义。,7.1 HTML基础知识,（3）：标签用来设定文件的标题，一般用来注释这个文件的内容，浏览器通常会将文件标题显示在浏览器窗口的左上角。 （4）：标签一般用来指明HTML文档里的主要文字，例如标题、段落和列表等，也可以用来定义主页背景颜色。 当然，HTML远没有如此简单，每个标签后面可定义各种各样的特性，这需要读者逐步掌握。当看到一个优秀的页面时，可以看看它的源文件，这样对提高制作水平很有帮助。下面请看一个最基本的HTML文件具有怎样的结构。,7.1 HTML基础知识, 这是测试文件 HTML文件的内容就写在这里 把它

8、存为一个HTML文件，然后用浏览器打开它，其 显示效果如图7-1所示。下面分别对这些标志进行介绍。,7.1 HTML基础知识,图7-1 浏览器显示效果,7.2 HTML基本标识与使用,7.2.1 HEAD中的标识 HEAD出现在HTML文档的起始处，用来标明当前文档的有关信息（如文档标题），检索引擎可用的关键词以及不属于文档内容的其他数据。HEAD元素的起始和结束标识都是可选的。在HEAD的起始标识和结束标识之间最重要的两个元素是TITLE和META。 1.TITLE元素 TITLE元素通常不被视为文本的部分，其内容能够被显示，但会显示为文档标题或窗口标题。每个HTML只能有一个标题，也就是说

9、，每个HTML文档的HEAD部分只能有个TITLE元素。TITLE元素的起始标识和结束标识都是 必需的。,7.2 HTML基本标识与使用,2.INDEX元素 INDEX元素主要定义用来查询的表单，表单应该允许用户通过提供关键字的方式来查找索引内容。在阅读文件时，不论用户采用什么样的方式，当前文件所描述的数据均可采用索引查询方式进行搜索。 3. 设定链接的基准路径，使用这个标识，可以大大地简化网页内超链接的编写工作。用户可以不用为每个标识编写完整的全路径，而只需指定它相对于base所指定的基准路径的相对路径即可。,7.2 HTML基本标识与使用,4.META元素 META元素被用来描述HTML文

10、档的元信息（Meta Information），即关于文档的自身信息。这些信息可以被Web检索引擎、Web服务器或其他程序利用。 META元素是HTML 3.0以后版本中定义的元素。META元素需要标识，但不能有结束标识。META元素定义元信息时，可以用NAME属性指出信息的类型，用Content属性指出它的定义。例如： 使用上述语句可以产生关于文档作者和关键词的元信息。,7.2 HTML基本标识与使用,还可以用来产生特殊的HTTP头标，送给Web服务器，用来激活客户端的特殊功能。可以使用HTTPEQUIV属性指明头标名，用Content属性指明其内容。例如： 上面的语句将产生如下的HTTP头

11、标： empires:Mon,10 Sep 2000 09:42:05 GMT,7.2 HTML基本标识与使用,但是不能用META元素来描述其他元素处理好的HTML文档的任何部分，如不能用它给出文档的标题，因为这是TITLE元素所做的事。也不应用META元素替换Web服务器已经产生的标题（例如Content-type或Date），否则会扰乱服务器或客户端，或者两者都会被扰乱。 5.LINK元素 LINK元素在当前的HTML文档与另一个对象之间建立一种链接关系，以指明与当前文档的有关属性、词汇表、版本、相关资源、文档作者和其他信息。LINK元素支持与其元素相同的属性。,7.2.2 文本标识,1.

12、标题元素 正如传统的书本一样，HTML中也规定了标题格式。HTMI中的标题元素使用格式为： 它一共支持六级标题，其元素内容分别为：h1、h2、h3、h4、h5和h6。标题字体支持ALIGN属性，用它可以指定对象的排版格式，其属性值有LEFT、RIGHT和CENTER等。请看下面的例子，其浏览器的显示效果如图7-2所示。,7.2.2 文本标识,图7-2 浏览器显示效果,7.2.2 文本标识,显示上述效果图的HTML原代码为： How to make Webs 标题元素显示效果1 标题元素显示效果2 标题元素显示效果3 标题元素显示效果4 标题元素显示效果5 标题元素显示效果6 ,7.2.2 文本

13、标识,2.字体元素 字体元素FONT用来设置文档的字体，通过改变其属性可以对字体进行不同的设置。其常用的属性有三个：SIZE、COLOR和FACE。SIZE用来指定字体大小，COLOR指定字体颜色，FACE用宋指定一种字体名或一种字体列表。 （1）SIZE的使用格式为： #=1,2,3, 4,5,6,7 （2）COLOR的使用格式为： （3）FACE的使用格式为： ,7.2.2 文本标识,（4）字体元素的综合应用实例 下面是一个FONT元素应用的综合例子，其浏览器显示效果如图7-3。 New Document FONT的综合应用1/font FONT的综合应用2/font FONT的综合应用3

14、/font FONT的综合应用4/font ,7.2.2 文本标识,图7-3 浏览器显示效果,7.2.2 文本标识,3.字符修饰元素 HTML中规定了大量的字符修饰处理元素，它们能够在不改变字体、字号的基础上对字形进行改变。这些元素分为物理样式和逻辑样式两大类，它们一般不支持任何属性。 （1）物理样式 B元素：指定一段文本，使浏览器将该段文本以粗体显示。 I元素：指定一段文本，使浏览器将该段文本以斜体显示。 u元素：指定一段文本，使浏览器将其显示为带下划线的文字。 TT元素：指定一段文本，使浏览器将它显示为固定大小的字体字符。 SUP元素：指定一段文本，使浏览器用较小的字体将具显示为上标。,7

15、.2.2 文本标识,S元素：指定段文本，使浏览器将它显示为带删除线的文字。 STRIKE元素：指定一段文本，使浏览器将它显示为带删除线的文字。 （2） 逻辑样式 EM元素：对文档中的某段文本进行强调，通常用斜体字显示出来。 STRONG元素：对文档中的某段文本进行强调，通常用粗体字显示出来。 CODE元素：将程序代码（如JAVE、C+源程序等）显示成等宽字体。 SAMP元素：指定一个样本名称，浏览器一般用等宽字体显示它。,7.2.2 文本标识,4.分行控制元素 浏览器是忽略HTML文档中的自然行与段落的，分行和段落设置必须通过HTML标识来实现。 （1）分段元素 分段元素p用来定义文档中的个段

16、落，段落的缩进、第一个字符前面的空格及其他特性通常由浏览器确定。标识是段落的开始，是段落的结尾，单独一个，会添加一个空行。p元素的结束标记，经常可以不写。 （2）换行元素 换行元素br在HTML文档中增加一个换行，指示浏览器执行个断行动作，与p元素不同，它只是用来换行，其他字符和段落格式保持不变。br元素没有结束标志。,7.2.2 文本标识,5.预格式化文本元素 预格式化文本元素PRE使文本块以等宽字体显示，并保留预排列的格式。 （1）预格式化文本元素使用规则 在预格式化文本内： 文本中的分行会予以保留，从下一行显示文本。 不应该使用标记，如果使用此标记，会处理为换行。 可以使用超链接和突出显示字符元素。 不应该使用定义段落格式化元素（如标题、地址等）。,7.2.2 文本标识,（2）预格式化文本使用格式 预格式化文本使用格式为： 6.地址元素 HTML规定了用地址元素ADDRESS来指定作者的所有权、名字、地址（常规地址和E-mail）、电话和传真等。ADDRESS元素常放在文档结束处，浏览器多以斜体字显示A