最近关注winter的“重学前端”系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通识进行分类总结。
Doctype作用？标准模式与兼容模式各有什么区别?
-
声明位于HTML文档的第一行，处于之前。 -
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。Doctype不存在或者格式不正确都会导致文档以兼容模式/混杂模式呈现。 - 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们该有的方式来运行）
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
Doctype的类型有哪些？
总体上应该分为三类： HTML5，HTML4.01，XHTML。
HTML5
HTML5模式是目前最常用的模式。直接在DOCTYPE后面添加html即可。
HTML4.01 模式
分为三种模式：严格模式(strict)、过度模式(transitional)、Frameset模式。区别在于是否允许使用展示性和弃用元素，以及是否允许使用框架集。
- 严格模式：不允许展示型、弃用元素和框架集。
- 过度模式：允许使用展示性元素、弃用元素（比如
font、color等），不允许使用框架集。
- Frameset模式：允许展示性元素、弃用元素，允许框架集。
XHTML 模式
XHTML是一种比较严格的模式，所有元素必须以XML格式编写。分类和HTML4.01比较类似，分为严格模式、过渡模式、Frameset模式，同时添加了1.1模式。
- 严格模式：不允许展示性、弃用元素和框架集
- 过渡模式：允许展示性、弃用元素（比如font，color等）,不允许框架集
- Frameset模式：允许展示性、弃用元素，允许框架集
- XHTML 1.1：该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
最后附上各种文档类型支持的元素列表：HTML5/HTML 4.01/XHTML 元素和有效的 DTD
区分HTML4.01和HTML5
- DOCTYPE声明
- 新增结构元素
- 新增功能元素
HTML和XHTML编写区别
XHTML要求编写符合XML的语法。主要区别在于：
- XML区分大小写：以前很多
、等都用大写或大小写混用如、或、”排版，但是XHTML统一要求需要用、小写。 - XML标签必须闭合，单元素需要以/作为闭合结尾，嵌套不能出错。比如：“ ”像这个标签在html是可行的，但是为了xhtml的标准所以必须关闭如“ ”
- XML属性必须放在引号中。
- XML属性必须有属性值，不能省略。比如：网页里显示图片
img标签里都可加可不加alt属性，但是现在xhtml要求必须加上alt属性,不然xhtml验证将提示错误，哪怕alt的值为空都可以。 - XML中空格不会被自动删除。
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
常用列表如下:
meta viewport
在移动端开发，最常看到head里面设置了下面这个属性：
常用的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
- X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：
- cache-control(指定请求和响应遵循的缓存机制)
说明：指定浏览器如何缓存某个响应以及缓存多长时间。举例：
共有以下几种用法：
- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果。
- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。关于浏览器缓存，可移步至：浏览器缓存机制
- expires(网页到期时间)
说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。举例：
- Pragma(cache模式)
说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出 。举例：
＜meta http-equiv="pragma" content="no-cache"＞- Set-Cookie(cookie设定)
说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。举例：
- refresh(自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:
HTML语义化
根据内容的结构，选择合适的标签（代码语义化）恰当地表示文档结构，便于开发者阅读的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化？
- 在没有css的情况下，也能很好的展示内容结构、代码结构。
- 提升用户体验：例如
title、alt用于解释名词或解释图片信息、label标签的活用。 - 有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫获取更多有效的信息，爬虫以来于标签的上下文和各个关键字的权重。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等）以有意义的方式渲染页面。
- 便于团队开发和维护，语义化更具可读性，减少因为不遵循标准的差异化。
语义化标签的推荐使用场景
自然语言表达能力的补充
- 作为自然语言和纯文本的补充
在 HTML5 中，就引入了这个表示 ruby 的标签，它由ruby、rt、rp 三个标签来实现。用于注音或者意思的注解。
漢
- 用来表达一定的结构或者消除歧义
比如当没有上下文时，如何消除歧义呢？这就要用到我们的 em 标签，em 表示重音：
今天我吃了一个 苹果 。
今天我吃了 一个 苹果。实际上，不仅仅是读音，这里的意思也发生了变化。前一段中，表示我今天吃的是苹果，而不是别的什么东西，后一段中，则表示我今天只吃了一个苹果，没有多吃。
文章标题摘要
语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法，即使我们并不打算深入实践语义，也应该尽量在大的层面上保证这些元素的语义化使用。例如：
HTML 语义
balah balah balah balah
弱语义
balah balah
结构性元素
balah balah
......
适合机器阅读的整体结构
随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。
应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。例如：
……
……
……
书写HTML代码时应该注意什么？
- 可能少的使用无语义的标签
div和span。 - 在语义不明显时，既可以使用
div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。 - 不要使用纯样式标签，如：
b、font、u等，改用css设置。 - 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）。具体原因，请移步至：HTML中strong与b,em与i标签的区别
- 使用表格时，标题要用
caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。 - 表单域要用
fieldset标签包起来，并用legend标签说明表单的用途。 - 每个
input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
HTML5新增了哪些语义标签?
注意不要因为html5新标签的出现，而随意用之，错误的使用肯定会事与愿违。所以有些地方还是要用div的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构。因此是最适合做容器的标签。
header 元素代表“网页”或section的页眉。
通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
网站标题
网站副标题
header使用注意：
- 没有个数限制。
- 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
footer元素代表“网页”或section的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
footer使用注意：
- 没有个数限制，除了包裹的内容不一样，其他跟header类似。
hgroup元素代表“网页”或section的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。
this is main title
this is sub title
hgroup使用注意：
- 如果只需要一个h1-h6标签就不用hgroup。
- 如果有连续多个h1-h6标签就用hgroup。
- 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
nav使用注意：
- 用在整个页面主要导航部分上，不合适就不要用
nav元素。
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
this is content
aside使用总结：
-
aside在article内表示主要内容的附属信息。 - 在
article之外则可做侧边栏，没有article与之对应，最好不用。 - 如果是广告，其他日志链接或者其他分类导航也可以用。
section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：
section是啥？
关于section
section的介绍
关于其他
关于其他section的介绍
section使用注意：
- 表示文档中的节或者段。
-
article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div。
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
一篇文章
文章内容..
article使用注意：
- 自身独立的情况下：用
article。 - 是相关内容：用
section。 - 没有语义的：用
div。
address 标签定义文档作者/所有者的联系信息。
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
address使用注意：
- 不应该使用
address标签来描述邮政地址，除非这些信息是联系信息的组成部分。 -
address元素通常被包含在footer元素的其他信息中。
html5有哪些新特性、移除了那些元素？
新特性
- 拖拽释放（Drag and drop）API
- 语义化标签（
header、footer、nav、aside、article、section等） - 音频、视频API（
audio、video） - 画布（
Canvas）API - 地理(
Geolocation) API - 本地存储：
localStorage和sessionStorage - 离线应用：
manifest - 桌面通知：
Notifications - 增强表单控件：
date、time、url、search、email、calendar等 - 多任务：
Web Worker - 全双工通信协议:
Web Socket - 历史管理:
History - 页面可见性改变事件:
visibilitychange - 跨窗口通信:
PostMeaage - Form Data 对象
- 新增选择器：
document.querySelector、document.querySelectorAll
移除元素
- 纯表现元素：
basefont、big、center、font、s、u、tt、strike - 对可用性产生负面影响的元素:
frameset、frame、noframes
如何处理HTML5新标签的浏览器兼容问题？
- IE8/IE7/IE6支持通过document.createElement方法产生的标签。
- 使用html5shim框架
Mobile: