HTML 头部
- HTML头部作用:HTML文档的
<head>
部分包含文档信息,如标题、元数据、链接、样式和脚本,但不在浏览器中显示。 - 重要的头部标签:包括
<title>
定义文档标题,<meta>
添加元数据,<link>
指定与外部资源的关系,<style>
添加CSS规则,<script>
添加Javascript代码,<base>
定义基础URL。 - 头部标签的应用:例如,
<meta>
标签用于设置字符集、页面描述,<link>
标签用于添加样式表和图标,<base>
标签用于设定所有相对链接的基础URL。
<head>
部分包含了 HTML 文档的信息,如 meta、链接、样式、脚本、标题等。
<head>
<title>HTML 头部文章</title>
</head>
HTML 头部的内容在文档加载时不会在浏览器中显示。
注意: 头部和主体部分 together 构成了 HTML 文档。
<head>
标签的元素
HTML 的 <head>
标签可以包含以下标签:
- HTML
<title>
标签 - HTML
<meta>
标签 - HTML
<link>
标签 - HTML
<style>
标签 - HTML
<script>
标签 - HTML
<base>
标签
HTML <title>
标签
HTML 的 <title>
标签用于定义文档的标题,它显示在浏览器的标题栏中。例如,
<head>
<title>我的第一个标题</title>
</head>
浏览器输出
要了解更多关于 <title>
标签,请访问 HTML 标题。
HTML <meta>
标签
HTML 的 <meta>
标签用于添加关于文档的元数据(数据的信息)。元数据包括字符集、页面描述、作者姓名、视口设置等信息。例如,
<head>
<meta charset="UTF-8" />
<meta name="description" content="HTML 教程" />
<meta name="keywords" content="HTML, 学习, 教程" />
<meta name="author" content="mashangxue123 团队" />
</head>
要了解更多关于 <meta>
标签,请访问 HTML 元素。
HTML <link>
标签
HTML link 标签用于指定文档和外部资源之间的关系。例如,
<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 样式。
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>
标签,我们可以在 HTML 文档中添加来自 main.js
的 javascript 功能。
HTML <base>
标签
HTML 的 <base>
标签用于定义文档的基础 URL。基础 URL 指的是网页中所有链接的公共部分。文档中的所有相对链接将指向 base 标签中的 URL。例如,
<head>
<base href="https://mashangxue123.com" target="_blank" />
</head>
<body>
<img src="images/logo.png" alt="mashangxue123 的 Logo" />
</body>
这里,图片将从 https://mashangxue123.com/images/logo.png
加载,而不是 images/logo.png
。这是因为 <base>
标签会在图片和网页上的任何其他相对链接的 src
前添加 https://mashangxue123.com/
。
完整示例
最后,让我们看看一个真实网站的 <head>
部分可能是什么样的。
<head>
<title>HTML 头部文章</title>
<meta charset="UTF-8">
<meta name="description" content="HTML 教程">
<meta name="keywords" content="HTML, 学习, 教程">
<meta name="author" content="mashangxue123 团队">
<base href="https://mashangxue123.com" target="_blank">
<link href="/styles/index.css" rel="stylesheet">
<script src="scripts/main.js">
</head>