HTML Head Element|极客教程

HTML Head Element

在HTML文档中，<head>元素用于包含与文档有关的元信息，这些元信息通常不会直接显示在页面上，而是提供一些关于文档的重要信息，比如链接到外部样式表、JavaScript文件、网站图标等等。在本文中，我们将详细介绍HTML Head元素的用法和相关元素。

文档标题

在<head>元素中，可以使用<title>元素来定义文档的标题，该标题通常会显示在浏览器的标题栏中，也会作为书签的名称。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How2HTML - Learn HTML Easily</title>
</head>
<body>
    <h1>Welcome to How2HTML!</h1>
    <p>This is a website to learn HTML easily.</p>
</body>
</html>

Output:

HTML Head Element

在浏览器中打开该页面后，标题栏会显示为”How2HTML – Learn HTML Easily”。

元信息

<head>元素中可以包含很多不同种类的元信息，比如字符编码设置、作者信息等。其中一个常用的元信息是meta标签，通过设置不同的属性来提供不同的信息。下面是一个设置字符编码的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Welcome to How2HTML!</h1>
    <p>This is a website to learn HTML easily.</p>
</body>
</html>

Output:

HTML Head Element

上面的代码中，我们通过设置<meta charset="UTF-8">来告诉浏览器使用UTF-8字符编码解析页面。

外部样式表

通过<head>元素，我们还可以链接外部的CSS样式表文件，这样可以让我们的页面样式更加灵活和易管理。下面是一个链接外部CSS样式表的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to How2HTML!</h1>
    <p>This is a website to learn HTML easily.</p>
</body>
</html>

Output:

HTML Head Element

在上面的代码中，我们通过<link>元素将styles.css文件链接到页面中。

内部样式表

除了链接外部样式表，我们也可以在<head>元素中定义内部的CSS样式表，这种方式适用于只在该页面使用的样式。下面是一个内部CSS样式表的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            color: blue;
        }
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to How2HTML!</h1>
    <p>This is a website to learn HTML easily.</p>
</body>
</html>

Output:

HTML Head Element

在上面的代码中，我们使用