第二章 头部和主体标签

1、本章内容本章内容2.1 HTML2.1 HTML标签与元素标签与元素2.2 HTML2.2 HTML头部内容头部内容2.3 HTML2.3 HTML主体内容主体内容2.4 2.4 颜色的设置颜色的设置2.1 HTML2.1 HTML标签与元素标签与元素HTML 文档是由文档是由 HTML 元素构成的文本文件元素构成的文本文件。HTML 元素是通过使用元素是通过使用 HTML 标签进行定义的标签进行定义的。HTML 标签是用来标记标签是用来标记 HTML 元素的。元素的。 HTML 标签被标签被 符号包围。符号包围。 这些包围的符号叫作尖括号。这些包围的符号叫作尖括号。 HTML 标签通常是成对

2、出现的。例如标签通常是成对出现的。例如 和和 。 位于起始标签和终止标签之间的文本是元素的内容。位于起始标签和终止标签之间的文本是元素的内容。 HTML 标签标签对大小写不敏感对大小写不敏感， 和和 的作用的相同的的作用的相同的 未来未来WEB标准要求标准要求HTML标签代码统一采用小写标签代码统一采用小写标签标签元素元素 头部头部（Head）主体主体（Body）描述浏览器所描述浏览器所需的信息需的信息包含所要说明的具包含所要说明的具体内容体内容 2.2 HTML2.2 HTML头部内容头部内容2.2.1 HTML2.2.1 HTML头部标签头部标签2.2.2 2.2.2 定义和用法定义和用法

3、2.2.3 2.2.3 定义和用法定义和用法2.2.4 2.2.4 定义和用法定义和用法2.2.1 HTML2.2.1 HTML头部标签头部标签标签标签含义基底网址标签基底网址标签基准文字标签基准文字标签标题标签标题标签元信息标签元信息标签样式标签样式标签外部链接标签外部链接标签脚本标签脚本标签2.2.2 2.2.2 定义和用法定义和用法定义和用法定义和用法 标签为标签为页面上的所有链接规定默认地址或默认目标页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填中提取相应的元素来填写相对写相对 URL 中的空白。中

4、的空白。使用使用 标签可以改变这一点。浏览器随后将不再使用当前文标签可以改变这一点。浏览器随后将不再使用当前文档的档的 URL，而使用指定的基本，而使用指定的基本 URL 来解析所有的相对来解析所有的相对 URL。这。这其中包括其中包括 、 标签中的标签中的 URL。基本语法基本语法基本语法：基本语法： 语法解析：语法解析： href属性指定文档的基础属性指定文档的基础URL地址，该属性在地址，该属性在标签中是标签中是必须存必须存在在的；的；Target属性定义打开页面的窗口，取值如表所示：属性定义打开页面的窗口，取值如表所示：属性值描述_parent将网页加载到包含该链接的框架的父框架或窗口

5、中将网页加载到包含该链接的框架的父框架或窗口中_blank将网页加载到一个新的未命名的浏览器窗口中将网页加载到一个新的未命名的浏览器窗口中_self将网页加载到与链接相同的框架或窗口中将网页加载到与链接相同的框架或窗口中_top将网页加载到整个浏览器窗口中，并删除所有框架将网页加载到整个浏览器窗口中，并删除所有框架实例（实例（基底网址基底网址.htm.htm）2.2.3 2.2.3 定义和用法定义和用法定义和用法定义和用法 标签可以设定基准的文字字体、字号和颜色。标签可以设定基准的文字字体、字号和颜色。一旦遇到页面中其他相关标签一旦遇到页面中其他相关标签未定义未定义文字或段落的样式时，将套用文

6、字或段落的样式时，将套用基准的文字样式。基准的文字样式。只有只有 Internet Explorer 支持支持 标签。应该避免使用该标签。应该避免使用该标签。标签。在在 HTML 4.01 中，不赞成使用中，不赞成使用 basefont 元素；在元素；在 XHTML 1.0 Strict DTD 中，不支持中，不支持 basefont 元素元素。基本语法基本语法基本语法：基本语法： 语法解析：语法解析： face定义了字体，多种字体间用定义了字体，多种字体间用, 分开；分开；size定义了字定义了字号，号，value取值范围为取值范围为17或或-1-7或或+1+7；color定义了颜定义了颜色

