共计 2386 个字符，预计需要花费 6 分钟才能阅读完成。
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天 10 分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入 winter 的专栏学习【原文有 winter 的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。
一、什么是元信息类标签
元信息，是指描述自身的信息。元信息类标签，就是HTML用于描述文档自身的一类标签。
二、head 标签
作为盛放其它语义类标签的容器使用。
2.1、注意
1、head 标签 规定了自身必须是 html 标签 中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。
2、如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。
三、title 标签
title 标签表示文档的标题，title应该完整地概括整个网页内容的。
四、base 标签
base 标签作用是给页面上所有的 URL相对地址提供一个基础。
<html>
<head>
<base href="https://time.geekbang.org" target="_blank"/>
</head>
<body>
<a href=""> 极客时间 </a>
</body>
</html>上面的代码里面 a 标签 的属性 href 没有值，但是当你点击 极客时间 ，它就会新开一个页面打开base 标签 里的href。
五、meta 标签
meta 标签是一组键值对，它是一种通用的元信息表示标签。
5.1、具有 charset 属性的 meta
HTML5开始meta标签新增charset属性的meta标签无需再有name 和 content。
charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。建议放在 head 的第一个。
<html>
<head>
<meta charset="UTF-8">
……5.2、具有 http-equiv 属性的 meta
具有
http-equiv属性的meta标签，表示执行一个命令，可以不需要name属性。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">其他命令：
-
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，声明内容安全策略
5.3、name 为 viewport 的 meta
<meta name="viewport" content="width=500, initial-scale=1">-
width：页面宽度，可以取值具体的数字，也可以是device-width，表示跟设备宽度相等。 -
height：页面高度，可以取值具体的数字，也可以是device-height，表示跟设备高度相等。 -
initial-scale：初始缩放比例 -
minimum-scale：最小缩放比例 -
maximum-scale：最大缩放比例 -
user-scalable：是否允许用户缩放
做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">5.4、其它预定义的 meta
application-name：如果页面是 Web application，用这个标签表示应用名称。
-
author: 页面作者 -
description：页面描述，用于搜索引擎或者其它场合 -
generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个meta -
keywords: 页面关键字，对于SEO场景非常关键 -
referrer: 跳转策略，是一种安全考量 -
theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）
补充：
<head>
<!-- 默认使用最新浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 不被网页 (加速) 转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>个人总结
关于这一块在业务中确实关注比较少，base 标签 也是看了 winter 这篇文章才知道的，加油加油才行。。。