《页面基本元素》PPT课件.ppt

《《页面基本元素》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《页面基本元素》PPT课件.ppt（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第3章章 页面基本元素页面基本元素本章主要讲解本章主要讲解本章主要讲解本章主要讲解HTML页面基本元素，这页面基本元素，这些元素是构成页面的基础，它们各有自己相应的作用。掌握些元素是构成页面的基础，它们各有自己相应的作用。掌握这些页面的基本元素是定义这些页面的基本元素是定义HTML页面的关键，这些设置决页面的关键，这些设置决定了页面的文档类型和现实效果，同时也直接影响页面中各定了页面的文档类型和现实效果，同时也直接影响页面中各种元素能否正常显示。本章的知识点包括种元素能否正常显示。本章的知识点包括元素、元素、元素、元素、元素、元素、元素、元素、元素等。元素等。注意注意元素各个属性的作用和意义

2、。重点掌握元素各个属性的作用和意义。重点掌握元素的作用和写法。初步了解元素的作用和写法。初步了解元素中各个属性的特点元素中各个属性的特点和用法。和用法。3.1 页面基础元素页面基础元素 是页面的基础元素，它通知客户端该文档是是页面的基础元素，它通知客户端该文档是HTML文档，主要用来定义页面的开始和结束部分，在文档，主要用来定义页面的开始和结束部分，在元素中，包含页面头部和主体部分。语法结构如下元素中，包含页面头部和主体部分。语法结构如下所示：所示：整个页面内容整个页面内容在在和和之间写入你想要编辑的页面内之间写入你想要编辑的页面内容就构成了一个简单的页面，下面可以看个简单的示例。容就构成了一

3、个简单的页面，下面可以看个简单的示例。（在（在dreamweaver中新建中新建html页面就可以）页面就可以）一般来说一般来说元素中可以使用的所有属性包括定元素中可以使用的所有属性包括定义名字空间属性义名字空间属性xmlns、文本显示方向属性、文本显示方向属性dir和指定语言属和指定语言属性性lang。在后面会逐一讲解。在后面会逐一讲解。3.1.1 文本显示方向属性文本显示方向属性dir浏览网页的时候，每一个浏览网页的时候，每一个HTML页面的显示都是字体从左向右，页面的显示都是字体从左向右，浏览器滚条的位置在右方的格式，在浏览器滚条的位置在右方的格式，在HTML中字体的位置可以由文本显中字

4、体的位置可以由文本显示方向属性示方向属性dir 来控制。来控制。dir属性是用来指定浏览器显示文本的方向，同属性是用来指定浏览器显示文本的方向，同时也决定浏览器滚条的位置。时也决定浏览器滚条的位置。3.1.2 指定语言属性指定语言属性 langlang属性用来指定文档中所使用的语言。浏览器将属性用来指定文档中所使用的语言。浏览器将会根据指定的语言，更好的显示页面。会根据指定的语言，更好的显示页面。3.2 页面头部元素页面头部元素 在在HTML语言的头元素中，一般需要包括标题、基底语言的头元素中，一般需要包括标题、基底信息、元信息等。信息、元信息等。HTML的头部元素是以的头部元素是以为开始标记

5、，为开始标记，以以为结束标记的。一般情况下，定义在为结束标记的。一般情况下，定义在HTML语言头语言头部的内容往往不会在网页上直接显示。它用于包含当前文档部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息，可以包含的相关信息，可以包含元素、元素、元素等，分别用元素等，分别用来定义页面的标题、编码。使用来定义页面的标题、编码。使用元素可以将基本信息元素可以将基本信息部分和页面主体内容区分开来。部分和页面主体内容区分开来。3.3 页面标题元素页面标题元素 HTML页面的标题一般是用来说明页面用途的，页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中。每个它显示在浏览器的标题栏

6、中。每个HTML页面都应该有页面都应该有标题，在标题，在HTML文档中，标题信息设置在页面的头部，文档中，标题信息设置在页面的头部，也就是也就是与与之间。之间。3.4 元信息元素元信息元素 元信息元素元信息元素，用来定义页面的附加信息。其，用来定义页面的附加信息。其中包括页面的作者、版权、关键字等相关信息。语法结构如中包括页面的作者、版权、关键字等相关信息。语法结构如下所示：下所示：元素是一个自封闭的元素，通过其中的属性元素是一个自封闭的元素，通过其中的属性来添加各种附加信息。来添加各种附加信息。元素在不使用任何属性时，元素在不使用任何属性时，对页面没有影响。关于对页面没有影响。关于元素中所使

