第2章 网页头部Head课件.pptVIP

第2章 网页头部Head 在第1章中介绍了网页结构。虽然头部内容不会显示在网页的主体里面，但对于网页来说，有着至关重要的影响。网页中加载的顺序是从头部开始的。例如，网页的标题是浏览者得到的第一条信息，浏览者可以根据标题来判断是否继续查看该网页。网页中的脚本一般都放在head…/head之间，以便在网页主体中使用脚本时已经加载完成，否则脚本运行会出错。 2.1 头部包括的内容 前面讲了头部head之间内容的重要性。文件头部一般包含标题标签、meta标签、内联样式表及预定义脚本等，接下来介绍头部之间所包含的内容。 2.1.1 网页标题 网页标题显示在浏览器的标题栏上。当浏览者打开网页时，从网页中得到的第一条信息便是网页标题。网页标题可以简明地概括网页的内容，点明网页的主题。从而浏览者可以决定是否往下浏览。另外，网页标题也是搜索引擎robots搜索时的主要依据。在大量的网络信息中，浏览者如果想搜索到自己的网页，最好的办法是定义一个合适的标题。 2.1.2 meta标签 meta标签在网页内容中不显示，但它的作用不容忽视。meta标签主要用于为搜索引擎robots定义页面主题信息，它还可以用于定义用户浏览器上的cookie、鉴别作者、设定页面格式、标注内容提要和关键字；同时，它还可以设置页面，使其根据定义的时间间隔刷新自己，以及设置RASC内容等级等。 2.1.3 样式表和脚本 网页内联定义的样式表通常放在网页头部。这样，可以在网页内容加载之前先定义内容中需要的样式，从而防止样式的不完全载入，以及破坏网页的结构和外观等现象。其次，当网页中的元素需要修改样式时，方便进行查找和修改，从而使页面的结构清晰明了。 2.2 查看头部 虽然头部的内容不会显示在网页主体内，但是Dreamweaver CS3依然提供了编辑工具，下面是查看头部内容的具体步骤： 2.3 设置标题 设置网页标题很简单，具体步骤如下： 2.3 设置标题 新建基本页，网页默认的标题为“无标题文档”。单击【文件】|【保存】命令，保存网页，按F12键进行预览，效果如图 。 2.3 设置标题 单击【页面属性】按钮，弹出【页面属性】对话框，如图所示 2.4 认识meta标签 meta标签的功能强大，但不是可见元素，所以不能用设置可见元素的方法进行设置。下面讲解如何在Dreamweaver CS3中插入meta标签，并对其进行设置。在新建的网页中已经包含了一个meta标签，源码如下： meta http-equiv=Content-Type content=text/html; charset=gb2312 / 2.4 认识meta标签 上面源码是设置文档类型和网页字符集。如果需要添加其他功能，需要插入meta标签的其他属性。例如添加网页描述，具体步骤如下： 2.4 认识meta标签 以上是通过插入标签的方法，Dreamweaver CS3还提供了更方便的方法，具体步骤如下： 2.5 HTTP标题信息http-equiv 首先介绍http-equiv属性。http-equiv类似于HTTP的头部协议，会返回一些有用信息给浏览器，以帮助浏览器正确和精确地显示网页内容。常用的http-equiv属性值有Content-Type、Content-Language 、Refresh、Expires、Pragma、Set-Cookie、Window-target、Enter、Exit、MSThemeCompatible和Content-Script-Type等。下面进行详细讲解。 2.5.1 设置文档类型与语言属性Content-Type Content-Type属性用来设置文档类型。浏览器从content的属性值中获取网页的语言类型，判断是HTML还是XML，通常设置为text/html。charset指明网页中文字使用的字符集。例如，如果是简体中文，charset=gb2312；如果是繁体中文，则charset=big5。若未正确设置语言文字集，将可能导致网页显示混乱。使用格式如下： meta http-equiv=Content-Type content=text/html; charset=gb2312 / 2.5.2 设置自动刷新属性Refresh Refresh属性设置页面自动刷新的时间，或自动跳转到其他的网页。此时的content属性值是自动刷新的时间或自动跳转的时间，单位是秒。URL是设置跳转网页的地址。使用的格式如下：源码设置为10秒后，自动跳转到百度网站。 Meta http-equiv=Refresh Content=10; Url= 上面的源码设置为10秒后，自动跳转到百度网站。 2.5.3 设置缓存时间属性Expires