HTML head 元素

HTML head 元素中的数据是网页的元数据，包含了网页的标题，编码，样式，脚本等信息。

<html> 元素是 HTML 文档的根元素，它包含 <head> 和 <body> 元素。其中 <body> 元素则是网页的主体，浏览器主要渲染 <body> 中的内容，而 <head> 是网页的头部信息，存放网页的元数据。

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

在 HTML 中， <head> 元素允许以下元素作为子元素： <title>， <style>， <meta>， <link>， <script>，和 <base> 。

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 rel="stylesheet" href="mystyle.css" />

! 提示： 要了解有关 CSS 的所有信息，请访问我们的CSS 教程。

HTML `<meta>` 元素

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

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

定义使用的字符集：

<meta charset="UTF-8" />

定义搜索引擎的关键字：

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

定义您的网页的描述：

<meta name="description" content="免费的 Web 教程" />

定义页面的作者：

<meta name="author" content="John Doe" />

每 30 秒刷新一次文档：

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

设置视口（viewport）以使您的网站在所有设备上看起来都不错：

<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" />

设置视口（viewport）

视口（viewport）是网页的用户可见区域。它因设备而异，比如手机屏幕上的 viewport 比电脑屏幕上的 viewport 小。

您应该在所有网页的 <meta> 中设定 viewport：

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

width=device-width 指示页面的宽度跟随设备的屏幕宽度（这将因设备而异）。

initial-scale=1.0 指示浏览器首次加载页面时的初始缩放级别。

浏览器会依据 viewport 来控制页面尺寸和缩放比例。

HTML `<script>` 元素

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

下面的例子， JavaScript 获取 id="demo" 的元素，并将元素的内容设置为 Hello JavaScript! 。

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

! 提示： 要了解有关 JavaScript 的所有信息，请访问 JavaScript 教程。

HTML `<base>` 元素

<base> 元素设置了页面中所有相对 URL 的基础 URL。

<base> 标签有两个属性: href 和 target，应该至少设置一个属性。

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

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

<html>
  <head>
    <base href="https://www.gobeta.net" target="_blank" />
  </head>
  <body>
    <img src="images/stickman.gif" width="24" height="39" alt="Stickman" />
    <a href="tutorials/html">HTML 教程</a>
  </body>
</html>

总结

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

HTML 头部元素

标签	说明
`<head>`	定义文档所有的元数据信息
`<title>`	定义文档的标题
`<base>`	定义页面中所有相对 URL 的基础 URL
`<link>`	标签最常用于链接到外部样式表
`<meta>`	定义文档的元数据信息
`<script>`	定义此文档 javascript 脚本
`<style>`	定义此文档的样式

如需所有可用 HTML 标签的完整列表，请访问 HTML 元素参考。

HTML head 元素

HTML <title> 元素

一个简单的 HTML 文档

HTML <style> 元素

HTML <link> 元素

HTML <meta> 元素