7、用的属性，将在元素中所使用的属性，将在后面的章节中详细讲解。后面的章节中详细讲解。3.4.1 元信息元素名称属性元信息元素名称属性 namename属性用来指定文档中附加信息的名称。例如，属性用来指定文档中附加信息的名称。例如，最常用的值最常用的值“keywords”用来定义文档中的关键字，方便搜用来定义文档中的关键字，方便搜索引擎的搜索（关于关键字的内容，请参看小节。语法结构索引擎的搜索（关于关键字的内容，请参看小节。语法结构如下所示：如下所示：因为在因为在元素中，名称必须对应有相关的值才元素中，名称必须对应有相关的值才能生效，所以具体的实例将在讲解完有关值属性后进行演示。能生效，所以具体的

8、实例将在讲解完有关值属性后进行演示。3.4.2 元信息元素的值元信息元素的值 contentcontent属性用来指定文档中附加信息的值。属性用来指定文档中附加信息的值。content属性是与属性是与name属性成对出现属性成对出现。用来定义附加信息的。用来定义附加信息的具体内容。语法结构如下所示：具体内容。语法结构如下所示：3.4.3 元信息元素的附加属性元信息元素的附加属性 http-equivhttp-equiv属性和属性和name属性类似，用来指定附加信属性类似，用来指定附加信息的名称。在浏览器加载页面之前，服务器会把息的名称。在浏览器加载页面之前，服务器会把http-equiv属性定

9、义的相关信息发送给浏览器，便于在浏览器中正确显属性定义的相关信息发送给浏览器，便于在浏览器中正确显示页面。语法结构如下所示：示页面。语法结构如下所示：和和name属性类似，属性类似，http-equiv属性一般要和属性一般要和content属性成对出现。属性成对出现。3.4.4 设置页面关键字设置页面关键字设置页面关键字是为了向搜索引擎说明这一网页的设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，它可关键词，从而帮助搜索引擎对该网页进行查找和分类，它可以提高被搜索到的几率，一般可设置不只以提高被搜索到的几率，一般可设置不只1个关键字，之间个关键字，之

10、间用逗号隔开。但是由于很多搜索引擎在检索的时候会限制关用逗号隔开。但是由于很多搜索引擎在检索的时候会限制关键字数量，因此在设置关键字的时候不要过多，注意每一个键字数量，因此在设置关键字的时候不要过多，注意每一个关键字都要切中要害。关键字都要切中要害。3.4.5 设置页面主要内容设置页面主要内容使用使用name属性和属性和content属性，设置页面信息的主属性，设置页面信息的主要内容。设置页面主要内容也是为了便于搜索引擎的查找，要内容。设置页面主要内容也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页

11、中显示出来。语法结构如下所示：也不会在网页中显示出来。语法结构如下所示：3.4.6 定义页面的搜索方式定义页面的搜索方式使用使用name属性和属性和content属性，定义页面搜索方式。属性，定义页面搜索方式。搜索引擎将根据页面定义的搜索方式，对页面的信息和链接搜索引擎将根据页面定义的搜索方式，对页面的信息和链接进行搜索。在进行搜索。在content属性中，搜索方式可以有六种选择，属性中，搜索方式可以有六种选择，其具体如下所示。其具体如下所示。content的值含义all页面将被检索，且页面上的链接可以被查询none页面不能被检索，且页面上的链接不可以被查询index页面将被检索follow页

12、面上的链接可以被查询noindex页面不能被检索，但页面上的链接可以被查询nofollow页面不能被检索，页面上的链接可以被查询3.4.7 定义页面的跳转定义页面的跳转在浏览网页的时候经常会看到一些欢迎信息的界面，在浏览网页的时候经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他中，这就是网在经过一段时间后，这一页面会自动转到其他中，这就是网页的跳转。使用页的跳转。使用HTML中的中的HTTP代码就可以很轻松的实现代码就可以很轻松的实现这一功能。这一功能。3.4.8 定义页面的作者信息定义页面的作者信息在在html中使用中使用name属性和属性和content属性来定义页面

