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

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

2024-10-12 20:28:02   214人阅读

 

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>标签和它的小伙伴们


联系
我们