共计 4947 个字符，预计需要花费 13 分钟才能阅读完成。
最近关注 winter 的“重学前端”系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从 HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。
Doctype 作用？标准模式与兼容模式各有什么区别?
<!DOCTYPE> 声明位于 HTML 文档的第一行，处于 <html> 之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。Doctype 不存在或者格式不正确都会导致文档以兼容模式 / 混杂模式呈现。
标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写 <!DOCTYPE HTML>？
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
Doctype 的类型有哪些？
总体上应该分为三类：HTML5，HTML4.0.1，XHTML。
HTML5
HTML5 模式是目前最常用的模式。直接在 DOCTYPE 后面添加 html 即可。
<!DOCTYPE html>
HTML4.0.1 模式
分为三种模式：严格模式 (strict)、过度模式 (transitional)、Frameset 模式。区别在于是否允许使用展示性和弃用元素，以及是否允许使用框架集。
严格模式：不允许展示型、弃用元素和框架集。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
过度模式：允许使用展示性元素、弃用元素（比如 font、color 等），不允许使用框架集。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Frameset 模式：允许展示性元素、弃用元素，允许框架集。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
XHTML 模式
XHTML 是一种比较严格的模式，所有元素必须以 XML 格式编写。分类和 HTML4.0.1 比较类似，分为严格模式、过渡模式、Frameset 模式，同时添加了 1.1 模式。
严格模式：不允许展示性、弃用元素和框架集
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
过渡模式：允许展示性、弃用元素（比如 font，color 等）, 不允许框架集
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Frameset 模式：允许展示性、弃用元素，允许框架集
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
XHTML 1.1：该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
最后附上各种文档类型支持的元素列表：HTML5/HTML 4.01/XHTML 元素和有效的 DTD
HTML 和 XHTML 编写区别
XHTML 要求编写符合 XML 的语法。主要区别在于：
XML 区分大小写：以前很多 <html>、<body> 等都用大写或大小写混用如 <HTML>、<BODY> 或 <Html>、<Body>”排版，但是 XHTML 统一要求需要用 <html>、<body> 小写。
XML 标签必须闭合，单元素需要以 / 作为闭合结尾，嵌套不能出错。比如：“<meta name=”keywords” content=” 关键字 ” >”像这个标签在 html 是可行的，但是为了 xhtml 的标准所以必须关闭如“<meta name=”keywords” content=” 关键字 ” />”
XML 属性必须放在引号中。
XML 属性必须有属性值，不能省略。比如：网页里显示图片 img 标签里都可加可不加 alt 属性，但是现在 xhtml 要求必须加上 alt 属性, 不然 xhtml 验证将提示错误，哪怕 alt 的值为空都可以。
XML 中空格不会被自动删除。
<meta>
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称 / 值对。常用列表如下:
<!DOCTYPE html> <!– H5 标准声明，使用 HTML5 doctype，不区分大小写 –>
<head lang=”en”> <!– 标准的 lang 属性写法 –>
<meta charset=”utf-8″> <!– 声明文档使用的字符编码 –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!– 优先使用 IE 最新版本和 Chrome –>
<meta name=”description” content=” 不超过 150 个字符 ”/> <!– 页面描述 –>
<meta name=”keywords” content=””/> <!– 页面关键词 –>
<meta name=”author” content=”name, email@gmail.com”/> <!– 网页作者 –>
<meta name=”robots” content=”index,follow”/> <!– 搜索引擎抓取 –>
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!– 为移动设备添加 viewport –>
<!– 设置页面不缓存 –>
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
meta viewport
在移动端开发，最常看到 head 里面设置了下面这个属性：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no” >
常用的 6 个属性：
width：设置 layout viewport 的宽度，为一个正整数，或字符串 ”width-device”
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
height：设置 layout viewport 的高度，这个属性并不重要，很少使用
user-scalable：是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes 代表允许
特殊说明：（IE6,7,8）支持，需要使用 css3mediaqueries.js
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]>
深入了解，移步至：移动前端开发之 viewport 的深入理解
meta http-equiv
http-equiv 顾名思义，相当于 http 的文件头作用。把 content 属性关联到 HTTP 头部。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-Compatibel” conent=”IE=edge,chrome=1″ > <!– 指定 IE 和 Chrome 使用最新版本渲染当前页面 –>
cache-control(指定请求和响应遵循的缓存机制)
说明：指定浏览器如何缓存某个响应以及缓存多长时间。举例：
<meta http-equiv=”cache-contorl” conent=”no-cache”>
共有以下几种用法：
– no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
– no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
– public : 缓存所有响应，但并非必须。因为 max-age 也可以做到相同效果。
– private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说 CDN 就不允许缓存 private 的响应）
– maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60 表示响应可以再缓存和重用 60 秒。
关于浏览器缓存，可移步至：浏览器缓存机制
expires(网页到期时间)
说明: 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。举例：
<meta htttp-equiv=”expires” content=”Sunday 26 October 2019 01:00 GMT”>
Pragma(cache 模式)
说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从 Cache 中再调出。举例：
Set-Cookie(cookie 设定)
说明：如果网页过期。那么这个网页存在本地的 cookies 也会被自动删除。举例：
<meta http-equiv=”Set-Cookie” content=”name, date”> <!– 格式 –>
<meta http-equiv=”Set-Cookie” content=”User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT”> <!– 具体范例 –>
refresh(自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:
<meta http-equiv=”refresh” content=”2；URL=https://segmentfault.com/u/clearlove07″> <!– 意思是 2 秒后跳转向我的博客 –>
未完待续~~
