HTML Head

2025 年 9 月 4 日 | 阅读 6 分钟

HTML <head> 元素用作元数据（关于数据的数据）的容器。它在 <html> 标签和 <body> 标签之间使用。

HTML 文档的头部是其内容在页面加载时不在浏览器中显示的部分。它仅包含有关 HTML 文档的元数据，这些元数据指定了 HTML 文档的数据。

HTML 头部可以包含大量元数据信息，也可以包含很少或不包含信息，这取决于我们的需求。但头部在创建网站时对 HTML 文档起着至关重要的作用。

元数据定义了文档标题、字符集、样式、链接、脚本和其他元信息。

以下是元数据中使用的标签列表

<title>
<style>
<meta>
<link>
<script>
<base>

HTML <title> 元素

HTML <title> 元素用于定义文档的标题。它用于所有 HTML/XHTML 文档。 <title> 元素必须放在 <head> 元素之间，并且一个文档只能有一个 title 元素。

<title> 元素有什么作用？

它在浏览器标签页中定义一个标题。
当页面被添加到收藏夹时，它为页面提供一个标题。
它在搜索引擎结果中显示页面的标题。

注意：title 元素必须特定于文档，并且建议长度为 65 到 70 个字符（包括空格）。

示例

<!DOCTYPE html>
<html>
<head>
  <title>This Page Title</title>
</head>
<body>
<p>The body's content is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>
</body>
</html>

执行代码

HTML <style> 元素

HTML <style> 元素用于设置 HTML 页面的样式。 <style> 元素可以包含仅用于该 HTML 页面的 CSS 属性。如果我们想将 CSS 应用于多个页面，则应使用单独的 CSS 文件。

示例

<!DOCTYPE html>
<html>
<head>
  <title>This is Page Title</title>
  <style>
    body {background-color: pink;}
    h1 {color: red;}    
    p {color: blue;}
  </style>
</head>  
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

执行代码

HTML <link> 元素

HTML <link> 元素用于将外部样式表链接到您的网页。 <link> 元素包含两个主要属性：“rel”和“href”。rel 属性表示这是一个样式表，href 指定了该外部文件的路径。

示例

<!DOCTYPE html>
 <html>
 <head>
	<title>This is title</title>
	<link rel="stylesheet" href="style.css">
   </head>
   <body>
    <h2>Web-page with external CSS</h2>
    <p>This is looking a cool page</p>
   </body>
 </html>

执行代码

HTML <meta> 元素

HTML <meta> 元素用于指定网页上的字符集、页面描述、关键词、作者和其他元数据。

元数据主要由浏览器、搜索引擎和其他 Web 服务用于更好地对您的网页进行排名。

让我们看看如何使用元数据

定义字符集

charset 属性指定字符编码。在本例中，我们将其设置为“UTF-8”，这意味着它可以处理显示任何语言。

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">  
</head>
<body>
<p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p>
<p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>
</body>
</html>

执行代码

输出

定义网页的描述

如果您提供元描述，这将有助于搜索引擎进行相关搜索。

为搜索引擎定义关键词

关键字值也用于为搜索引擎提供关键字，但由于垃圾邮件发送者，浏览器可能会忽略它。

定义网页的作者

author 值指定了编写页面内容的作者姓名，这有助于某些内容管理系统自动提取作者信息。

每 30 秒刷新一次文档

Meta refresh 用于指示浏览器在给定时间间隔后自动刷新页面。如上例所示，它将在 30 秒后自动刷新。

如果您在 content 值中添加 URL，它将在时间限制结束后重定向到该页面。

示例

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="refresh" content="5; url=https://tpointtech.cn/html-head">
 </head>
   <body>
    <h2>Meta element Example</h2>
   <p style="color: green;">Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag</p>
 </body>
</html>

执行代码

以下是如何在 HTML head 中使用所有 Meta 元素的示例

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Akon">
</head>
<body>
<p>All the meta information are set.</p>
</body>
</html>

执行代码

使用 <meta> 标签设置视口

此方法在 HTML5 中引入，通过使用 <meta> 标签来控制视口。

