在构建网页的过程中,我们经常需要为网页设定一些基础信息,例如网页的标题和作者等。为了实现这一目的,HTML提供了一系列专门用于设置网页信息的标签。这些标签通常被放置在
<head>标签内部,也被称为HTML文档的头部相关标签。接下来,我们将详细探讨常用的HTML文档头部标签中的<title>和<meta>标签。
(1)<title>标签
<title>标签的主要功能是为HTML页面设定标题,也就是为网页赋予一个名称。在网页的结构中,<title>标签必须位于<head>标签内。一个HTML文档中只能包含一个<title>标签,而<title></title>标签之间的内容将会显示在浏览器窗口的标题栏中。例如,如果我们希望将某个页面的标题设置为“轻松学习HTML.5”,示例代码如下:
上述代码所对应的页面效果如下图所示:
(2)<meta>标签
<meta>标签用于定义页面的元信息(元信息不会在最终的页面效果中直接显示),并且可以重复出现在标签中。在HTML中,<meta>标签是一个单标签,它本身不包含任何内容,仅用于表示网页的相关信息。通过标签的属性,我们可以定义页面的相关参数。
例如,我们可以为搜索引擎提供网页的关键字、作者姓名、内容描述,以及定义网页的刷新时间等。下面将介绍<meta>标签常用的几组设置,具体如下。
<meta name-”名称”content-”值”>;在<meta>标签中,我们使用 name 属性和 content 属性为搜索引擎提供信息。其中,name属性用于提供搜索内容的名称,而content属性用于提供对应的搜索内容的值。这些属性的具体应用如下。
设置网页关键字,例如某个图像网站的关键字设置,示例代码如下:
在上述示例代码中,name属性的属性值为”keywords”,该属性值用于定义搜索内容的名称为网页关键字;content属性的属性值用于定义关键字的具体内容,多个关键字内容之间可以用“,”分隔。
设置网页描述,例如某个图像网站的描述信息设置,示例代码如下:
在上述示例代码中,name属性的属性值为“description”,该属性值用于定义搜索内容的名称为网页描述;content属性的属性值用于定义描述的具体内容。网页描述的文字不宜过多,能够清晰地描述即可。
设置网页作者,例如可以为网站增加作者信息,示例代码如下:
在上述示例代码中,name属性的属性值为“author”,该属性值用于定义搜索内容的名称为网页作者;content属性的属性值用于定义具体的作者信息。
<meta http-equiv=”名称”content=”值”>;在<meta>标签中,http-equiv属性和content属性可以设置服务器发送给浏览器的HTTP头部信息,为浏览器显示该页面提供相关的参数标准。其中,http-equiv属性用于提供参数类型,而content属性用于提供对应的参数值。这些属性的具体应用如下。
设置字符集,例如某个图像官网字符集的设置,示例代码如下:
在上述示例代码中,http-equiv属性的属性值为“Content-Type”,content属性的属性值为“text/html”和“charset=gbk”,两个属性值之间用“:”隔开。其中,“text/html”用于说明当前文档类型为HTML,“charset=gbk”用于说明文档字符集为GBK(中文编码)。
目前最常用的国际化字符集编码格式是UTF-8,常用的中文字符集编码格式主要是GBK和GB2312。当用户使用的字符集编码格式与当前浏览器不匹配时,网页内容就会出现乱码。新版本的HTML.5简化了字符集的写法,示例代码如下:
设置页面自动刷新与跳转,例如定义某个页面10秒后跳转至百度首页,示例代码如下:
在上述示例代码中,http-equiv属性的属性值为“refresh”,content属性的属性值为数值和URL。两个属性值之间用“:”隔开,分别用于指定跳转时间和目标页面的URL。跳转时间默认以秒为单位。