培训自学计划
一、HTML
1. 什么是HTML & HTML发展历程
HTML
HTML（Hypertext Markup Language）中文名称为”超文本标记语言”，它遵循”万维网联盟（W3C）”定义的结构规范，在HTML5之前的版本中，W3C将HTML定义为”标准通用标记语言（SGML，Standard Generalized Markup Language）”的一种应用；而SGML是一种定义标记语言的技术，它通过”文档类型定义（DTD，Document Type Definition）”的形式来指定允许的文档结构，浏览器按照SGML中定义的”DTD规范”来呈现HTML文档的内容。
发展
HTML标准版本有：Html2.0、HTML3.2、HTML4.0、HTML4.01、HTML5（它并不是基于SGML或XML定义的，而是类似英文散文规范的形式）。
HTML1并不曾存在，也没有人知道它为什么不存在，也许存在过，在实验室里；HTML的第一个官方版本是由IETF（互联网工程任务组）推出的HTML2.0，后来W3C取代IETF的角色，成为HTML的标准组织，1990年代的后半页，HTML的版本被频繁修改，直到1999年HTML4.01的出现，至此，HTML到达了它诞生以来第一个命运的转折点；
W3C在HTML4.01之后发布的第一个修订版本是XHTML1.0，其中X代表”eXtensible”（扩展），当然也有人将之解读为 “eXtreme”（极端）；XHTML1.0是基于HTML4.01的，并没有引入任何新标签或属性，唯一的区别是，HTML语法比较随便，而XHTML则要求XML般的严格语法，这种严格的标准已经惹怒了当时的一部分开发者；XHTML1.0的推出刚好碰上了CSS的崛起，如果说XHTML1.0是XML风格的HTML，那么后来的修订版XHTML1.1则是货真价实的XML；
紧随其后W3C发布了第二个修订版XHTML2，它不向前兼容，甚至不兼容之前的HTML；W3C将它定义成一种全新的语言，对于HTML开发者来说这是一场灾难，忍无可忍的开发者们决定放弃W3C制定的标准，他们投奔了另外一个组织WHATWG，而WHATWG研发了一种新的HTML标准，他们将它命名为HTML 5；
在WHATWG致力于HTML5的同时，W3C继续着他们的XHTML2.0；然而，他们却慢慢的陷入了困境，几个月后，W3C组建了一个新的HTML工作组，他们非常明智的选择了WHATWG的成果作为基础；这一转变带来了一些困惑，W3C同时进行着两套规范，XHTML2和HTML 5（注意，W3C的HTTML 5在5之前有个空格，而WHATWG的HTML5则没有空格），而与此同时WHATWG也在进行着同样的工作；
这一混乱局面到了2009年才开始变得清晰，W3C宣布终止XHTML2的工作，这是一份关于XHTML2迟到的讣告，也正式宣布了HTML5走上历史的舞台，成为当今最主流的HTML标准规范。
2. XHTML发展历程
XHTML
可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
XHTML1.1为XHTML最后的独立标准，2.0止于草案阶段。XHTML5则是属于HTML5标准的一部分，且名称已改为“以XML序列化的HTML5”，而非“可扩展的HTML”。在今日(2017年)，XHTML5比起HTML5仍远远并非主流。
发展
XHTML是“3种HTML 4文件根据XML 1.0标准重组”而成的[1]。而W3C亦继续建议使用HTML 4.01和积极地研究HTML5及XHTML的计划。于2002年8月发表的XHTML 1.0的建议中，W3C指出XHTML家族将会是Internet的新阶段。而转换使用XHTML可以令开发人员接触XML和其好处，并可以确保以XHTML开发的网页于未来的兼容性。
HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的电脑来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML。
大部分常见的浏览器都可以正确地解析XHTML，即使老一点的浏览器，XHTML作为HTML的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析HTML的同时，可兼容XHTML。当然，从HTML完全转移到XHTML，还需要一些过程。
跟CSS（Cascading Style Sheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这使实现样式跟内容的分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用，比如MathML、SVG。
从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字，必须用双引号括起来（而在SGML和HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号）。所有元素，包括空元素，比如img、br等，也都必须闭合，实现的方式是在开始标签末尾加入斜扛，比如<img ... /> 、<br />。省略参数，比如<option selected>，也不允许，必须用<option selected="selected">。两者的详细差别，可通过W3C XHTML说明来查阅。
至现时为止，XHTML共有以下几个版本：
XHTML 1.0 Strict（严格版）是参照“HTML 4.01 Strict”改编，但不包括被弃用的元素。其文件类型描述为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional（过渡版）是参照“HTML 4.01 Transitional”改编，包括已于Strict版本被弃用的呈现性元素（例如<center>, <font>等）。其文件类型描述为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset（框架版）是参照“HTML 4.01 Frameset”改编，并允许于网页中定义框架元素。其文件类型描述为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1。其文件类型描述为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML Basic。其文件类型描述为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
另外，在Microsoft Internet Explorer 5.0所新增的<ruby>小字注解标签，在XHTML 1.1得到支持（参看旁注标记）。
而第二版的XHTML 1.0于2002年8月成为W3C推荐的文件类型。2.0止于草案。XHTML5不需要DTD。
3. 编码与文档类型
编码
charset 属性规定 HTML 文档的字符编码
URL 编码
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
文档类型
<!DOCTYPE>声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
4. HTML 字符实体 & 标签语法 & 注释
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：&entity_name;或&#entity_number;;
如需显示小于号，我们必须这样写：< 或 < 或 <
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
标签语法
HTML通过标签来定义文档结构
注释
<!-- -->
二、元素
1. 元素类型
inline：内联元素。
本质特点：默认baseline对齐，且content尺寸刚好包含文本（所以设置width、height无效），故不单独占据整行。block：块元素。
本质特点：单独占据一整行，该行行高为该块元素高度。inline-block：内联块元素。
本质特点：兼具inline元素与block元素的一些特点，表现为：对自身而言仍是块元素，对一整行而言，又被视为内联元素，可并排处于同一行。
2. 块元素与行内元素
3. 常见标签 & 超链接
4. 表格 Table
5. 列表类元素
无序列表
1
2
3
4<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>有序列表
1
2
3
4<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>自定义列表
1
2
3
4
5
6<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
6. 图片元素 img
7. 表单类元素: 标题和段落元素、语义化及正确性、新增标签和元素
HTML 表单和输入
HTML5 表单元素
HTML5 语义元素
HTML5 新元素
8. 表单与文件
三、CSS
1. 什么是 CSS & CSS 语法
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
2. 如何将 CSS 应用到网页
<link rel="stylesheet" href="./index.css">
3. CSS 选择符:class 和 id
4. font 类属性 & text 类属性
5. background 背景属性
6. border 边框属性
7. float 浮动
8. position 定位
9. 盒模型
10. 补白
CSS Margin(外边距)
CSS Padding（填充）
11. 浏览器兼容性
浏览器兼容性问题及解决方案(CSS部分)
不同浏览器兼容性——常用的CSS Hack技术集锦
浏览器兼容性问题解决方案 · 总结
四、JavaScript
1. JavaScript 基础
2. JavaScript 数据类型
3. 语句、表达式和运算符
4. 变量与函数
5. 数组
6. JSON
7. 日期处理
8. DOM & BOM
JavaScript HTML DOM
JavaScript Window - 浏览器对象模型
9. 事件
10. 正则表达式
11. encode、decode
js 中编码（encode）和解码（decode）的三种方法
12. 对象
13. 作用域链
14. 原型链
15. 构造函数
16. 执行上下文栈与执行上下文
深入理解JavaScript执行上下文、函数堆栈、提升的概念
JavaScript深入之执行上下文
JavaScript 中的执行上下文和调用栈是什么？
17. 变量对象与活动对象
关于javascript中的变量对象和活动对象
图解Javascript——变量对象和活动对象
深入理解JavaScript系列（12）：变量对象（Variable Object）