IT兄弟连 HTML5教程 HTML文档头部元素head

IT兄弟连 HTML5教程 HTML文档头部元素head

HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中。它用于包含当前文档的有关信息,例如网页标题和关键字等。通常位于头部的内容都不会在网页上直接显示,而是通过另外的方式起作用。在<head>标记中可以使用的标记不多,包含一些常见的如<title>、<base>、<link>和<meta>等标记。<head>与</head>之间必须有<title>。

<title>元素

浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。编写每个页面时,应该给其指定一个标题。HTML文件的标题使用<title>元素,<title>是<head>元素的子元素,用于将内容显示在浏览器的标题栏中,用以说明文件的用途,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。每个HTML文档都应当有标题,在浏览者保存该网页后成为保存后网页的文件名。另外,搜索引擎在收录该页面时,将网页标题作为搜索的关键字,并将其在搜索引擎页面中作为标题显示。基本语法格式如下所示:

<title> 兄弟连IT教育:HTML5学科</title>                    <!-- 在头部定义的标题标记  -->

使用实际描述站点内容的标题是非常重要的。例如,站点的主页面不应当只使用“网站首页”标注,而是应当采用能够描述站点内容的语句,通常都是“公司名称+公司产品”。对于优秀的页面标题,访问者在阅读它之后就应当能够了解该页面的内容,而不需要查看页面的实际内容。

注意

一个文档只能使用一个<title>元素,<title>元素中只能包含关于页面标题的文本,而不能包含其他任何元素。另外,<title>标签是<head>标签中唯一要求包含的东西。

<base>元素

在页面中使用<a>、<img>、<link>、<form> 标签,都需要指定URL。通常情况下,如果在URL中使用相对路径,浏览器会从当前文档的URL中提取相应的元素来填写相对URL路径中的空白。而<base> 标签为页面上的所有链接规定默认地址或默认目标,浏览器随后将不再使用当前文档的URL,而使用指定的基本URL来解析所有的相对URL。在网页文档中,所有的相对地址形式的URL都是相对于这里定义的基URL而言的。例如,如果在<base>中指定基URL为http://www.itxdl.cn,那么在网页中出现的相对链接“test.html”将对应http://www.itxdl.cn/ test.html的页面。因此,如果网页位置发生变化,可以通过修改<base>来适应这一变化。一篇文档中的<base>标记最多只能有一个,而且必须放于头部,并且应该在任何包含URL地址的语句之前。基本语法格式如下所示:

<base href="http://www.itxdl.cn/h5/" target="_blank" />       <!-- base标签使用方法        -->

在<base>标签中href是必需的属性,规定页面中所有相对链接的基准URL。而target是可选属性,设置在何处打开页面中所有的链接。

<link>元素

<link>标签定义文档与外部资源的关系,最常见的用途是链接样式表。该元素始终是空元素,它仅包含属性,浏览器会分析<link>中的内容,自动读取并加载相应的文件。基本语法格式如下所示:

<link rel="stylesheet" type="text/css" href="style.css" />       <!-- 在头部链接CSS文件位置  -->

<link>元素只能存在于head部分,不过它可出现任何次数。关于<link>元素的应用将在CSS一章中详细介绍。

<meta>元素

<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,也能够提供文档的作者、描述、编码和语言等多种元信息,但不包含任何内容。该标签位于文档的头部,可以包含任意数量的<meta>标记。该标签的属性定义了与文档相关联的名称/值对,来定义文件信息的名称、内容等。这个标记是实现元数据的主要标记,通过该标记中的http-equiv、name、content属性,可以建立多种多样的效果和功能。基本语法格式如下所示:

<meta name="某个设置值" content="对该设置值进行具体补充说明的信息" />

<meta http-equiv="某个设置值" content="对该设置值进行具体补充说明的信息" />     

下例给出一段包含<head>标记的源代码,以兄弟连IT教育官方网站为例。登录http://www.itxdl.cn后,通过查看源文件的方式即可找到以下的头部信息。

IT兄弟连 HTML5教程 HTML文档头部元素head

以上是头部信息的一些基本用法,其中最重要的就是<title>标记及<meta>中的keywords和description属性的设定。因为这两个语句可以让搜索引擎更准确地发现你的站点,吸引更多的人访问。根据现在流行搜索引擎的工作原理,搜索引擎先派机器人自动在WWW上搜索。当发现新的网站时,便会检索页面中的keywords和description,并将其加入到自己的数据库,然后再根据关键词的密度对网站进行排序。在HTML5中可以使用对<meta>元素直接追加charset属性的方式来指定字符编码,从HTML5开始,对于文件的字符编码推荐使用UTF-8。如下所示:

<meta charset= "UTF-8 ">                         <!--  HTML5  -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <!--  HTML以前版本  -->

上一篇:HTML5 ES6 语法基础


下一篇:IT兄弟连 HTML5教程 了解HTML5的主流应用3