HTML 头部元素

HTML <head> 元素是以下元素的容器：

HTML <head> 元素

<head> 元素是元数据（关于数据的数据）的容器，位于 <html> 标签和 <body> 标签之间。

HTML 元数据是关于 HTML 文档的数据。元数据不会显示在页面上。

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

HTML <title> 元素

<title> 元素定义文档的标题。标题必须是纯文本，显示在浏览器的标题栏或页面的标签页中。

<title> 元素在 HTML 文档中是必需的！

页面标题的内容对搜索引擎优化（SEO）非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。

<title> 元素：

在浏览器工具栏中定义标题
为页面添加到收藏夹时提供标题
在搜索引擎结果中显示页面标题

因此，请尽量使标题准确且有意义！

一个简单的 HTML 文档：

实例

<!DOCTYPE html>
<html>
<head>
  <title>一个有意义的页面标题</title>
</head>
<body>

文档内容......

</body>
</html>

亲自试一试

HTML <style> 元素

<style> 元素用于为单个 HTML 页面定义样式信息：

实例

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

亲自试一试

HTML <link> 元素

<link> 元素定义当前文档与外部资源之间的关系。

<link> 标签最常用于链接到外部样式表：

实例

<link rel="stylesheet" href="mystyle.css">

亲自试一试

提示：要全面了解 CSS，请访问我们的 CSS 教程。

HTML <meta> 元素

<meta> 元素通常用于指定字符集、页面描述、关键词、文档作者和视口设置。

元数据不会显示在页面上，但会被浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务使用。

实例

定义使用的字符集：

<meta charset="UTF-8">

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, JavaScript">

定义网页的描述：

<meta name="description" content="免费网页教程">

定义页面的作者：

<meta name="author" content="Bill Gates">

每 30 秒刷新文档：

<meta http-equiv="refresh" content="30">

设置视口以使您的网站在所有设备上看起来都很好：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> 标签示例：

实例

<meta charset="UTF-8">
<meta name="description" content="免费网页教程">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Bill Gates">

亲自试一试

设置视口

视口是用户可见的网页区域。它随设备而变化 - 在手机上会比在计算机屏幕上小。

您应在所有网页中包含以下 <meta> 元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这为浏览器提供了关于如何控制页面尺寸和缩放的指令。

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

initial-scale=1.0 部分设置页面首次被浏览器加载时的初始缩放级别。

以下是一个没有视口 meta 标签的网页示例，以及同一个带有视口 meta 标签的网页：

提示：如果您使用手机或平板电脑浏览此页面，可以点击下面的两个链接查看差异。

没有视口 meta 标签

有视口 meta 标签

HTML <script> 元素

<script> 元素用于定义客户端 JavaScript。

以下 JavaScript 将 "Hello JavaScript!" 写入 id="demo" 的 HTML 元素中：

实例

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

亲自试一试

提示：要全面了解 JavaScript，请访问我们的 JavaScript 教程。

HTML <base> 元素

<base> 元素为页面中的所有相对 URL 指定基 URL 和/或目标。

<base> 标签必须具有 href 或 target 属性，或两者都有。

一个文档中只能有一个 <base> 元素！

实例

为页面上的所有链接指定默认 URL 和默认目标：

<head>
<base href="https://www.w3school.com.cn/" target="_blank">
</head>

<body>
<img src="images/panda.png" width="150" height="161" alt="熊猫">
<a href="tags/tag_base.asp">HTML base 标签</a>
</body>

亲自试一试

本章总结

<head> 元素是元数据（关于数据的数据）的容器
<head> 元素位于 <html> 标签和 <body> 标签之间
<title> 元素是必需的，它定义文档的标题
<style> 元素用于为单个文档定义样式信息
<link> 标签最常用于链接到外部样式表
<meta> 元素通常用于指定字符集、页面描述、关键词、文档作者和视口设置
<script> 元素用于定义客户端 JavaScript
<base> 元素为页面中的所有相对 URL 指定基 URL 和/或目标

HTML 头部元素

标签	描述
<head>	定义有关文档的信息。
<title>	定义文档的标题。
<base>	定义页面中所有链接的默认地址或默认目标。
<link>	定义文档与外部资源之间的关系。
<meta>	定义有关 HTML 文档的元数据。
<script>	定义客户端脚本。
<style>	定义文档的样式信息。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考手册。