HTML - <head> 标签

HTML <head> 标签用作元数据的容器，位于html 标签之后。元数据基本上是关于head部分中数据的数据。因此，head标签中的信息被浏览器和搜索引擎使用，但在页面本身不可见。

通常，head标签包含文档标题、脚本或样式表链接以及描述文档结构和内容的元标签等元素。

语法

<head>
...
</head>

属性

HTML head标签支持HTML 的全局属性

HTML <head> 标签还支持以下附加属性：

属性	值	描述
profile	URL	它定义了元数据的URL。
media	media_query	它指示媒体资源针对哪个媒体/设备进行了优化。
type	text/css	它定义了<style>标签的媒体类型。

点击图标运行按钮以运行以下HTML代码查看输出。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML head标签示例

在下面的示例中，我们将看到head标签与其子标签一起使用的用法。

HTML title标签在head标签中

让我们来看下面的例子，我们将使用<title>标签在<head>部分内。

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <title>Welcome to index page</title>
</head>
<body style="background-color:#D2B4DE">
   <h1>TutorialsPoint</h1>
   <p>The Best E-Way Learning.</p>
</body>
</html>

HTML style标签在head标签中

考虑另一种情况，我们将使用<style>标签在<head>标签内。

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: #D5F5E3;
      }

      h1 {
         color: #17202A;
      }

      p {
         color: #DE3163;
      }
   </style>
</head>
<body>
   <h1>MSD</h1>
   <p>Mahendra Singh Dhoni is an former Indian cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p>
</body>
</html>

HTML meta标签在head标签中

在下面的示例中，我们将添加一个带有content值的URL，该值在超时时重定向到页面。

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="4; url=https://tutorialspoint.com/index.htm">
</head>
<body>
   <h2>Redirect to home page</h2>
   <p style="color: green;">After 4 seconds it will automatically redirect to URL specified in the tag</p>
</body>
</html>

HTML script标签在head标签中

下面是一个示例，我们将使用<script>标签在<head>标签内。

Open Compiler

<!DOCTYPE html>
<html>
<head>
   <script>
      function tutorial() {
         document.getElementById("tp").style.color = "#2ECC71";
      }
   </script>
</head>
<body>
   <h1 id="tp">TUTORIALSPOINT</h1>
   <p>The Best E-Way Learning.!</p>
   <button type="button" onclick="tutorial()">CLICK</button>
</body>
</html>

可在head标签中放置的元素列表

标签	描述
<title>	<title>标签定义在<head>标签内，它应该是纯文本。
<style>	HTML <style>标签包含HTML文档或文档一部分的样式属性，作为内部CSS。
<meta>	<meta>标签用于提供此类附加信息。
<link>	HTML <link>标签指定当前文档和外部资源之间的关系。
<script>	HTML <script>标签用于在HTML文档中包含内部JavaScript代码。
<base>	此标签用于定义基本URL或目标相对URL。

支持的浏览器

标签
head	是	是	是	是	是

html_tags_reference.htm

打印页面