小红帽学前端-12-了解-head-元素

jiezi

5 年前

前言我们上次大概了解了 HTML 的那么一个结构。其中讲到我们有一个 head 元素，这个东西不能简单讲完。所以这边我们单独挖出来讲讲。

学之前还是要先知道人家是啥，其实 head 元素人家也是一个元素，但是与一般元素不同，人家一般元素的内容是会显示在浏览器页面上的。head 元素里面的内容是不会显示在浏览器中的。他里面放着的是文档的各种属性和信息，包括文档的标题，样式和脚本的引用，元数据等等。大概有下面这些元素。

<link> <script> <style> <title> <meta>

我们就一个一个拉出来溜溜。

我们写文章有文章的标题，网页也有标题啊，不过这里要和 h1 元素区分开，人家虽然也叫标题不过用于网页内容的标题，那么他标题在哪边啊，不知道啊。建个 HTML 文件看看咯。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 我是标题 </title>
</head>
<body>
    <p> 我是段落 </p>
</body>
</html>

我们打开网页看看。在这里看到没，我们网页的标题。处在标签栏的位置的地方。

这三个家伙以后用的多，现在先不用，link 元素一般是用来引入 CSS 资源的，style 元素里面是给我写 CSS 样式的。那么 script 元素咧。你猜？

当然用来写脚本的啦，一般就 JavaScript 啦。这几个我们先认个脸熟，后面我们用到自然就懂了。现在就开始我们 head 元素里面最大头的 meta 元素的介绍了。

不过这边还有讲一下 link 除了引入后面后面要学的样式之外，还有一个很重要的功能。那就是引入我们网页的图标，啥网页图标啊，请看

看到木有，在网页标题旁边的小图标，那个就是网页的图标，虽然可能有点不起眼，但是对比那些木有自己设图标直接用浏览器默认的那些网页，这样看起来更富有气息啊。并且以后处于性能的考虑，这个最好还是加上。

咋加咧，当然是 link 元素啊：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

herf 属性指向图标的地址，为了保持兼容性，一般图标的后缀名我们统一是 .ico，如何获取，自行百度。

这个元素是为文档添加元数据的。啥是元数据啊？就是描述数据的数据。例如指定你文档的字符编码，文档的作者等等等。这个东西很重要，有些公司面试的时候很喜欢问这里面的东西。

一般的 meta 元素包含了 name 和 content 属性，大概长这样子：

<meta name="XX" content="conteng">

其中 name 指定了 meta 元素的类型，说明该元素包含了说明类型的信息。content 指定了实际的元数据的内容。下面我们就搞我们搞几个常见看看。

在我们上面的例子中有下面这行

<meta charset="UTF-8">

这个指定了文档的字符编码（就是在这个文档中被允许使用的字符集）是 UTF-8。这个基本所有的 HTML 文本里面都有的，记下便是。

这个一般我们是用不到的，但是在某些地方是需要的。我们先看看这两个是怎么通过 meta 元素加进去的。

<meta name="author" content="Leon">
<meta name="keyword" content="小红帽 学习">
<meta name="description" content="这个是小红帽用于测试的网页">

留下个作者信息还是有点用，有些内容关系系统会有获取页面作者的信息，用于联系作者或者干嘛干嘛的。

至于页面描述，这个就主要用来 SEO（搜索引擎优化）的。至于是啥效果，我们打开浏览器搜索「腾讯」试一下。可以看到有下面这么一个结果。

看到画圈圈的那块内容了没有，那个就是页面的描述，这个可以便于被搜索引擎搜索到并且显示在搜索结果上，让人没进去网站前先知道那个网站里面大概是啥东西。

啥，不信吗？那我们就点进去腾讯官网看一下，然后右键查看源代码。

如何

至于关键字，也是用于 SEO。让搜索引擎搜对应关键字的时候能快速找到你。

这个在现在移动端页面基本都会用的了，主要用于移动端页面的缩放和拖拽的。视窗，理解也简单，就是用户网页的可视区域（也就是你手机浏览器里面展示网页内容的那个区域）。这个面试会问到。下看看代码吧：

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

像我上面的描述就是说我这个页面啊，视口的宽度和查看设备的宽度是一致的，且一开始的缩放比例是 1。他还有其他的一下数据信息，我们一一列出来：

width viewport 的大小，可以是一个固定的像素，也可以是特殊值，例如 device-width（设备的宽度）
height 不说了，指定高度咯，其他同上。
initial-scale 页面第一次加载时候的缩放比例
maximum-scale 允许用户缩放到的最大比例，范围 0-10
minimum-scale 允许用户缩放到的最小比例，范围还是 0-10
user-scalable 这个就是说用户能不能手动缩放啦，值是 yes、true 就允许用户手动缩放网页。反之 no、false 就不允许咯。不写的话，默认值就是 yes 咯。

这个是 IE8 中新增的，是一个关于网页文档兼容模式的定义。浏览器的兼容性问题，要么现在要么以后，你肯定会知道的。啥都不说了，万恶的 IE。

对于这个元数据，不需要想太多，直接写下面的数据就对了。

<meta http-equiv="X-UA-Compatible" content="ie=edge chrome=1">

就直接让 IE 浏览器以最高级模式渲染文档就完事了。

关于元数据，就讲这几个就够了。其他的碰到再说了。现在让我们详细讲太多会感到无聊和迷惑的，咱们初学，简单点。

不过搞完这些，基本的概念咱也学会了，自己搞个 HTML 写一下吧，代码这种东西，不写一下你是学不好的。内容可以复制粘贴随便来，但是标签属性那些自己手敲一下。熟悉一下。搞一个标准的 HTML 文档出来。下一次的文章的话就是讲我们常见的 HTML 元素咯，到时候就是直接开始敲啦。不然没意思也没用啊。

1 定义