HTML <head> 元素

HTML <head> 元素提供有关文档的通用信息（元数据），包括其标题和其脚本和样式表的链接等。

一份在头部带有 <title> 标签的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文档标题</title>
</head>
<body>
  文档内容......
</body>
</html>

尝试一下 »

截图

一份在头部带有 <title> 标签的 HTML 文档

特性

内容类别 无。
允许的内容 如果元素是来自 <iframe> srcdoc，或者如果标题信息可从较高级协议获得，则允许零到多个元数据内容。否则允许一个到多个元数据内容，其中包含一个 <title> 元素。
标签省略 如果 <head> 元素中的第一个是元素，则可以省略开始标签。如果跟在 <head> 元素后的第一个不是空白字符或注释则可以忽略结束标签。
允许的父元素 <html> 元素，<head> 作为第一个子元素。
允许的 ARIA 角色 无
DOM 接口 HTMLHeadElement

属性

该元素包含了全局属性。

profile

已废弃 HTML4.01，已过时 HTML5

一个或多个元数据配置文件的 URI，以空格分隔。

更多实例

本例演示如何使用 <base> 标签规定页面中所有链接的默认 URL 和默认 target。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base href="https://www.mifengjc.com//images/" target="_blank">
</head>
<body>
  <p><img src="/examples/logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.mifengjc.com/images/logo.png"</p>

  <p><a href="https://www.mifengjc.com/">mifengjc.com</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</p>
</body>
</html>

尝试一下 »

截图

本例演示如何使用 <base> 标签规定页面中所有链接的默认 URL 和默认 target。

本例演示如何在 <head> 部分添加样式信息。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    h1 {
      color: red;
    }

    p {
      color: blue;
    }
  </style>
</head>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>

</html>

尝试一下 »

截图

本例演示如何在 <head> 部分添加样式信息。

本例演示如何使用 <link> 标签链接到一个外部样式表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/examples/styles.css">
</head>

<body>
  <h1>我是通过样式文件 styles.css 渲染后显示的。</h1>
  <p>我也是。</p>
</body>

</html>

尝试一下 »

截图

本例演示如何使用 <link> 标签链接到一个外部样式表。

注意

如果在代码中省略了该标签，则现代的 HTML5 兼容浏览器会自动构造一个 <head> 元素。但是旧浏览器不能保证会自动创建一个 <head> 元素。

规范

规范 状态 备注
HTML Living Standard
<head> 的定义		 现行的标准 自最新快照以来没有变化
HTML5
<head> 的定义		 推荐 将 profile 设为过时
HTML 4.01 Specification
<head> 的定义		 推荐 -

HTML 4.01 与 HTML5 之间的差异

HTML5 不再支持 profile 属性。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 1.0 支持 1.0 支持 支持 支持
profile 1.0 支持 1.0 支持 支持 支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 1.0 支持 支持 支持
profile 支持 支持 支持 1.0 支持 支持 支持

相关链接