最近关注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。HTML5HTML5模式是目前最常用的模式。直接在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 元素和有效的 DTDHTML和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-equivhttp-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中再调出 。举例：＜meta http-equiv=“pragma” content=“no-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秒后跳转向我的博客 –>未完待续~~