doctype声明
说明：所有的HTML文件，<!DOCTYPE html>声明是必要的。它确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
目的：防止浏览器在渲染时，切换到”怪异模式（兼容模式）“的渲染模式。
渲染模式
说明：很久以前，页面通常只有两种版本：网景（Netscape）的Navigator准备的版本，和微软（Microsoft）的internet Explorer准备的版本。W3C创立网络标准后，为了不破坏既有的网站，浏览器不能直接弃用这些标准。所有浏览器采用了两种模式，用以把符合新规范的网站和老网站区分开。
三种渲染模式如下：
怪异模式（Quirks mode）
说明：排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的
接近标准模式（Almost standards mode）
只实现了部分的怪异行为
标准模式（Standards mode）
由 HTML 与 CSS 的规范描述的行为
浏览器如何抉择模式
1.标准模式需要在HTML文件最顶端设置<!DOCTYPE html>，是所有可用的 DOCTYPE 之中最简单的，也是 HTML5 所推荐的。
2.值得注意的是：如果在DOCTYPE 声明前有注释或者xml声明，会导致Internet Explorer 9 或者更早版本的浏览器触发怪异模式。
3.在 HTML5 中，DOCTYPE 唯一的作用是启用标准模式。更早期的 HTML 标准中，DOCTYPE 会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。
XHTML
1.网页使用的是XHTML或者Content-TypeHTTP标头使用MIME 类型的值为application/xhtml+xml，则不需要使用DOCTYPE启用标准模式，因为这类文件将永远是标准模式。
2.值得注意的是：页面使用 application/xhtml+xml 会令 Internet Explorer 8 出于未知格式之故出现下载对话框，因为首个支持 XHTML 的 Internet Explorer 版本是 Internet Explorer 9。
如何知道浏览器目前是哪个模式
说明：在 Firefox 中，请从右键菜单选择 查看页面信息，然后查看 渲染模式。在 Internet Explorer 中，请按下 F12，然后查看 文档模式。
meta标签
name属性
描述网页，比如关键字和叙述等，与之对应的属性值为content，content中的内容是对name填入类型的描述的具体描述，便于搜索引擎抓取。
<mete name="参数" content="具体的描述">
name属性值如下：
-
keywords(关键字)
说明：告诉 搜索引擎，网页的关键字
<meta name="keywords" content="HTML，CSS，Javascript，Vue">
-
description(网站内容的描述)
说明：告诉搜索引擎，网站的主要内容。
<meta name="description" content="前端修行基础">
-
viewport(移动端的窗口)
说明:
<meta name="viewport" content="width=device-width, initial-scale=1">
拓展：
-
可见视口（visual viewport）：浏览器窗口缩小，可见视口会改变
-
布局视口（layout viewport）：浏览器窗口缩小，布局视口不会改变
-
理想视口（ideal viewport）：指对设备来讲最理想的视口尺寸
值得注意：
-
分辨率：一个物理像素是显示器的最小显示单位（像素颗粒）
-
逻辑像素：可以理解是css像素，
1css像素点不等1物理像素，在移动端高分辨率设备中，由2或以上的逻辑像素渲染一个物理像素显示区域内的图像
-
-
robots(定义搜索引擎爬虫的索引方式)
说明：用来告诉爬虫哪些页面是需要索引，哪些页面不需要索引。content的参数有all，none，index，noindex，follow，nofollow。
<meta name="robots" content="none">
contens参数说明如下：
1.none: 搜索引擎将忽略此网页，等价于noindex，nofollow。
2.onindex：搜索引擎不索引此网页。
3.nofollow：搜索引擎不继续通过此网页的链接索引搜索其他的网页
4.all：搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
5.index：搜索引擎索引此网页。 6.follow：搜索引擎继续通过此网页的链接索引搜索其它的网页。
-
author(作者)
说明：标准网页作者
<meta name="author" content="xxxx,[email protected]">
-
generator(网页制作软件)
说明：标明网页用的什么开发软件制作
<meta name="generator" content="Webstorm">
-
copyright（版权 ）
说明：标注版权信息
<meta name="copyright" content="xx"> //代表该网站为xx个人版权所有。
-
revisit-after（搜索引擎爬虫重访时间）
说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
<meta name="revisit-after" content="3 days" > // 代表3天访问一次
-
renderer（双核浏览器渲染方式）
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
http-equiv属性
相当于http头文件的作用，"http-equiv"全称”http-equivalent“
http-equiv属性值如下：
-
content-Type（设定网页字符集）（推荐使用HTML5的方式）
说明：设定网页字符集，便于浏览器解析与渲染页面
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8 -
X-UA-Compatible（浏览器采取何种版本渲染当前页面）
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
-
cache-control（指定请求和响应遵循的缓存机制）
说明：指定浏览器如何缓存某个响应以及缓存多长时间
<meta http-equiv="cache-control" content="no-cache">
共有以下几种用法：
no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
参考：HTTP缓存
-
Cache-Control（禁止百度自动转码）
说明：禁止当前页面在移动端浏览时，被百度自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
-
expires（网页到期时间）
说明：设定网页的到期时间，过期后网页必须到服务器上重新传输。
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
-
refresh（自动刷新并指向某页面）
说明：网页将在设定的时间内，自动刷新并调向设定的网址。
<meta http-equiv="refresh" content="2；URL=baidu.com"> //意思是2秒后跳转向百度
-
Set-Cookie（cookie设定）
说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例