13、属性来定义页面的作者信息。语法结构如下所示：的作者信息。语法结构如下所示：3.4.9 定义页面的版权信息定义页面的版权信息name属性和属性和content属性也可以来定义页面所使用属性也可以来定义页面所使用的版权。语法结构如下所示：的版权。语法结构如下所示：下面是一个使用版权信息的实例，其代下面是一个使用版权信息的实例，其代码如下所示。码如下所示。3.4.10 定义页面的刷新时间定义页面的刷新时间我们在网页中会遇到一些定是刷性的页面，我们可以我们在网页中会遇到一些定是刷性的页面，我们可以HTML中的中的http-equiv属性和属性和content属性定义页面刷新时间。属性定义页面刷新时间。

14、因为很多页面，采用动态更新的方式显示，所以间隔一定的时因为很多页面，采用动态更新的方式显示，所以间隔一定的时间自动刷新页面，可以使浏览者方便看到最新添加的信息。刷间自动刷新页面，可以使浏览者方便看到最新添加的信息。刷新页面所使用的时间单位是秒。新页面所使用的时间单位是秒。3.5 基本设置元素基本设置元素 在在HTML中基本设置元素中基本设置元素是用来定义相对路是用来定义相对路径的根目录。使用径的根目录。使用元素，可以方便的定义页面中的元素，可以方便的定义页面中的超级链接。语法结构如下所示：超级链接。语法结构如下所示：元素在不使用任何属性时，对页面显示没有元素在不使用任何属性时，对页面显示没有影

15、响。影响。元素中可以使用的属性有链接路径属性元素中可以使用的属性有链接路径属性href和链接窗口属性和链接窗口属性target，后面的章节中将分别进行这，后面的章节中将分别进行这2个属个属性的讲解。性的讲解。3.5.1 链接路径属性链接路径属性 hrefhref属性用来指定文档中相对链接的根目录。文档属性用来指定文档中相对链接的根目录。文档中的所有链接（包括图片、音频等内容）都按照中的所有链接（包括图片、音频等内容）都按照href属性所属性所指定的根目录显示。语法结构如下所示：指定的根目录显示。语法结构如下所示：包含的内容部分包含的内容部分href属性的取值为属性的取值为URL值值（关于（关于

16、URL值的详细内容，值的详细内容，请参看第请参看第8章）。它可以使用绝对路径，也可以指向某个文章）。它可以使用绝对路径，也可以指向某个文件夹。件夹。3.6 创建样式元素创建样式元素 创建样式元素创建样式元素，用来创建本页面中所使用的，用来创建本页面中所使用的样式（关于样式的详细内容，请参见本书后面的章节）。使样式（关于样式的详细内容，请参见本书后面的章节）。使用用元素创建的样式内容只能够被当前页面使用。元素创建的样式内容只能够被当前页面使用。3.6.1 类型属性类型属性 typetype属性，用来指定属性，用来指定元素中所包含内容的类型。一元素中所包含内容的类型。一般情况下，不指明般情况下，不

17、指明type属性时，浏览器是可以辨别内容的类型的。属性时，浏览器是可以辨别内容的类型的。但为了防止和但为了防止和js脚本等混淆，最好定义脚本等混淆，最好定义type属性。属性。3.6.2 类型属性类型属性media代码属性值代码属性值media属性用来指定属性用来指定元素中所包含内容作用元素中所包含内容作用的媒体。因为一般情况下，制作的网页可能在不同的浏览设的媒体。因为一般情况下，制作的网页可能在不同的浏览设备中使用，指明使用的媒体将有助于页面的显示。备中使用，指明使用的媒体将有助于页面的显示。3.7 链接元素链接元素 链接元素链接元素用来指定文档与其它文档之间的关用来指定文档与其它文档之间的

18、关系。使用系。使用元素，可以用来调用其它文档中的内容，例元素，可以用来调用其它文档中的内容，例如，级联样式表等。如，级联样式表等。3.7.1 指定链接路径属性指定链接路径属性 hrefhref属性用来指定属性用来指定元素中链接文档的路径。语元素中链接文档的路径。语法结构如下所示。法结构如下所示。注意：注意：在在元素中，元素中，href属性是必须的属性是必须的。其取值。其取值可以是绝对路径也可以是相对路径（关于路径的知识，请参可以是绝对路径也可以是相对路径（关于路径的知识，请参见第见第8章）。章）。3.7.2 链接的类型属性链接的类型属性 typetype属性用来指定属性用来指定元素中链接文档的

