前端知识谱，从基础入手，往深层学习。一点点扎实自己，从基础沉淀。(持续更新)
前端总谱
HTML
BOM
- 什么是BOM？
BOM（Browser Object Model），是浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。
不同于 DOM 的标准化组织是 W3C，JavaScript 的语法标准化组织是 ECMA，BOM 没有官方标准，它最初是 Netscape 浏览器标准的一部分，也就是说，对于现代浏览器，每个浏览器都有自己的 BOM 实现方法，所以直接使用 BOM 会有兼容性问题。 - BOM 包含哪些内容？
BOM 包含一个对象 window，window 中又包含 6 大模块，分别为：
1). document 对象：文档对象
2). frames：HTML自框架
3). history：页面的历史记录
4). location：当前页面的地址
5). navigator：浏览器相关信息
6). screen：用户显示屏幕相关参数 - 各模块介绍
1). window 对象
BOM 的核心对象就是 window 对象，所有浏览器都支持 window 对象，它代表浏览器的窗口。
JavaScript 的所有全局对象、全局方法和全局变量全都自动被归为 window 对象的方法和属性，在调用这些方法和属性的时候可以省略 window。DOM 也是 window 对象的属性。
window 对象的 size
window 对象有两个用来定义浏览器窗口大小的属性（两个属性均返回以 px 像素为单位的数值）：window.innerHeight（返回浏览器窗口的高度） 和 window.innerWidth（返回浏览器窗口的宽度）
注意：浏览器窗口的视窗不包括工具栏和滚动条。
兼容问题：对于IE 5-8，innerWidth和innerHeight并不兼容，需要使用 document.documentElement.clientHeight / document.documentElement.clientWidth 或者 document.body.clientHeight / document.body.clientWidth。
window 的方法
window.open(url, target, specs, replace)：打开一个新窗口。四个参数（均为可选）。
window.close()：关闭当前窗口。
window.moveTo()：移动窗口到特定位置。
window.resizeTo()：修改窗口大小。
2). document 对象
document 对象是 HTML 文档的根节点。每一个元素都会生成对应的 DOM对象，由于元素之间存在层级关系，整个 HTML 代码解析结束后，会生成一个由不同节点组成的树形结构，成为 DOM 树。document 用于描述 DOM 树的状态和属性，并提供了很多操作 DOM 的 API。
3). frames
frame 指 HTML 子框架，即在浏览器里嵌入另一个窗口。父框架和子框架拥有独立的作用域和上下文。
window.frames 返回的是一个类数组的对象，对象的内容是当前页面中的 <iframe> 元素。这些 <iframe> 元素可以通过索引号来获得。
4). history
window.history 对象包含浏览器的历史记录，window 可以省略。这些历史记录以栈（FIFO）的形式保存。页面前进则入栈，页面返回则出栈。
history 的方法
history.back()：跳转到历史记录中的前一个链接
history.forward()：跳转到历史记录中的后一个链接
5). location
window.location 可以用户获取当前页面地址以及重定向到一个新的页面。
location 的属性
window.location.href： 返回当前页面的地址
window.location.hostname： 返回当前页面的域名
window.location.pathname： 返回当前页面的路径和文件名
window.location.protocol： 返回网页使用的协议（http: 还是 https:）
window.location.port： 返回当前页面的端口，如果页面使用的是默认端口（http:80,https:443），则大多数浏览器会显示为0或者不显示
window.location.assgin: 加载一个新的文档
6). navigator
navigator 对象是一个只读对象，它用来描述浏览器本身的信息，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。
7). screen
screen 提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度，可用宽度、高度。
screen 的属性
screen.width：显示屏的宽度
screen.height：显示屏的高度
screen.availWidth： 屏幕的可用宽度
screen.availHeight： 屏幕的可用高度DOM
HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）
根据W3C的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1). 整个文档是一个文档节点
2). 每个 HTML 元素是元素节点
4). HTML 元素内的文本是文本节点
5). 每个 HTML 属性是属性节点
6). 注释是注释节点语义化
定义：首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
优点：语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。事件
HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。
Window 事件属性
针对 window 对象触发的事件（应用到 <body> 标签）：
| 属性 | 描述 | H5新增 |
|---|---|---|
| onafterprint | 文档打印之后运行的脚本。 | 是 |
| onbeforeprint | 文档打印之前运行的脚本。 | 是 |
| onbeforeunload | 文档卸载之前运行的脚本。 | 是 |
| onerror | 在错误发生时运行的脚本。 | 是 |
| onhaschange | 当文档已改变时运行的脚本。 | 是 |
| onload | 页面结束加载之后触发。 | 否 |
| onmessage | 在消息被触发时运行的脚本。 | 是 |
| onoffline | 当文档离线时运行的脚本。 | 是 |
| ononline | 当文档上线时运行的脚本。 | 是 |
| onpagehide | 当窗口隐藏时运行的脚本。 | 是 |
| onpageshow | 当窗口成为可见时运行的脚本。 | 是 |
| onpopstate | 当窗口历史记录改变时运行的脚本。 | 是 |
| onredo | 当文档执行撤销（redo）时运行的脚本。 | 是 |
| onresize | 当浏览器窗口被调整大小时触发。 | 是 |
| onstorage | 在 Web Storage 区域更新后运行的脚本。 | 是 |
| onundo | 在文档执行 undo 时运行的脚本。 | 是 |
| onunload | 一旦页面已下载时触发（或者浏览器窗口已被关闭）。 | 否 |
Form 事件
由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
| 属性 | 描述 | H5新增 |
|---|---|---|
| onblur | 元素失去焦点时运行的脚本。 | 否 |
| onchange | 在元素值被改变时运行的脚本。 | 否 |
| oncontextmenu | 当上下文菜单被触发时运行的脚本。 | 是 |
| onfocus | 当元素获得焦点时运行的脚本。 | 否 |
| onformchange | 在表单改变时运行的脚本。 | 是 |
| onforminput | 当表单获得用户输入时运行的脚本。 | 是 |
| oninput | 当元素获得用户输入时运行的脚本。 | 是 |
| oninvalid | 当元素无效时运行的脚本。 | 是 |
| onreset | 当表单中的重置按钮被点击时触发。HTML5 中不支持。 | 否 |
| onselect | 在元素中文本被选中后触发。 | 否 |
| onsubmit | 在提交表单时触发。 | 否 |
Keyboard 事件
| 属性 | 描述 | H5新增 |
|---|---|---|
| onkeydown | 在用户按下按键时触发。 | 否 |
| onkeypress | 在用户敲击按钮时触发。 | 否 |
| onkeyup | 当用户释放按键时触发。 | 否 |
Mouse 事件
由鼠标或类似用户动作触发的事件：
| 属性 | 描述 | H5新增 |
|---|---|---|
| onclick | 元素上发生鼠标点击时触发。 | 否 |
| ondblclick | 元素上发生鼠标双击时触发。 | 否 |
| ondrag | 元素被拖动时运行的脚本。 | 是 |
| ondragend | 在拖动操作末端运行的脚本。 | 是 |
| ondragenter | 当元素元素已被拖动到有效拖放区域时运行的脚本。 | 是 |
| ondragleave | 当元素离开有效拖放目标时运行的脚本。 | 是 |
| ondragover | 当元素在有效拖放目标上正在被拖动时运行的脚本。 | 是 |
| ondragstart | 在拖动操作开端运行的脚本。 | 是 |
| ondrop | 当被拖元素正在被拖放时运行的脚本。 | 是 |
| onmousedown | 当元素上按下鼠标按钮时触发。 | 否 |
| onmousemove | 当鼠标指针移动到元素上时触发。 | 否 |
| onmouseout | 当鼠标指针移出元素时触发。 | 否 |
| onmouseover | 当鼠标指针移动到元素上时触发。 | 否 |
| onmouseup | 当在元素上释放鼠标按钮时触发。 | 否 |
| onmousewheel | 当鼠标滚轮正在被滚动时运行的脚本。 | 是 |
| onscroll | 当元素滚动条被滚动时运行的脚本。 | 是 |
Media 事件
由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:
| 属性 | 描述 | H5新增 |
|---|---|---|
| onabort | 在退出时运行的脚本。 | 否 |
| oncanplay | 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。 | 是 |
| oncanplaythrough | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 | 是 |
| ondurationchange | 当媒介长度改变时运行的脚本。 | 是 |
| onemptied | 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 | 是 |
| onended | 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 | 是 |
| onerror | 当在文件加载期间发生错误时运行的脚本。 | 是 |
| onloadeddata | 当媒介数据已加载时运行的脚本。 | 是 |
| onloadedmetadata | 当元数据（比如分辨率和时长）被加载时运行的脚本。 | 是 |
| onloadstart | 在文件开始加载且未实际加载任何数据前运行的脚本。 | 是 |
| onpause | 当媒介被用户或程序暂停时运行的脚本。 | 是 |
| onplay | 当媒介已就绪可以开始播放时运行的脚本。 | 是 |
| onplaying | 当媒介已开始播放时运行的脚本。 | 是 |
| onprogress | 当浏览器正在获取媒介数据时运行的脚本。 | 是 |
| onratechange | 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 | 是 |
| onreadystatechange | 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 | 是 |
| onseeked | 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 | 是 |
| onseeking | 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 | 是 |
| onstalled | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 | 是 |
| onsuspend | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 | 是 |
| ontimeupdate | 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 | 是 |
| onvolumechange | 每当音量改变时（包括将音量设置为静音）时运行的脚本。 | 是 |
| onwaiting | 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本 | 否 |
渲染机制
浏览器的渲染过程主要包括以下几步:
1). 解析HTML生成DOM树。
2). 解析CSS生成CSSOM规则树。
3). 将DOM树与CSSOM规则树合并在一起生成渲染树。
4). 遍历渲染树开始布局，计算每个节点的位置大小信息。
5). 将渲染树每个节点绘制到屏幕。
CSS
选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| .class | intro | 选择 class=”intro” 的所有元素。 | 1 |
| #id | #firstname | 选择 id=”firstname” 的所有元素。 | 1 |
| * | * | 选择所有元素。 | 2 |
| element | p | 选择所有 <p> 元素。 | 1 |
| element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
| element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
| element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
| element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择 target=”_blank” 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。 | 2 |
| :link | a:link | 选择所有未被访问的链接。 | 1 |
| :visited | a:visited | 选择所有已被访问的链接。 | 1 |
| :active | a:active | 选择活动链接。 | 1 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 | 1 |
| :focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
| :first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
| :first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
| :before | p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 |
| :after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
| :lang(language) | p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个 <p> 元素。 | 2 |
| element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
| [attribute^=value] | a[src^=”https”] | 选择其 src 属性值以 “https” 开头的每个 <a> 元素。 | 3 |
| [attribute$=value] | a[src$=”.pdf”] | 选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。 | 3 |
| [attribute*=value] | a[src*=”abc”] | 选择其 src 属性中包含 “abc” 子串的每个 <a> 元素。 | 3 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
| :root | :root | 选择文档的根元素。 | 3 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 | 3 |
| :target | #news:target | 选择当前活动的 #news 元素。 | 3 |
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 |
| :not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 | 3 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
盒子布局
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
弹性布局（Flex）
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
Hack
简单的说，CSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS hack 为不同版本的浏览器定制编写不同的 CSS 效果。
常用的CSS Hack 方式：
1）、条件注释法：
- <!–[if IE]> 只在 IE 下生效
- <![endif]–> 这段文字只在IE浏览器显示
- <!–[if IE 6]> 只在IE6下生效
- <![endif]–> 这段文字只在IE6浏览器显示
- <!–[if gte IE 6]> 只在IE6以上版本生效
- <![endif]–> 这段文字只在IE6以上(包括)版本IE浏览器显示
- <!–[if ! IE 8]> 只在IE8上不生效
- <![endif]–> 这段文字在非IE8浏览器显示
- <!–[if !IE]> 非IE浏览器生效
- <![endif]–> 这段文字只在非IE浏览器显示
2）、类内属性前缀法
IE浏览器各版本 CSS hack 对照表：
| hack | 写法 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | N | N | Y | N | Y | N | Y | N | Y | Y |
说明：在标准模式中:
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
3）、选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
- *html *前缀只对IE6生效
- *+html *+前缀只对IE7生效
- @media screen\9{…}只对IE6/7生效
- @media \0screen {body { background: red; }}只对IE8有效
- @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
- @media screen\0 {body { background: green; }} 只对IE8/9/10有效
- @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
LESS
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
SASS
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
媒体查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
媒体类型：
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| aural | 已废弃。用于语音和声音合成器 |
| braille | 已废弃。 应用于盲文触摸式反馈设备 |
| embossed | 已废弃。 用于打印的盲人印刷设备 |
| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |
| 用于打印机和打印预览 | |
| projection | 已废弃。 用于投影设备 |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| tty | 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |
| tv | 已废弃。 用于电视和网络电视 |
媒体功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| grid | 用来查询输出设备是否使用栅格或点阵。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-color | 定义输出设备每一组彩色原件的最大个数。 |
| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
| max-resolution | 定义设备的最大分辨率。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
| min-color | 定义输出设备每一组彩色原件的最小个数。 |
| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 定义设备的最小分辨率。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcmscan定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
ECMAScript(Javascript)
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
ECMAScript 历史
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。
2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。
2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。
2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。
ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。TC39的总体考虑是，ES5与ES3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。
截止发布日期，JavaScript的官方名称是ECMAScript 2015，Ecma国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于2016年发布，命名为ECMAScript 2016。新版本将按照ECMAScript+年份的形式发布。
ES6是继ES5之后的一次主要改进，语言规范由ES5.1时代的245页扩充至600页。ES6增添了许多必要的特性，例如：模块和类，以及一些实用特性，例如Maps、Sets、Promises、生成器（Generators）等。尽管ES6做了大量的更新，但是它依旧完全向后兼容以前的版本，标准化委员会决定避免由不兼容版本语言导致的“web体验破碎”。结果是，所有老代码都可以正常运行，整个过渡也显得更为平滑，但随之而来的问题是，开发者们抱怨了多年的老问题依然存在。
截止发布日期，没有一款完全支持ES6的JavaScript代理（无论是浏览器环境还是服务器环境），所以热衷于使用语言最新特性的开发者需要将ES6代码转译为ES5代码。等到主流浏览器完全实现ES6特性大概需要一年左右的时间，若想一睹各代理对于ES6特性的支持情况，我们推荐大家参考由 kangax 维护的 ECMAScript Compatibility Table 。
ECMAScript 2016的制定工作已经启动，许多 草案 已被提交到委员会，包括以下这些：异步方法、定型对象、并行JavaScript、类修饰符以及observables。虽然委员会正在积极评估这些特性，但我们无法预知它们的未来，其中一些会加入到下一版规范，另一些会加入未来的其它规范，剩下的将最终被遗弃。 TC39进程 解释了新特性从开始到最终被语言采用所经历的各种阶段。
基础
内置类型
JS中有七种内置类型，七种内置类型分为两大类：基本类型和对象（Object）。
基本类型有六种： null，undefined，boolean，number，string，symbol。
其中 JS 的数字类型是浮点类型的，没有整型。并且浮点类型基于 IEEE 754标准实现，在使用中会遇到某些 Bug。NaN 也属于 number 类型，并且 NaN 不等于自身。
对于基本类型来说，如果使用字面量的方式，那么这个变量只是个字面量，只有在必要的时候才会转换为对应的类型