7、，色，value值为英文名称或十六进制代码。值为英文名称或十六进制代码。实例（实例（基准文字基准文字.htm.htm）2.2.4 2.2.4 定义和用法定义和用法定义和用法定义和用法 元素可提供有关页面的元信息（元素可提供有关页面的元信息（meta-information），比），比如针对搜索引擎和更新频度的如针对搜索引擎和更新频度的描述和关键词描述和关键词。 标签位于文档的头部，不包含任何内容。标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的标签的属性定义了与文档相关联的名称名称/值对值对 。基本语法基本语法基本语法：基本语法： 语法解析：语法解析： meta标签分为两大

8、部分：标签分为两大部分：HTTP标题信息（标题信息（ http-equiv ）和页面描述信息（）和页面描述信息（ name ）。）。http-equiv http-equiv 属性属性http-equiv 类似于类似于HTTP的头部协议，他回应给浏览器一些有用的信的头部协议，他回应给浏览器一些有用的信息，以帮助正确和精确的显示网页内容。息，以帮助正确和精确的显示网页内容。使用带有使用带有 http-equiv 属性的属性的 标签时，服务器将把标签时，服务器将把名称名称/值对值对添加到发送给浏览器的内容头部。添加到发送给浏览器的内容头部。 常见类型有常见类型有content-type（文档类型）

9、、（文档类型）、 refresh （刷新）（刷新）expires（日期时间）（日期时间） 、 event（事件）（事件） 等。等。类型一：类型一：content-typecontent-type当服务器向浏览器发送文档时，会先发送许多名称当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服值对。虽然有些服务器会发送许多这种名称务器会发送许多这种名称/值对，值对，但是所有服务器都至少要发送一个：但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个。这将告诉浏览器准备接受一个 HTML 文档。文档。常用编码类型：常用编码类型： GB23

10、12 - 简体中文简体中文 utf-8 - 简体中文简体中文 HZ - 简体中文（简体中文（新加坡新加坡） BIG5 - 繁体中文（繁体中文（台湾台湾） ISO-8859-1 - 英文英文类型二：类型二：refreshrefresh每隔几秒钟后刷新页面内容，不仅能够完成页面自身的自动刷新，也每隔几秒钟后刷新页面内容，不仅能够完成页面自身的自动刷新，也可以实现页面之间的跳转过程。可以实现页面之间的跳转过程。解析：解析：5为跳转间隔的时间，为跳转间隔的时间，单位为秒单位为秒；url取值为跳转后打开的文件取值为跳转后打开的文件地址，可省略，地址，可省略，默认为当前文档地址默认为当前文档地址。类型三：

11、类型三：cache-controlcache-control禁止客户端浏览器缓存网页内容。禁止客户端浏览器缓存网页内容。解析：解析： cache-control为缓存控制，为缓存控制， content中定义了禁止缓存功中定义了禁止缓存功能。能。类型四：类型四：expiresexpires设定网页在客户端浏览器缓存的有效期限。设定网页在客户端浏览器缓存的有效期限。解析：解析： expires为缓存期限，为缓存期限， content中定义了到期时间，其内为标中定义了到期时间，其内为标准格式，都使用英文和数字进行设定，如：准格式，都使用英文和数字进行设定，如： fri, 31 dec 2010 11

12、 40 05 ，则到期时间为，则到期时间为2010年年12月月31日星期五日星期五 上午上午11点点40分分05秒秒。注意：必须使用注意：必须使用GMT的时间格式，或直接设为数字的时间格式，或直接设为数字(表示多少表示多少秒秒后过后过期期)。 类型五：类型五：转场效果转场效果(IE)(IE)转场效果即网页过渡，转场效果即网页过渡，进入或离开进入或离开网页时的切换效果。网页时的切换效果。解析：解析：event为转场效果事件名称，取值有：为转场效果事件名称，取值有： page-enter / page-exit (进入进入/退出本网页时有网页过渡效果退出本网页时有网页过渡效果)；duration设