19、类型。元素中链接文档的类型。语法结构如下所示。语法结构如下所示。下面是一个使用下面是一个使用type属性的实例，其代码如下所示。属性的实例，其代码如下所示。3.7.3 源文档与目标文档关系属性源文档与目标文档关系属性 rel、revrel属性用来指定源文档到链接文档之间的关系。属性用来指定源文档到链接文档之间的关系。rev属性用来指定链接文档到源文档之间的关系。属性用来指定链接文档到源文档之间的关系。3.7.4 链接样式文件链接样式文件通过通过元素及其相应的属性，实现调用级联样元素及其相应的属性，实现调用级联样式表文件的目的。式表文件的目的。3.7.5 制作收藏夹图标制作收藏夹图标通过通过元素

20、及其相应的属性，制作收藏夹中的图标。元素及其相应的属性，制作收藏夹中的图标。在制作收藏夹图标时，在制作收藏夹图标时，元素中，元素中，rel属性的值为属性的值为“shortcut ico”，类型为，类型为“mage/x-icon”。同时图标要使用相。同时图标要使用相应的应的icon格式图标。格式图标。3.8 脚本元素脚本元素 脚本元素脚本元素，用来在页面中定义一个可执行，用来在页面中定义一个可执行的脚本，完成相应的行为，如鼠标点击事件等。的脚本，完成相应的行为，如鼠标点击事件等。3.8.1 脚本的语言属性脚本的语言属性 languagelanguage属性的作用是，定义脚本中使用的语言。属性的作

21、用是，定义脚本中使用的语言。语法结构如下所示。语法结构如下所示。脚本内容脚本内容在制作页面时，一般常用的脚本语言有两种。一种在制作页面时，一般常用的脚本语言有两种。一种是是JavaScript，另一种是，另一种是VBScript。3.8.2 脚本的类型属性脚本的类型属性 typetype属性的作用是定义脚本中使用的语言类型。语属性的作用是定义脚本中使用的语言类型。语法结构如下所示。法结构如下所示。脚本内容脚本内容type属性的作用和属性的作用和language属性基本相同，不过在属性基本相同，不过在属性值的写法上有所区别。属性值的写法上有所区别。3.8.3 推迟执行属性推迟执行属性 defer

22、defer属性使脚本中不显示的内容，推迟执行。目的属性使脚本中不显示的内容，推迟执行。目的是加快页面的显示速度。语法结构如下所示。是加快页面的显示速度。语法结构如下所示。脚本内容脚本内容defer属性是没有值的，按照属性是没有值的，按照HTML的语法规则，要使的语法规则，要使用自身名称作为值。因为用自身名称作为值。因为defer属性用于非显示的脚本内容，属性用于非显示的脚本内容，所以不做实例演示了。所以不做实例演示了。3.8.4 脚本的链接属性脚本的链接属性 srcsrc属性的作用是链接外部的脚本文件。语法结构如属性的作用是链接外部的脚本文件。语法结构如下所示。下所示。在在XHTML中，推荐使

23、用外部链接的脚本。中，推荐使用外部链接的脚本。3.9 页面主体元素页面主体元素 页面主体元素页面主体元素用来包含页面所要显示的内容。用来包含页面所要显示的内容。包括文本元素、图像元素、表单元素等各种页面元素。同时包括文本元素、图像元素、表单元素等各种页面元素。同时可以设置整个页面的背景、边界等相关属性。可以设置整个页面的背景、边界等相关属性。3.9.1 主体元素的背景属性主体元素的背景属性 bgcolorbgcolor属性用来指定页面所使用的背景颜色。属性用来指定页面所使用的背景颜色。3.9.2 主体元素的背景图片属性主体元素的背景图片属性 backgroundbackground属性，用来指

