《第3章页面基本元素.ppt》由会员分享，可在线阅读，更多相关《第3章页面基本元素.ppt（50页珍藏版）》请在三一办公上搜索。
1、第3章 页面基本元素,本章主要讲解本章主要讲解HTML页面基本元素，这些元素是构成页面的基础，它们各有自己相应的作用。掌握这些页面的基本元素是定义HTML页面的关键，这些设置决定了页面的文档类型和现实效果，同时也直接影响页面中各种元素能否正常显示。本章的知识点包括元素、元素、元素、元素、元素等。注意元素各个属性的作用和意义。重点掌握元素的作用和写法。初步了解元素中各个属性的特点和用法。,3.1 页面基础元素,是页面的基础元素，它通知客户端该文档是HTML文档，主要用来定义页面的开始和结束部分，在元素中，包含页面头部和主体部分。语法结构如下所示：整个页面内容在和之间写入你想要编辑的页面内容就构成
2、了一个简单的页面，下面可以看个简单的示例。（在dreamweaver中新建html页面就可以）一般来说元素中可以使用的所有属性包括定义名字空间属性xmlns、文本显示方向属性dir和指定语言属性lang。在后面会逐一讲解。,3.1.1 文本显示方向属性dir,浏览网页的时候，每一个HTML页面的显示都是字体从左向右，浏览器滚条的位置在右方的格式，在HTML中字体的位置可以由文本显示方向属性dir 来控制。dir属性是用来指定浏览器显示文本的方向，同时也决定浏览器滚条的位置。,3.1.2 指定语言属性 lang,lang属性用来指定文档中所使用的语言。浏览器将会根据指定的语言，更好的显示页面。,
3、3.2 页面头部元素,在HTML语言的头元素中，一般需要包括标题、基底信息、元信息等。HTML的头部元素是以为开始标记，以为结束标记的。一般情况下，定义在HTML语言头部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息，可以包含元素、元素等，分别用来定义页面的标题、编码。使用元素可以将基本信息部分和页面主体内容区分开来。,3.3 页面标题元素,HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中。每个HTML页面都应该有标题，在HTML文档中，标题信息设置在页面的头部，也就是与之间。,3.4 元信息元素,元信息元素，用来定义页面的附加信息。其中包括页面的作者、版权、
4、关键字等相关信息。语法结构如下所示：元素是一个自封闭的元素，通过其中的属性来添加各种附加信息。元素在不使用任何属性时，对页面没有影响。关于元素中所使用的属性，将在后面的章节中详细讲解。,3.4.1 元信息元素名称属性 name,name属性用来指定文档中附加信息的名称。例如，最常用的值“keywords”用来定义文档中的关键字，方便搜索引擎的搜索（关于关键字的内容，请参看3.4.4小节。语法结构如下所示：因为在元素中，名称必须对应有相关的值才能生效，所以具体的实例将在讲解完有关值属性后进行演示。,3.4.2 元信息元素的值 content,content属性用来指定文档中附加信息的值。cont
5、ent属性是与name属性成对出现。用来定义附加信息的具体内容。语法结构如下所示：,3.4.3 元信息元素的附加属性 http-equiv,http-equiv属性和name属性类似，用来指定附加信息的名称。在浏览器加载页面之前，服务器会把http-equiv属性定义的相关信息发送给浏览器，便于在浏览器中正确显示页面。语法结构如下所示：和name属性类似，http-equiv属性一般要和content属性成对出现。,3.4.4 设置页面关键字,设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，它可以提高被搜索到的几率，一般可设置不只1个关键字，之间用逗
6、号隔开。但是由于很多搜索引擎在检索的时候会限制关键字数量，因此在设置关键字的时候不要过多，注意每一个关键字都要切中要害。,3.4.5 设置页面主要内容,使用name属性和content属性，设置页面信息的主要内容。设置页面主要内容也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。语法结构如下所示：,3.4.6 定义页面的搜索方式,使用name属性和content属性，定义页面搜索方式。搜索引擎将根据页面定义的搜索方式，对页面的信息和链接进行搜索。在content属性中，搜索方式可以有六种选择，其具体如下所示。,3.4.7 定义页面的跳转,在
7、浏览网页的时候经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他中，这就是网页的跳转。使用HTML中的HTTP代码就可以很轻松的实现这一功能。,3.4.8 定义页面的作者信息,在html中使用name属性和content属性来定义页面的作者信息。语法结构如下所示：,3.4.9 定义页面的版权信息,name属性和content属性也可以来定义页面所使用的版权。语法结构如下所示：下面是一个使用版权信息的实例，其代码如下所示。,3.4.10 定义页面的刷新时间,我们在网页中会遇到一些定是刷性的页面，我们可以HTML中的http-equiv属性和content属性定义页面刷新时间。
8、因为很多页面，采用动态更新的方式显示，所以间隔一定的时间自动刷新页面，可以使浏览者方便看到最新添加的信息。刷新页面所使用的时间单位是秒。,3.5 基本设置元素,在HTML中基本设置元素是用来定义相对路径的根目录。使用元素，可以方便的定义页面中的超级链接。语法结构如下所示：元素在不使用任何属性时，对页面显示没有影响。元素中可以使用的属性有链接路径属性href和链接窗口属性target，后面的章节中将分别进行这2个属性的讲解。,3.5.1 链接路径属性 href,href属性用来指定文档中相对链接的根目录。文档中的所有链接（包括图片、音频等内容）都按照href属性所指定的根目录显示。语法结构如下所
9、示：包含的内容部分href属性的取值为URL值（关于URL值的详细内容，请参看第8章）。它可以使用绝对路径，也可以指向某个文件夹。,3.6 创建样式元素,创建样式元素，用来创建本页面中所使用的样式（关于样式的详细内容，请参见本书后面的章节）。使用元素创建的样式内容只能够被当前页面使用。,3.6.1 类型属性 type,type属性，用来指定元素中所包含内容的类型。一般情况下，不指明type属性时，浏览器是可以辨别内容的类型的。但为了防止和js脚本等混淆，最好定义type属性。,3.6.2 类型属性media代码属性值,media属性用来指定元素中所包含内容作用的媒体。因为一般情况下，制作的网页
10、可能在不同的浏览设备中使用，指明使用的媒体将有助于页面的显示。,3.7 链接元素,链接元素用来指定文档与其它文档之间的关系。使用元素，可以用来调用其它文档中的内容，例如，级联样式表等。,3.7.1 指定链接路径属性 href,href属性用来指定元素中链接文档的路径。语法结构如下所示。注意：在元素中，href属性是必须的。其取值可以是绝对路径也可以是相对路径（关于路径的知识，请参见第8章）。,3.7.2 链接的类型属性 type,type属性用来指定元素中链接文档的类型。语法结构如下所示。下面是一个使用type属性的实例，其代码如下所示。,3.7.3 源文档与目标文档关系属性 rel、rev,
11、rel属性用来指定源文档到链接文档之间的关系。rev属性用来指定链接文档到源文档之间的关系。,3.7.4 链接样式文件,通过元素及其相应的属性，实现调用级联样式表文件的目的。,3.7.5 制作收藏夹图标,通过元素及其相应的属性，制作收藏夹中的图标。在制作收藏夹图标时，元素中，rel属性的值为“shortcut ico”，类型为“mage/x-icon”。同时图标要使用相应的icon格式图标。,3.8 脚本元素,脚本元素，用来在页面中定义一个可执行的脚本，完成相应的行为，如鼠标点击事件等。,3.8.1 脚本的语言属性 language,language属性的作用是，定义脚本中使用的语言。语法结构
12、如下所示。脚本内容在制作页面时，一般常用的脚本语言有两种。一种是JavaScript，另一种是VBScript。,3.8.2 脚本的类型属性 type,type属性的作用是定义脚本中使用的语言类型。语法结构如下所示。脚本内容type属性的作用和language属性基本相同，不过在属性值的写法上有所区别。,3.8.3 推迟执行属性 defer,defer属性使脚本中不显示的内容，推迟执行。目的是加快页面的显示速度。语法结构如下所示。脚本内容defer属性是没有值的，按照HTML的语法规则，要使用自身名称作为值。因为defer属性用于非显示的脚本内容，所以不做实例演示了。,3.8.4 脚本的链接属
13、性 src,src属性的作用是链接外部的脚本文件。语法结构如下所示。在XHTML中，推荐使用外部链接的脚本。,3.9 页面主体元素,页面主体元素用来包含页面所要显示的内容。包括文本元素、图像元素、表单元素等各种页面元素。同时可以设置整个页面的背景、边界等相关属性。,3.9.1 主体元素的背景属性 bgcolor,bgcolor属性用来指定页面所使用的背景颜色。,3.9.2 主体元素的背景图片属性 background,background属性，用来指定页面所使用的背景图片。指定的背景图片，将按照从上到下，从左到右的方式重复显示。,3.9.3 主体元素的背景图片滚动属性 bgproperties
14、,bgproperties属性用来指定背景图片能否滚动。背景图片滚动的含义是，当拖动浏览器滚条时，页面背景可以随滚条一起改变位置。,3.9.4 主体元素的文本属性 text,text属性的作用是，用来指定页面中普通文本（没有链接的文本）的颜色。,3.9.5 IE浏览器中的左边界属性 leftmargin,元素的边界属性用来定义页面与浏览器窗口之间的距离。边界属性包括两个属性，leftmargin属性、topmargin属性。,3.9.6 IE浏览器中的上边界属性 topmargin,topmargin属性用来指定页面和浏览器上边界之间的距离。,3.9.7 未访问过的链接属性 link,页面主体
15、元素的链接属性，用来定义页面中含有链接的文本的颜色。链接属性中包括三个属性：link属性、vlink属性和alink属性。其中，每个值对应着链接的不同状态。,3.9.8 已访问过的链接属性 vlink,vlink属性用来指定已访问过的链接的颜色。,3.9.9 激活的链接属性 alink,alink属性用来指定激活的链接文本的颜色，如在已访问的链接上按下鼠标后的状态等。,3.9.10 主体元素中使用样式属性 style,页面主体元素的样式属性，用来给页面内容定义级联样式表。其中包括style属性、class属性。,3.9.11 主体元素中调用样式属性 class,class属性用来调用级联样式表
16、。使用class属性，既可以调用页面头部元素中定义的样式表，也可以调用使用元素链接的外部样式表。,3.10 使用背景音乐,页面中添加背景音乐的元素是，其中包括音乐地址属性src、重复属性loop。属性是IE浏览器的特有属性。下面进行详细讲解。,3.10.1 IE浏览器中添加背景音乐元素,元素的作用是，制作页面的背景音乐。,3.10.2 背景音乐的路径属性 src,src 属性的作用是，指定页面背景音乐的路径。语法结构如下所示。在元素中，可以支持多种音乐格式，包括常用的mp3、rm、wav等。在例程2-25中已经使用，这里不再做实例演示。,3.10.3 背景音乐的重复属性 loop,loop属性指定页面背景音乐的播放次数。语法结构如下所示。在页面中如果不设置loop属性，背景音乐会不停的重复播放。在例程2-25中已经使用使用loop属性，这里不再做实例演示。,3.11 本章习题,一选择题二填空题三实战练习,
