一、什么是`<head>`元素？

head元素是一个容器，它包含了所有你想包含在HTML页面中但不想展示给用户的内容。
这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等。

<head>元素的作用是保存页面的一些元数据，其内容不会再页面中显现

示例：

<head>
    <meta charset="utf-8">
</head>
复制代码

上述代码表示页面使用utf-8字符集编码

二、一些元数据

文档标题和内容标题

我们可以使用<title>标签为文档添加文档标题，使用<h1>–<h6>为文档内容添加一级到六级的内容标题

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例文档</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
  </body>
</html>
复制代码

输出：

当你添加书签时,你会看到 <title> 的内容成为初始的书签名。

设定文档字符编码

通过<meta charset="GBK">元素，我们可以指定文档的字符编码，
（这里使用GBK字符集作为示例）
但有的的字符集可能不能覆盖文档中所有的字符，这可能导致乱码。

如当你使用GBK字符集，而文档中包含藏文时。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="GBK">
    <title>示例文档</title>
  </head>
  <body>
    <p>བཀྲ་ཤིས་བདེ་ལེགས།</p>
  </body>
</html>
复制代码

输出:

当你使用UTF-8字符集时便不会遇到藏文无法显示的问题，其包含了绝大部分日常使用的字符
请尽可能使用UTF-8字符集

设定文档作者与文档描述

使用包含name和content属性的<meta>元素，我们可以设定文档作者和描述

name指定了元素的类型

content赋予了实际的内容

示例：

<meta name="author" content="一颗san白敖"> <meta name="description" content="这是一个测试页面"> 复制代码

上述两段代码指定了作者，概括了文档信息，有利于搜索引擎检索，
被称为SEO（Search Engine Optimization）即：搜索引擎优化

为你的页面添加定制图标

将定制图标保存到网站根目录下

将如下代码添加到<head>中

<link rel="shortcut icon" href="https://juejin.cn/post/favicon.ico" type="image/x-icon">

href链接中的图标分辨率一般为16×16，可以以 .gif或 .png格式保存，但 .ico可以提供更大的兼容性

当根目录下存在favicon.ico文件，多数浏览器将自动检测并使用它

“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）；而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。

示例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例文档</title> <link rel="shortcut icon" href="https://juejin.cn/post/juejin.png" type="image/x-icon" > </head> <body> <h1>示例</h1> </body> </html> 复制代码

效果：

文档语言设定

我们可以通过设定HTML文档的语言来更好的进行SEO
如在html开始标签中设定主要语言

<html lang="en"> 复制代码

上述代码设定了文档主要语言为英文，你也可以设定其他语言，如 zh-Hans表示简体中文

我们也可以利用<span></span>元素设定文档部分内容的语言，比如将日语部分设定为日语

<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p> 复制代码

应用CSS和JavaScript

使用<ling>和 <script>元素可以指向CSS和JS文档

<link>元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：

<link rel="stylesheet" href="https://juejin.cn/post/css-file.css"> 复制代码

<script>将它放在文档的尾部（在 </body>标签之前Z）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="https://juejin.cn/post/js-file.js"></script> 复制代码

<script>不是空元素，故需要一个结束标记。
您还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

示例：

<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="utf-8"> <title>元数据示例</title> <meta name="description" content="元数据示例"> <link rel="Shortcut Icon" href="https://juejin.cn/post/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="https://juejin.cn/post/05.css"> </head> <body> <h1>元数据示例</h1> <script src="https://juejin.cn/post/05.js"></script> </body> </html> 复制代码

小结

通过一些案例和示范，我们学习了<head>元素中一些元数据的设定方法，如设定文档标题、文档作者和文档概述等。这些元数据一方面设定了文档中数据的描述方式，另一方面有利于搜索引擎优化，对html文档起着不可或缺的作用。

文章版权归作者所有，未经允许请勿转载。

THE END

阅读