视口是用户在网页上的可见区域。它因设备而异，在手机上的显示比在计算机屏幕上小。

<meta> 视口元素的语法

在这里，**<meta> viewport** 元素指定如何控制页面的尺寸和缩放。

**width=device-width** 用于将页面宽度设置为跟随设备的屏幕宽度（这将根据设备而变化）。

**initial-scale=1.0** 用于设置页面首次由浏览器加载时的初始缩放级别。

没有视口 <meta> 标签的网页示例

示例

<!DOCTYPE html>
<html>
<body>

<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

<img src="image.jpg" alt="image" width="460" height="345">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis 
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</p>

</body>
</html>

执行代码

带有视口 <meta> 标签的网页示例

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

<img src="image.jpg" alt="image" width="460" height="345">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis 
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.
</p>

</body>
</html>

执行代码

注意：为了清楚地看到差异，请在智能手机或平板电脑上打开此页面。

HTML <base> 元素

HTML <base> 元素用于为页面中的所有相对 URL 指定基本 URL 和基本目标。

示例

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://d2jdgazzki9vjm.cloudfront.net/htmlpages/images/" target="_blank">
</head>
<body>
<img src="html5.png">
<p>We have specified a base URL, the browser will look for the image "html5.png" 
at "https://d2jdgazzki9vjm.cloudfront.net/htmlpages/images/html5.png"</p>
<p><a href=" https://tpointtech.cn">Tpoint Tech</a></p>
<p>The link above will open in a new window because base target is set to "_blank".</p>
</body>
</html>

执行代码

HTML <script> 元素

HTML <script> 元素用于为同一页面应用客户端 JavaScript 或将外部 JavaScript 文件添加到当前页面。

示例

<!DOCTYPE html>
<html>
<head>
	<script>
		function fun() {
		document.getElementById("p").style.color="green";	
		}
	</script>
</head>
<body>
<h2>Script within Head element</h2>
<p id="p">This will change the color</p>
<button type="button" onclick="fun()">Click me</button>
</body>
</html>

执行代码

如果我们想使用一些外部 JavaScript 文件，则可以通过以下方式应用：

排除 <html>、<head> 和 <body> 元素

HTML5 允许我们省略 <html>、<body> 和 <head> 标签。

示例

<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

注意：不建议省略 <html> 和 <body> 标签。省略这些标签可能会导致 DOM 或 XML 软件崩溃，并在旧浏览器（IE9）中产生错误。

但是，您可以省略 <head> 标签。

下一个主题HTML 布局

HTML Head

HTML <title> 元素

注意：title 元素必须特定于文档，并且建议长度为 65 到 70 个字符（包括空格）。

示例

HTML <style> 元素

示例

HTML <link> 元素

示例

HTML <meta> 元素

示例

示例

示例

使用 <meta> 标签设置视口

示例

示例

注意：为了清楚地看到差异，请在智能手机或平板电脑上打开此页面。

HTML <base> 元素

示例

HTML <script> 元素

示例

排除 <html>、<head> 和 <body> 元素

注意：不建议省略 <html> 和 <body> 标签。省略这些标签可能会导致 DOM 或 XML 软件崩溃，并在旧浏览器（IE9）中产生错误。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML Head

HTML <title> 元素

注意：title 元素必须特定于文档，并且建议长度为 65 到 70 个字符（包括空格）。

示例

HTML <style> 元素

示例

HTML <link> 元素

示例

HTML <meta> 元素

示例

示例

示例

使用 <meta> 标签设置视口

示例

示例

注意：为了清楚地看到差异，请在智能手机或平板电脑上打开此页面。

HTML <base> 元素

示例

HTML <script> 元素

示例

排除 <html>、<head> 和 <body> 元素

注意：不建议省略 <html> 和 <body> 标签。省略这些标签可能会导致 DOM 或 XML 软件崩溃，并在旧浏览器（IE9）中产生错误。

相关帖子

HTML JavaScript

HTML 类

HTML 图片

HTML 段落

HTML 定义列表

HTML 计算机代码

HTML 标签

HTML 教程

什么是 HTML

HTML 与 CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器