HTML - Head 元素
HTML <head> 元素是以下元素的容器： <title>、<style>、<meta>、<link>、<script> 和 <base>。
HTML <head> 元素
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML 元数据是关于 HTML 文档的数据。元数据不会显示。
元数据通常定义文档标题、字符集、样式、脚本和其他元信息。
HTML <title> 元素
<title> 元素定义文档的标题。标题必须是纯文本，并且显示在浏览器的标题栏或页面的选项卡中。
HTML 文档需要 <title> 元素！
页面标题的内容对搜索引擎优化（SEO）非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。
<title> 元素
- 定义浏览器工具栏中的标题
- 当页面添加到收藏夹时提供页面的标题
- 在搜索引擎结果中为页面显示标题
因此，请尽量使标题尽可能准确和有意义！
一个简单的 HTML 文档
示例
<!DOCTYPE html>
<html>
<head>
<title>一个有意义的页面标题</title>
</head>
<body>
文档内容......
</body>
</html>
自己动手试一试 »
HTML <style> 元素
<style> 元素用于定义单个 HTML 页面的样式信息。
HTML <link> 元素
<link> 元素定义当前文档与外部资源之间的关系。<link> 标签通常用于链接到外部样式表。
提示： 要了解所有关于 CSS 的知识，请访问我们的 CSS 教程。
HTML <meta> 元素
<meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。
元数据不会在页面上显示，但会被浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）和其他 Web 服务使用。
示例
定义使用的字符集
<meta charset="UTF-8">
为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, JavaScript">
定义您的网页的描述
<meta name="description" content="Free Web tutorials">
定义页面的作者
<meta name="author" content="John Doe">
每 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="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
自己动手试一试 »
设置视口
视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。
您应该在所有网页中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会给浏览器指令，告知如何控制页面的尺寸和缩放。
width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致（这将因设备而异）。
initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。
这是一个没有视口 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://w3schools.org.cn/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base 标签</a>
</body>
自己动手试一试 »
Chapter Summary
- The
<head>element is a container for metadata (data about data) - The
<head>element is placed between the<html>tag and the<body>tag - The
<title>element is required and it defines the title of the document - The
<style>element is used to define style information for a single document <link>标签通常用于链接到外部样式表。- The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings - The
<script>element is used to define client-side JavaScripts - The
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML head 元素
| 标签 | 描述 |
|---|---|
| <head> | 定义文档信息 |
| <title> | 定义文档标题 |
| <base> | 定义页面上所有链接的默认地址或默认目标 |
| <link> | 定义文档与外部资源之间的关系 |
| <meta> | 定义 HTML 文档的元数据 |
| <script> | 定义客户端脚本 |
| <style> | 为文档定义样式信息 |
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
视频：HTML Head
