HTML元信息类标签：你知道head里一共能写哪几种标签吗？
元信息，是指描述自身的信息，元信息类标签，就是HTML用于描述文档自身的一类标签。通常出现在head标签中，一般不会被显示出来。
元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示
head标签
head标签本身不携带任何信息，它主要是作为盛放其他语义标签的容器来使用。
head标签规定了自身必须是html标签的第一个标签，它的内容必须要包含一个title，并且最多只能包含一个base。如果文档为iframe，或者有其他地方指定了文档的标签时，可以不包含title标签。
title标签
title标签表示文档的标题。
与语义化标签中的表示标题的标签：h1-h6。
两者的区别就在于title作为元信息，表示文档的标题，使用场景在浏览器收藏，页面分享上，上下文缺失的，需要完整概括整个网页内容的。
而h1仅作为页面内容展示，它默认具有上下文，也有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。
base标签
base标签实际上是个历史遗留标签。它的作用是给页面上所有的URL相对地址提供一个基础。
base标签只允许有一个，而且是一个非常危险的标签。慎用，建议使用JavaScript来代替base标签。
meta标签
meta标签是一组健值对，它是一种通用的元信息表示标签。
在head中可以出现任意多个meta信息。一般的meta标签由name和content两个属性来定义。name表示元信息的名，content表示元信息的值。
除了基本用法，meta标签还有一些变体，主要用于简化书写方式或者声明自动化行为。下面挑几个举例说明：
具有charset属性的meta
从HTML5开始，为了简化写法，meta标签新增了charset属性。添加了charset属性的meta标签无需再有name和content。
charset型meta标签非常关键，它描述了HTML文档自身的编码形式。因此，我建议这个标签放在head的第一个。
<html>
<head>
<meta charset="UTF-8">
......
这样，浏览器读到这个标签之前，处理的所有字符都是ASCII字符。众所周知，ASCII是UTF-8和绝大多数字符编码的子集，所以在读到meta标签之前，浏览器把文档理解多数编码格式不会出错，尽最大限度的保证不会出现乱码。
一般情况下，HTTP服务端会通过http头来制定正确的编码方式，但有些特殊情况如使用file协议打开一个HTML文件，则没有头，这种时候，charset meta就非常重要了。
具有http-equiv属性的meta
具有http-equiv属性的meta标签，表示执行一个命令，这样的meta标签可以不需要name属性了。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">除了content-type，还有以下几种命令：
content-language 指定内容的语言；
default-style 指定默认样式表；
refresh 刷新；
set-cookie 模拟http头set-cookie，设置cookie；
x-ua-compatible 模拟http头x-ua-compatible，声明ua兼容性；
content-security-policy 模拟http头content-security-policy，声明内容安全策略。
name为viewport的meta
实际上，meta标签可以被自由定义，只有写入和读取的双方约定好的nam和content的格式就可以了。
name为viewport的meta没有在HTML标准中，却是移动端开发的事实标准。
这类meta的name属性为viewport，它的content是一个复杂结构，是用逗号分隔的键值对，键值对的格式是key=value。
<meta name="viewport" content="width=500, initial-scale=1">这里只指定了两个属性，宽度和缩放，实际上viewport能控制的更多，它能表示的全部属性如下：
width：页面宽度，可以取值具体的数字，也可以是device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是device-height，表示跟设备高度相等。
initial-scale：初始缩放比例。
minimum-scale：最小缩放比例。
maximum-scale：最大缩放比例。
user-scalable：是否允许用户缩放。
其它预定义的meta
在HTML标准中，还定义了一批meta标签的name，可以视为一种有约定的meta，我在这里列出来，你可以简单了解一下。
主要包括下面这些内容:
application-name：如果页面是Web application，用这个标签表示应用名称。
author: 页面作者。
description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写HTML的网页，不需要加这个meta。
keywords: 页面关键字，对于SEO场景非常关键。
referrer: 跳转策略，是一种安全考量。
theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的
UI（如窗口边框或者tab的颜色）。
移动端兼容性meta
此文章为7月Day18学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。