首页 > 代码库 > <head>标签和它的小伙伴们

<head>标签和它的小伙伴们

 

head标签是HTML文档中最基本的必须元素之一(body:对,还有我):

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表(link)、提供元信息(meta)等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<head>可以包含6个元素小伙伴:<title><meta><link><style><script>和<base>。其中<title>是和它同生共死的挚友,它是 head 部分中唯一必需的元素。也就是一个HTML文档必须包含标题。

—— * —— * —— * —— * —— * ——

下面分别介绍一下这六个标签元素,包括定义、属性和用法:

铁杆儿小伙伴1: <title> 可定义文档的标题。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

属性(全部不常用):dir/lang/xml:lang

用法:

<html>
 
  <head>
    <title>XHTML Tag Reference</title>
  </head>

  <body>
    The content of the document......
  </body>

</html>

 

小伙伴2:<base> 为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用<base>标签指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

属性:href:URL  规定页面中所有相对链接的基准 URL

   target:_blank/_parent/_self/_top/framename 在何处打开页面中所有的链接

用法:

<head>
  <base href="http://www.w3school.com.cn/i/" />
  <base target="_blank" />
</head>

<body>
  <img src="eg_smile.gif" />
  <a href="http://www.w3school.com.cn">W3School</a>
</body>

 

小伙伴3:<meta> 提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。位于文档的头部,不包含任何内容。其属性定义了与文档相关联的名称(http-equiv/name)/值(content)对。

属性:content(必需):some_text 定义与 http-equiv 或 name 属性相关的元信息

   name:author/description/keywords/generator/revised(修订)/others 把 content 属性关联到一个名称

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助:

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

       http-equiv:content-type/expires/refresh/set-cookie 把 content 属性关联到 HTTP 头部

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

  content:提供了名称/值对中的值。该值可以是任何有效的字符串。始终要和 name 属性或 http-equiv 属性一起使用。

  scheme:用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

 

 

小伙伴4:<link> 定义文档与外部资源的关系。最常见的用途是链接样式表。

属性:rel:stylesheet...  规定当前文档与被链接文档之间的关系

   type:MIME_type  规定被链接文档的 MIME 类型

   href:URL  规定被链接文档的位置

用法:

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

 

 

小伙伴5:<style>  用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

属性:type:text/css 规定样式表的 MIME 类型

   media:为样式表规定不同的媒介类型

<html>
<head>
<style type="text/css">
  h1 {color:red}
  p {color:blue}
</style>
</head>

<body>
  <h1>Header 1</h1>
  <p>A paragraph.</p>
</body>
</html>

 

 

 

小伙伴6:<script> 用于定义客户端脚本,比如 JavaScript。既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。

 

属性:type(必需):text/javascript 指示脚本的 MIME 类型

   src:URL 规定外部脚本文件的 URL

<script type="text/javascript">
    document.write("Hello World!")
</script>

 

以上就是head标签和它的小伙伴们~经常见到用到却经常被我们忽略,有时一些问题可能不是出在文档的内容上,而是在head部分没有设置好。

参考:http://www.w3school.com.cn/tags/tag_head.asp

 

<head>标签和它的小伙伴们