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>标签的媒体类型。

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

HTML head标签示例

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

HTML title标签在head标签中

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

<!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>标签内。

<!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,该值在超时时重定向到页面。

<!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>标签内。

<!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。

支持的浏览器

标签 Chrome Edge Firefox Safari Opera
head
html_tags_reference.htm
广告