13、定转场效果持续时设定转场效果持续时间，间，最大可设为最大可设为30秒秒；transition为过渡效果的编号，可设置为过渡效果的编号，可设置24种切种切换效果，换效果，取值范围为取值范围为023。过渡效果表过渡效果表效果效果效果编号效果编号效果效果效果编号效果编号盒状收缩盒状收缩0向左擦除向左擦除6盒状展开盒状展开1向右擦除向右擦除7圆形收缩圆形收缩2垂直百叶窗垂直百叶窗8圆形展开圆形展开3水平百叶窗水平百叶窗9向上擦除向上擦除4横向棋盘式横向棋盘式10向下擦除向下擦除5纵向棋盘式纵向棋盘式11过渡效果表（续表）过渡效果表（续表）效果效果效果编号效果编号效果效果效果编号效果编号溶解溶解12阶梯

14、状向左上展开阶梯状向左上展开18左右向中部收缩左右向中部收缩13阶梯状向右下展开阶梯状向右下展开19中部向左右展开中部向左右展开14阶梯状向右上展开阶梯状向右上展开20上下向中部收缩上下向中部收缩15随机线条随机线条21中不向上下展开中不向上下展开16随机垂直线条随机垂直线条22阶梯状向左下展开阶梯状向左下展开17随机随机23类型六：类型六：淡入淡出效果淡入淡出效果(IE)(IE)实现网页以淡入淡出效果进行切换。实现网页以淡入淡出效果进行切换。解析：解析：event为转场效果事件名称，取值有：为转场效果事件名称，取值有： page-enter / page-exit (进入进入/退出本网页时有

15、网页过渡效果退出本网页时有网页过渡效果)；duration设定转场效果持续时设定转场效果持续时间，间，最大可设为最大可设为30秒秒；。；。name name 属性属性name属性主要用于描述网页内容。属性主要用于描述网页内容。与之对应的属性值为与之对应的属性值为content，content中的内容主要是便于搜索引擎中的内容主要是便于搜索引擎机器人查找信息和分类信息用的机器人查找信息和分类信息用的 。 常见类型有常见类型有Keywords 、 description 、 robots 、 author 、generator等。等。类型一：类型一：KeywordsKeywordskeywords

16、用来告诉搜索引擎你网页的关键字是什么用来告诉搜索引擎你网页的关键字是什么 。便于搜索引擎搜索网页，关键字之间要用逗号分割。便于搜索引擎搜索网页，关键字之间要用逗号分割。Google建议建议Keywords的字符数串不超过的字符数串不超过20个个 。 类型二：类型二：descriptiondescription description用来告诉搜索引擎你的网站主要内容用来告诉搜索引擎你的网站主要内容 。Description详细信息（详细信息（Google建议建议Description的字符数不超过的字符数不超过200个）。个）。 类型三：类型三：robotsrobotsrobots用来告诉搜索机

17、器人哪些页面需要索引，哪些页面不需要索引。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有的参数有all,none,index,noindex,follow,nofollow，默认是，默认是all。 并不是所有的搜索引擎都支持这个并不是所有的搜索引擎都支持这个tag，它们共同支持一个功能更强的，它们共同支持一个功能更强的，叫做叫做robots.txt的文本文件来达到上述功能。的文本文件来达到上述功能。 类型四：类型四：authorauthor说明：标注网页的作者说明：标注网页的作者 。举例：举例： 。 类型五：类型五：generatorgenerator说明：标

18、注设计网页的编辑器说明：标注设计网页的编辑器 。举例：举例： 。 综合应用综合应用2.3 HTML2.3 HTML主体内容主体内容2.3.1 2.3.1 主体标签主体标签2.3.2 2.3.2 正文颜色正文颜色2.3.3 2.3.3 链接颜色链接颜色2.3.4 2.3.4 背景背景2.3.5 2.3.5 边距边距2.3.1 2.3.1 主体标签主体标签定义和用法定义和用法在在和和中放置的是页面中所有的内容，如中放置的是页面中所有的内容，如图片、文图片、文字、表格、表单、超链接字、表格、表单、超链接等设置。等设置。标签有自己的属性，标签有自己的属性，设置设置 标签内的属性标签内的属性，可控制，可

