HTML - head 标签_HTML 菜鸟教程

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

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

语法

<head>
...
</head>

属性

<head> 标签支持 HTML 的全局属性， <head> 标签还支持以下附加属性:

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

<head> 标签示例

在下面的示例中，我们将看到 <head> 标签的其他子标签的用法。

在 <head> 中使用 <title>

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

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

在<head> 标签中使用 <style>

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

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

在<meta> 标签中使用 <script>

在以下示例中，我们将添加具有内容值的 URL，该值在时间限制结束时重定向到页面。

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="refresh" content="4; url=/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>

在 <head> 标签中使用 <script>

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

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

可以放在 <head> 标签内的标签

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

支持的浏览器

浏览器
head	Yes	Yes	Yes	Yes	Yes

<< HTML - html 标签 HTML - title 标签 >>