上查看所有课程
<head>部分包含有关 HTML 文档的信息，例如 meta、链接、样式、脚本、标题等。
<head>
<title>HTML Head Article</title>
</head>在加载文档时，HTML head 的内容不会在浏览器中显示。
注意： head 和 body 部分共同构成 HTML 文档。
<head> 标签的元素
HTML <head> 标签可以包含以下标签
- HTML
<title>标签 - HTML
<meta>标签 - HTML
<link>标签 - HTML
<style>标签 - HTML
<script>标签 - HTML
<base>标签
HTML <title> 标签
HTML <title> 标签用于定义文档的标题，该标题显示在浏览器标题栏中。例如：
<head>
<title>My First Title</title>
</head>浏览器输出
要了解更多关于 <title> 标签的信息，请访问 HTML Title。
HTML <meta> 标签
HTML <meta> 标签用于添加有关文档的元数据（数据的相关信息）。元数据包括字符集、页面描述、作者姓名、视口设置等信息。例如：
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial">
<meta name="keywords" content="HTML, Learn, Tutorial">
<meta name="author" content="programiz team">
</head>要了解更多关于 <meta> 标签的信息，请访问 HTML Meta Elements。
HTML <link> 标签
HTML 链接标签用于指定文档与外部资源之间的关系。例如：
<head>
<link href="/styles/index.css" rel="stylesheet">
</head>这里，
<link> 标签允许我们在 HTML 页面中使用来自 index.css 的 CSS 样式。
注意： 它主要用于添加样式表和图标。
HTML <style> 标签
HTML <style> 标签用于将 CSS 规则添加到文档中。例如：
<head>
<style>
h1 {
color: red;
}
</style>
</head>在这里，HTML 中的 <h1> 标签将被样式化为红色。
要了解更多关于 <style> 标签的信息，请访问 HTML Style。
HTML <script> 标签
HTML <script> 标签用于将 Javascript 添加到文档中。例如：
<head>
<script>
console.log('hi');
</script>
</head>在这里，我们在 <script> 标签内编写 Javascript 代码。
我们也可以使用 src 属性将 HTML 文档与外部 Javascript 文件链接起来。例如：
<head>
<script src="scripts/main.js">
</head>在这里，我们使用 <script> 标签将 main.js 中的 Javascript 功能添加到我们的 HTML 文档中。
HTML <base> 标签
HTML <base> 标签用于定义文档的基本 URL。基本 URL 指的是网页上所有链接的共同 URL 部分。文档中的所有相对链接都将指向 base 标签中的 URL。例如：
<head>
<base href="https://programiz.com" target="_blank">
</head>
<body>
<img src="images/logo.png" alt="Logo of Programiz">
</body>在这里，图片将从 https://programiz.com/images/logo.png 加载，而不是从 images/logo.png 加载。这是因为 <base> 标签会在图片的 src 和网页上的任何其他相对链接前添加 https://programiz.com/。
完整示例
最后，让我们看看一个真实网站的 <head> 部分可能是什么样子。
<head>
<title>HTML Head Article</title>
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial">
<meta name="keywords" content="HTML, Learn, Tutorial">
<meta name="author" content="programiz team">
<base href="https://programiz.com" target="_blank">
<link href="/styles/index.css" rel="stylesheet">
<script src="scripts/main.js">
</head>