19、控制整个页面的显示方式。整个页面的显示方式。基本语法：基本语法：。语法解析：语法解析：attribute指指body标签的属性名，如定义文字颜色、背标签的属性名，如定义文字颜色、背景颜色、背景图片等。景颜色、背景图片等。BodyBody标签属性表标签属性表属性属性描述描述text设置页面文字的颜色设置页面文字的颜色link设置初始的链接颜色设置初始的链接颜色alink设置鼠标单击时的链接颜色设置鼠标单击时的链接颜色vlink设置访问后的链接颜色设置访问后的链接颜色background设置页面背景图像（在设置页面背景图像（在css中设置重复属性）中设置重复属性）bgcolor设置页面背景颜色设置

20、页面背景颜色bgproperties设置页面背景图像为固定，不随页面的滚动而滚动设置页面背景图像为固定，不随页面的滚动而滚动BodyBody标签属性表（续）标签属性表（续）属性属性描述描述leftmargin设置页面的左边距设置页面的左边距topmargin设置页面的上边距设置页面的上边距rightmargin设置页面的右边距设置页面的右边距bottommargin设置页面的下边距设置页面的下边距2.3.2 2.3.2 正文颜色正文颜色设定页面文字颜色的设定页面文字颜色的body标签的属性：标签的属性：text 。作用范围：作用范围：页面中所有的未单独进行定义颜色的文字页面中所有的未单独进行定

21、义颜色的文字。 color_value取值为取值为颜色英文单词或十六进制值颜色英文单词或十六进制值，如，如 red / #FF0000 。2.3.3 2.3.3 链接颜色链接颜色与页面链接颜色相关的与页面链接颜色相关的body标签的属性有：标签的属性有：link、alink 、 vlink 。link 定义定义默认默认的没有点击过的初始链接文字颜色，的没有点击过的初始链接文字颜色， alink 定义定义鼠标点击链接文字时的链接文字颜色，鼠标点击链接文字时的链接文字颜色，vlink定义点击过后的链接文字定义点击过后的链接文字颜色颜色。 color_value取值为取值为颜色英文单词或十六进制值颜

22、色英文单词或十六进制值，如，如 red / #FF0000 。2.3.4 2.3.4 背景背景与页面背景相关的与页面背景相关的body标签的属性有：标签的属性有： bgcolor 、 background 、 bgproperties 。bgcolor定义定义页面的页面的颜色，颜色， background定义页面的背景图像，定义页面的背景图像， bgproperties定义背景属性定义背景属性。 color_value取值为取值为颜色英文单词或十六进制值颜色英文单词或十六进制值，如，如“ red / #FF0000 ” ；img_file_url指图片文件所在的路径，即指图片文件所在的路径，即

23、指向图像文件所指向图像文件所在位置的地址在位置的地址；通过；通过bgproperties 定义了背景属性，定义了背景属性，fixed设为固定设为固定效果。效果。2.3.5 2.3.5 边距边距与页面边距相关的与页面边距相关的body标签属性有：标签属性有： leftmargin 、 rightmargin 、 topmargin、bottommargin 。leftmargin 、 rightmargin 、 topmargin、bottommargin分别定义分别定义页面左边距、右边距、上边距、下边距，即内容和浏览器左部、右部、页面左边距、右边距、上边距、下边距，即内容和浏览器左部、右部、上

24、部、下部边框之间的距离上部、下部边框之间的距离。 value取值为数字，默认单位为像素。取值为数字，默认单位为像素。2.4 2.4 颜色的设置颜色的设置1、颜色值：关键字（英文单词）或、颜色值：关键字（英文单词）或RGB格式的数字格式的数字2、颜色：由、颜色：由 red 、 green 、 blue 三原色组成三原色组成3、在、在 HTML 中还可用中还可用十六进位数十六进位数置义颜色置义颜色4、HTML 分别给予分别给予两个两个十六进位去置义三原色，每个原色可有十六进位去置义三原色，每个原色可有 256 种彩种彩度，故三原色可混合成度，故三原色可混合成16777216（256*256*256）种颜色。）种颜色。常见的颜色名称常见的颜色名称颜色名称颜色名称颜色值颜色值BlackWhiteGreenYellowPurpleSilverMaroonTeal(黑黑)(白白)(绿绿)(黄黄)(紫紫)(银银)(褐褐)(蓝绿蓝绿)#000000