每次写html文档的时候，头部都有一大堆标签，有的显示、有的又不显示、有的又完全不知所云，那我们就一起来看下这些标签到底都是什么？
元信息
第一类是元信息类标签。所谓元信息，就是描述文档自身的一类标签，这里有几个常用的，我们可以一起看看。
head标签
本身不携带任何信息，主要盛放其他语义类标签的容器。head标签规定了自身必须是html标签的第一个标签，其内容必须包含一个title，并且最多只能包含一个base。
title标签
文档地标题，概括了全文内容，会出现在浏览器的tab上的标题。
meta标签
是一组键值对。在head中可以出现任意多个meta标签，一般是由name和content两个属性来定义，name表示元信息的名，content表示元信息的值。name一般都是大家约定俗成的一些条目，除了基本用法，还有一些变体，我们可以看看。
具有charset属性的meta
charset型meta标签非常关键，它描述了html文档自身的编码形式，今阿姨放在head的第一个。
<meta charset="UTF-8" >
具有http-equiv属性的meta
此标签表示一个执行命令，可以不需要name属性
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
name为viewport的meta
viewport可以指定的属性如下：
- width/height：页面宽度/高度，可以是具体数字，也可以是device-width/device-height
- initial-scale：初始缩放比例
- minimum/maximum-scale：最小/大缩放比例
- user-scalable：是否允许用户缩放
<meta name="viewport" content="width=500, initial-scale=1">
链接
link标签
html除了头部的一大堆元信息标签以外，还有一类标签占据了很大的位置，那就是链接。link标签也是元信息标签类的一种，但是并不是所有的link标签都是元信息，而且用link标签产生的链接通常不会显示在页面，有的是超链接、有的是外部资源链接，link标签的链接类型主要通过rel属性来区分。那么下面我们就来看看都有哪些。
超链接类
超链接类的标签是一种被动型链接，在用户不操作的情况下，他们是不会被主动下载的。这些链接也不会显示在网页中，所以这意味着多数浏览器中，这些link标签不会产生任何作用，但是这边标签能够被搜索引擎和一些浏览器插件识别，从而产生关键性的作用。因为link标签具有特定的rel属性，那么产生超链接的link标签一般包括rel="canoncial"，rel="alternate"，rel="prev"，rel="next"等。
外部资源类
外部资源类会被主动下载，并且根据rel类型做不同的处理。除了元信息的用法外，多数外部资源型的link标签还能够被放在body中使用，从而起到把外部资源链接进文档的作用。外部资源型包括icon型、预处理类、modulepreload、stylesheet、pingback。
stylesheet是我们最熟悉的用于引入一个css样式表，但是为什么引入css使用的是link标签但是引入js就不用呢？我们现按下不表，到文后解释。
<link rel="stylesheet" href="xxx.css" type="text/css">
页面中显示的链接
除了在文档头部的使用link标签的链接，在html中还有在页面中显示的链接在这个也可以稍作解释。
a标签
a标签同时具有链接和目标点的角色，当a标签有href属性时，它就是链接，当有name时，就是链接的目标。具有href的a标签跟link一样，会产生超链接，也就是在用户不操作的情况下，他们不会被主动下载的被动性链接。a标签也可以有rel属性，区别是a标签产生的链接会直接显示在网页中，而link标签仅仅是元信息。
area标签
在html中不仅可以使用a标签插入文字型的链接，还可以使用area标签插入区域性的链接，shape属性支持圆形，矩形，多边形，但是area标签必须跟img和map标签搭配使用，这里有一个来自html标准的的例子。
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>
</p>
替换型元素
我们前文提到了引入css的方式是使用link标签，那么在html头部标签中还有一个很重要的部分是如何引入js文件：我们通常使用的方法是使用script标签。与链接型标签不同的是，替换型标签是使用src属性指向文件的地址来源，使用指向的资源下载并且嵌入此资源到标签的位置，而链接型的标签使用的是href属性是建立这个标签与外部资源的链接并下载，但是并不会替换掉当前元素。所以src属性只能使用在替换型标签上，而且这也解释了为什么有的script标签会在文档的底部引入。
除了script标签，还有其他的一个使用src属性的标签，包括img、picture、video、audio，基本上都是多媒体类型的文件——指向资源->下载->替换原标签。除此之外还有iframe标签可以嵌入一个完整的网页，但是再移动端会有很多限制，关于锚点和事件绑定也会出现很多冲突，所以还是谨慎使用。
这篇文章主要讲解html文档头部的三个主要的标签类型：元信息，链接型，替换型，以及链接和替换型衍生出来的一些其他的标签，希望这篇文章可以对你有用。
Reference:
time.geekbang.org/column/arti…
time.geekbang.org/column/arti…
time.geekbang.org/column/arti…
www.jianshu.com/p/dadbb8f8a…
juejin.cn/post/684490…
