2.3　head标签

本节继续介绍head标签元素的概念及用法，其在HTML网页中有着非常重要的作用。

2.3.1　基本概念

head标签元素用于定义HTML网页的头部，其是所有头部标签元素的容器。在head标签元素中，可以加入元信息（meta）描述、添加CSS层叠样式表（CSS）、引用外部JavaScript脚本文件（可选），定义HTML网页标题以及与其他文档关系等功能。另外，绝大部分在HTML网页头部定义的数据都不会在页面内容中进行显示。

2.3.2　功能作用

head标签元素位于HTML网页的头部，是以<head>作为开始标记，并以</head>作为结束标记之间的内容。一般来讲，head头部中包含meta、base、link、script、title等常用标签元素，这些标签元素的详细说明如下：

  • meta标签元素可以定义的内容十分广泛，譬如HTML网页介绍、HTML网页关键字、HTML网页编码、页面作者、自动跳转定义以及robots协议等内容，均可以放置在其中。
  • base标签元素是定义HTML网页默认打开方式的声明。
  • link标签元素用于定义目标文件链接，包括对外部层叠样式表（CSS）文件的引用、对外部脚本（JS）文件的引用以及对favicon.ico图标的引用等。
  • script标签元素既可以用于引入外部脚本（JS）文件，也可以定义嵌入HTML网页内部的脚本代码。
  • style标签元素则用于定义直接嵌入网页的层叠样式表（CSS）代码。
  • title标签元素用于定义HTML网页的唯一标题。

2.3.3　使用方法

下面是一个使用head标签元素的HTML 5示例代码（详见源代码ch02/ch02-html-head.html文件）。

【代码2-2】

【代码解析】

第03～19行代码就是使用head标签元素的方法。为了便于读者全面地了解head标签元素的使用方法，该代码段将HTML网页头部可能用到的标签元素尽可能地包含了进去。下面逐一对这些标签元素进行介绍。

第04～10行代码是对meta标签元素的使用，meta是HTML网页头部的一个辅助性标签元素。meta标签元素共有两个属性，分别是http-equiv属性和name属性。其中，http-equiv属性相当于HTTP协议文件头的作用，通过该属性可以向浏览器回传数据信息，以帮助准确地显示网页内容，其属性值放置在与之对应的content属性中。而name属性主要用于描述网页，包括分类信息的内容以及便于搜索引擎robots协议查找的内容，其属性值同样放置在与之对应的content属性中。

第04行代码中http-equiv属性定义为"Content-Type"，Content-Type表示设定的显示字符集，本示例代码中对应的content属性定义为"text/html; charset=utf-8"，表明本HTML网页设定的显示字符集为"utf-8"，为通用的Unicode编码格式（utf-8编码支持中英文字符，相比于传统gb2312中文编码更通用）。

第05行代码中http-equiv属性定义为"Content-Language"，Content-Language表示HTML网页所设定的页面语言，本示例代码中对应的content属性定义为"zh-cn"，表明本HTML网页设定的页面语言为简体中文，如果使用繁体中文则为"zh-tw"，而使用"en-us"则表示英语（美国）。

第06行代码中name属性定义为"author"，author表示网页作者，本示例代码中对应的content属性定义为"king"。

第07行代码中name属性定义为"revised"，revised表示网页最后一次更改的作者及时间，本示例代码中对应的content属性定义为"king,01/15/2017"。

第08行代码中name属性定义为"generator"，generator表示创建和编辑网页使用的工具软件，本示例代码中对应的content属性定义为"WebStorm 10.0.4"。

第09行代码中name属性定义为"description"，description表示对网页功能、内容的相关描述，是属于比较重要的一个meta属性，本示例代码中对应的content属性定义为"HTML 5文档head标签元素使用"。

第10行代码中name属性定义为"keywords"，keywords表示网页的关键词，本示例代码中对应的content属性定义为"HTML 5, CSS, JavaScript"。

第11行代码是对link标签元素的使用，link用于定义文档与外部资源的关系，最常见的用法就是定义外部链接层叠样式表（CSS）。在本行代码中定义了保存在css目录下的外部样式表，文件名称为"style.css"。

第12～14行代码是对style标签元素的使用，script用于定义直接嵌入网页的层叠样式表（CSS）代码。先不管这段代码具体实现了什么功能，只要知道第13行代码是对<h1>标签元素进行了样式定义就可以了。

第15～17行代码是对script标签元素的使用，script用于引入外部JavaScript脚本文件或内部定义的JavaScript脚本代码。其中，第16行代码定义了一行脚本代码，用于在页面主体中输出一行文本信息。

第18行代码使用<title>标签元素定义了网页标题是“HTML 5之网页标题”。

下面运行页面，如图2.2所示。

图2.2　head标签

本周热推：
网页设计与网站建设完全实战手册网页设计与制作中文版Dreamweaver CC+Flash CC+Photoshop CC网页设计实战视频教程形·色：网页设计法则及实例指导CSS+DIV网页样式与布局案例指导
上一章目录下一章