24、定页面所使用的背景图片。属性，用来指定页面所使用的背景图片。指定的背景图片，将按照从上到下，从左到右的方式重复显指定的背景图片，将按照从上到下，从左到右的方式重复显示。示。3.9.3 主体元素的背景图片滚动属性主体元素的背景图片滚动属性 bgpropertiesbgproperties属性用来指定背景图片能否滚动。背属性用来指定背景图片能否滚动。背景图片滚动的含义是，当拖动浏览器滚条时，页面背景可以景图片滚动的含义是，当拖动浏览器滚条时，页面背景可以随滚条一起改变位置。随滚条一起改变位置。3.9.4 主体元素的文本属性主体元素的文本属性 texttext属性的作用是，用来指定页面中普通文本（没

25、有属性的作用是，用来指定页面中普通文本（没有链接的文本）的颜色。链接的文本）的颜色。3.9.5 IE浏览器中的左边界属性浏览器中的左边界属性 leftmargin元素的边界属性用来定义页面与浏览器窗口元素的边界属性用来定义页面与浏览器窗口之间的距离。边界属性包括两个属性，之间的距离。边界属性包括两个属性，leftmargin属性、属性、topmargin属性。属性。3.9.6 IE浏览器中的上边界属性浏览器中的上边界属性 topmargintopmargin属性用来指定页面和浏览器上边界之间属性用来指定页面和浏览器上边界之间的距离。的距离。3.9.7 未访问过的链接属性未访问过的链接属性 li

26、nk页面主体元素的链接属性，用来定义页面中含有链页面主体元素的链接属性，用来定义页面中含有链接的文本的颜色。链接属性中包括三个属性：接的文本的颜色。链接属性中包括三个属性：link属性、属性、vlink属性和属性和alink属性。其中，每个值对应着链接的不同状属性。其中，每个值对应着链接的不同状态。态。3.9.8 已访问过的链接属性已访问过的链接属性 vlinkvlink属性用来指定已访问过的链接的颜色。属性用来指定已访问过的链接的颜色。3.9.9 激活的链接属性激活的链接属性 alinkalink属性用来指定激活的链接文本的颜色，如在已属性用来指定激活的链接文本的颜色，如在已访问的链接上按下

27、鼠标后的状态等。访问的链接上按下鼠标后的状态等。3.9.10 主体元素中使用样式属性主体元素中使用样式属性 style页面主体元素的样式属性，用来给页面内容定义级页面主体元素的样式属性，用来给页面内容定义级联样式表。其中包括联样式表。其中包括style属性、属性、class属性。属性。3.9.11 主体元素中调用样式属性主体元素中调用样式属性 classclass属性用来调用级联样式表。使用属性用来调用级联样式表。使用class属性，属性，既可以调用页面头部既可以调用页面头部元素中定义的样式表，也可以元素中定义的样式表，也可以调用使用调用使用元素链接的外部样式表。元素链接的外部样式表。3.10

28、 使用背景音乐使用背景音乐页面中添加背景音乐的元素是页面中添加背景音乐的元素是，其中包，其中包括音乐地址属性括音乐地址属性src、重复属性、重复属性loop。属性是属性是IE浏览器的特有属性。下面进行详细讲解。浏览器的特有属性。下面进行详细讲解。3.10.1 IE浏览器中添加背景音乐元素浏览器中添加背景音乐元素 元素的作用是，制作页面的背景音乐。元素的作用是，制作页面的背景音乐。3.10.2 背景音乐的路径属性背景音乐的路径属性 srcsrc 属性的作用是，指定页面背景音乐的路径。语法属性的作用是，指定页面背景音乐的路径。语法结构如下所示。结构如下所示。在在元素中，可以支持多种音乐格式，包元素

29、中，可以支持多种音乐格式，包括常用的括常用的mp3、rm、wav等。在例程等。在例程2-25中已经使用，这里中已经使用，这里不再做实例演示。不再做实例演示。3.10.3 背景音乐的重复属性背景音乐的重复属性 looploop属性指定页面背景音乐的播放次数。语法结构如属性指定页面背景音乐的播放次数。语法结构如下所示。下所示。在页面中如果不设置在页面中如果不设置loop属性，背景音乐会不停的重属性，背景音乐会不停的重复播放。在例程复播放。在例程2-25中已经使用使用中已经使用使用loop属性，这里不再做属性，这里不再做实例演示。实例演示。3.11 本章习题本章习题一选择题一选择题二填空题二填空题三实战练习三实战练习