前端笔记整理完成

2026-04-01 18:11:42 +08:00 · 2022-04-18 23:03:54 +08:00
parent bb9110d289
commit 3d6284517e
50 changed files with 5685 additions and 15 deletions
--- a/CSS/01.png
+++ b/CSS/01.png
--- a/CSS/02.png
+++ b/CSS/02.png
--- a/CSS/03.png
+++ b/CSS/03.png
--- a/CSS/block-and-inline-element.md
+++ b/CSS/block-and-inline-element.md
@@ -0,0 +1,35 @@
+大多数 HTML 元素被定义为**块级元素**或**内联元素**。
+
+### 10. 块级元素
+
+块级元素在浏览器显示时，通常会以新行来开始（和结束）。
+
+我们已经学习过的块级元素有: `<h1>`, `<p>`, `<ul>`, `<table>` 等。
+
+> **值得注意的是:** `<p>` 标签中不能包含任何块级元素。
+
+## `<div>` 元素
+
+`<div>` 元素是块级元素，它可用于组合其他 HTML 元素的容器。
+
+`<div>` 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
+
+如果与 CSS 一同使用，`<div>` 元素可用于对大的内容块设置样式属性。
+
+`<div>` 元素的另一个常见的用途是文档布局。
+
+> **值得注意的是:** `<div>` 取代了使用表格定义布局的老式方法。
+
+## 内联元素
+
+内联元素在显示时通常不会以新行开始。
+
+我们已经学习过的内联元素有: `<td>`, `<a>`, `<img>` 等。
+
+> **值得注意的是:** `<a>` 标签中不能包含 `<a>` 标签，但可以包含其他任何元素。
+
+## `<span>` 元素
+
+`<span>` 元素是内联元素，可用作文本的容器。`<span>` 元素也没有特定的含义。
+
+当与 CSS 一同使用时，`<span>` 元素可用于为部分文本设置样式属性。
--- a/CSS/box-model.md
+++ b/CSS/box-model.md
@@ -0,0 +1,430 @@
+## 什么是盒子模型
+
+盒子模型，也可以称为框模型。
+
+所有 HTML 元素可以看作盒子。在 CSS 中，"box model" 这一术语是用来设计和布局时使用。
+
+CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。
+
+![](01.png)
+
+不同部分的说明:
+
+- Margin（外边距）: 清除边框区域。Margin没有背景颜色，它是完全透明。
+- Border（边框）: 边框周围的填充和内容。边框是受到盒子的背景颜色影响。
+- Padding（内边距）: 清除内容周围的区域。会受到框中填充的背景颜色影响。
+- Content（内容）: 盒子的内容，显示文本和图像。
+
+为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。
+
+### 元素的宽度和高度
+
+下面的例子中的元素的总宽度为 300px:
+
+```css
+width:250px;
+padding:10px;
+border:5px solid gray;
+margin:10px;
+```
+
+完整的 HTML 代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"> 
+	<title></title>
+<style>
+	div.ex
+	{
+		width:220px;
+		padding:10px;
+		border:5px solid gray;
+		margin:0px;
+	}
+</style>
+</head>
+
+<body>
+
+	<div class="ex">The picture above is 250px wide.
+					The total width of this element is also 250px.</div>
+
+</body>
+</html>
+```
+
+上述示例运行的结果如下:
+
+![](02.png)
+
+> **值得注意的是:** 当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完全大小的元素，还必须添加填充，边框和边距。
+
+## 边框
+
+CSS 边框属性允许指定一个元素边框的样式和颜色。
+
+CSS 边框属性常见如下:
+
+- border-width: 设置边框的宽度
+- border-color: 设置边框的颜色
+- border-style: 边框的样式
+
+### 设置边框的宽度
+
+如果设置一个值，则同时设置边框的四个方向的宽度。如下代码:
+
+```css
+border-width: 10px;
+```
+
+上述代码则表示同时四个方向的边框宽度为 10px。
+
+如果设置两个值，则第一个值表示设置边框的上下方向宽度，第二个值表示设置边框的左右方向宽度。
+
+```css
+border-width: 10px 20px;
+```
+
+如果设置三个值，则第一个值表示设置边框的上边宽度，第二个值表示设置边框的左右方向宽度，第三个值表示设置边框的下边宽度。
+
+```css
+border-width: 10px 20px 30px;
+```
+
+如果设置四个值，则分别表示设置上、右、下和左四个方向的边框宽度。
+
+```css
+border-width: 10px 20px 30px 40px;
+```
+
+除了上述方式设置边框宽度，CSS 还提供如下方式分别设置上、右、下和左边框的宽度。
+
+| 属性名称 | 描述 |
+| --- | --- |
+| border-top-width | 设置一个元素的顶部边框的宽度。|
+| border-right-width | 设置一个元素的右边框的宽度。|
+| border-bottom-width | 设置一个元素的底部边框的宽度。|
+| border-left-width | 设置一个元素的左边框的宽度。|
+
+### 设置边框的颜色
+
+如果设置一个值，则同时设置边框的四个方向的颜色。如下代码:
+
+```css
+border-color: red;
+```
+
+上述代码则表示同时四个方向的边框颜色为 red。
+
+如果设置两个值，则第一个值表示设置边框的上下方向颜色，第二个值表示设置边框的左右方向颜色。
+
+```css
+border-color: red orange;
+```
+
+如果设置三个值，则第一个值表示设置边框的上边颜色，第二个值表示设置边框的左右方向颜色，第三个值表示设置边框的下边颜色。
+
+```css
+border-color: red orange yellow;
+```
+
+如果设置四个值，则分别表示设置上、右、下和左四个方向的边框颜色。
+
+```css
+border-color: red orange yellow blue;
+```
+
+除了上述方式设置边框颜色，CSS 还提供如下方式分别设置上、右、下和左边框的颜色。
+
+| 属性名称 | 描述 |
+| --- | --- |
+| border-top-color | 设置一个元素的顶部边框的颜色。|
+| border-right-color | 设置一个元素的右边框的颜色。|
+| border-bottom-color | 设置一个元素的底部边框的颜色。|
+| border-left-color | 设置一个元素的左边框的颜色。|
+
+### 设置边框的样式
+
+边框样式的常用备选想如下:
+
+| 边框样式 | 描述 |
+| --- | --- |
+| none | 定义无边框。|
+| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。|
+| dotted | 定义点状边框。在大多数浏览器中呈现为实线。|
+| dashed | 定义虚线。在大多数浏览器中呈现为实线。|
+| solid | 定义实线。|
+| double | 定义双线。双线的宽度等于 border-width 的值。| 
+| inherit | 规定应该从父元素继承边框样式。|
+
+如果设置一个值，则同时设置边框的四个方向的样式。如下代码:
+
+```css
+border-style: dotted;
+```
+
+如果设置两个值，则第一个值表示设置边框的上下方向样式，第二个值表示设置边框的左右方向样式。
+
+```css
+border-style: dotted solid;
+```
+
+如果设置三个值，则第一个值表示设置边框的上边样式，第二个值表示设置边框的左右方向样式，第三个值表示设置边框的下边样式。
+
+```css
+border-style: dotted solid dashed;
+```
+
+如果设置四个值，则分别表示设置上、右、下和左四个方向的边框样式。
+
+```css
+border-style: dotted solid dashed double;
+```
+
+除了上述方式设置边框样式，CSS 还提供如下方式分别设置上、右、下和左边框的样式。
+
+| 属性名称 | 描述 |
+| --- | --- |
+| border-top-style | 设置一个元素的顶部边框的样式。|
+| border-right-style | 设置一个元素的右边框的样式。|
+| border-bottom-style | 设置一个元素的底部边框的样式。|
+| border-left-style | 设置一个元素的左边框的样式。|
+
+### 简写设置边框
+
+CSS 提供了 `border` 属性允许同时设置边框的宽度、颜色和样式。
+
+```css
+border: 5px solid red;
+```
+
+> **值得注意的是:** 设置的顺序没有明确要求。
+
+除了上述方式设置边框，CSS 还提供如下方式分别设置上、右、下和左边框。
+
+| 属性名称 | 描述 |
+| --- | --- |
+| border-top| 设置一个元素的顶部边框。|
+| border-right| 设置一个元素的右边框。|
+| border-bottom| 设置一个元素的底部边框。|
+| border-left| 设置一个元素的左边框。|
+
+## 内边距
+
+CSS Padding（内边距）属性定义元素边框与元素内容之间的距离。
+
+如果设置一个值，则同时设置内边距的四个方向。如下代码:
+
+```css
+padding: 25px;
+```
+
+如果设置两个值，则第一个值表示设置内边距的上下方向，第二个值表示设置内边距的左右方向。
+
+```css
+padding: 25px 50px;
+```
+
+如果设置三个值，则第一个值表示设置内边距的上边，第二个值表示设置内边距的左右方向，第三个值表示设置内边距的下边。
+
+```css
+padding: 25px 50px 75px;
+```
+
+如果设置四个值，则分别表示设置上、右、下和左四个方向的内边距。
+
+```css
+padding: 25px 50px 75px 100px;
+```
+
+除了上述方式设置内边距，CSS 还提供如下方式分别设置上、右、下和左边的内边距。
+
+| 属性名称 | 描述 |
+| --- | --- |
+| padding-top| 设置一个元素的顶部内边距。|
+| padding-right| 设置一个元素的右边内边距。|
+| padding-bottom| 设置一个元素的底部内边距。|
+| padding-left| 设置一个元素的左边内边距。|
+
+## 外边距
+
+CSS Margin（外边距）属性定义元素周围的距离。
+
+外边距不会影响元素的可见大小，但是会影响元素的位置。
+
+| 属性名称 | 描述 |
+| --- | --- |
+| margin-top | 设置元素的上外边距。|
+| margin-right | 设置元素的右外边距。|
+| margin-left | 设置元素的左外边距。|
+| margin-bottom | 设置元素的下外边距。|
+
+### 设置上和左外边距
+
+```css
+margin-top: 100px;
+margin-left: 50px;
+```
+
+由于元素在 HTML 页面中默认是靠左靠上显示的。所以默认情况下，修改左外边距和上外边距时，会影响当前元素的位置。
+
+### 设置下和右外边距
+
+```css
+margin-bottom: 100px;
+margin-right: 50px;
+```
+
+修改右和下外边距时会影响其他元素相对于当前元素的位置。
+
+### 简写设置外边距
+
+如果设置一个值，则同时设置外边距的四个方向。如下代码:
+
+```css
+margin: 25px;
+```
+
+如果设置两个值，则第一个值表示设置外边距的上下方向，第二个值表示设置外边距的左右方向。
+
+```css
+margin: 25px 50px;
+```
+
+如果设置三个值，则第一个值表示设置外边距的上边，第二个值表示设置外边距的左右方向，第三个值表示设置外边距的下边。
+
+```css
+margin: 25px 50px 75px;
+```
+
+如果设置四个值，则分别表示设置上、右、下和左四个方向的外边距。
+
+```css
+margin: 25px 50px 75px 100px;
+```
+
+### 外边距重叠
+
+当同时为两个相邻的 `<div>` 标签设置外边距，为第一个 `<div>` 标签设置下外边距，为第二个 `<div>` 标签设置上外边距。具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style type="text/css">
+			.box1{
+				width: 100px;
+				height: 100px;
+				background-color: red;
+				/*为上边的元素设置一个下外边距*/
+				margin-bottom: 100px;
+			}		
+			.box2{
+				width: 100px;
+				height: 100px;
+				background-color: blue;
+				/*为下边的元素设置一个上外边距*/
+				margin-top: 100px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box1"></div>
+		<div class="box2"></div>	
+	</body>
+</html>
+```
+
+上述示例代码，最终运行的结果是: 两个 `<div>` 之间的距离为 100px。
+
+垂直方向的相邻的外边距会发生外边距的重叠现象，兄弟元素的相邻外边距会取最大值。
+
+> **值得注意的是:** 外边距的重叠现象只会出现在垂直方向，而水平方向并不存在外边距重叠现象。
+
+如果定义两个 `<div>` 标签是父子关系的话，当为作为子元素的 `<div>` 设置上外边距，该上外边距会传递给作为父元素的 `<div>`。具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>		
+		<style type="text/css">		
+			.box3{
+				width: 300px;
+				height: 200px;
+				background-color: skyblue;
+			}
+			
+			.box4{
+				width: 100px;
+				height: 100px;
+				background-color: red;
+				/*设置一个margin-top*/
+				margin-top: 100px;
+			}			
+		</style>
+	</head>
+	<body>		
+		<div class="box3">
+			<div class="box4"></div>
+		</div>
+	</body>
+</html>
+```
+
+上述外边距的重叠现象，可以通过为作为父元素的 `<div>` 下内边距解决。
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>		
+		<style type="text/css">		
+			.box3{
+				width: 300px;
+				height: 100px;
+				background-color: skyblue;
+				padding-top: 100px;
+			}
+			
+			.box4{
+				width: 100px;
+				height: 100px;
+				background-color: red;
+			}			
+		</style>
+	</head>
+	<body>		
+		<div class="box3">
+			<div class="box4"></div>
+		</div>
+	</body>
+</html>
+```
+
+## 内联元素的盒子模型
+
+### 内联元素的宽度和高度
+
+内联元素不支持设置宽和高，内联元素元素的大小由内容决定。
+
+### 内联元素的内边距
+
+- 内联元素支持水平方向的内边距。
+- 内联元素可以设置垂直方向的内边距，但是不会影响布局。
+
+### 内联元素的边框
+
+- 内联元素支持水平方向的边框。
+- 内联元素可以设置垂直方向的边框，但是不会影响布局。
+
+### 内联元素的外边距
+
+内联元素支持水平方向的外边距 , 不支持垂直方向的外边距。
--- a/CSS/css-grammar.md
+++ b/CSS/css-grammar.md
@@ -0,0 +1,72 @@
+## 语法格式
+
+```css
+选择器 {属性名称 : 属性值; 属性名称 : 属性值;...}
+```
+
+语法特点:
+
+- CSS声明总是以键值对(key\value)形式存在。
+- CSS声明总是以分号(;)结束。
+- 声明组以大括号({})括起来。
+- 为了让CSS可读性更强，每行只描述一个属性。
+
+## CSS 注释
+
+注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 `/*` 开始, 以 `*/` 结束。
+
+```html
+<style type="text/css">
+	/* 这是一个注释 */
+	div {
+		/* 这是另一个注释 */
+		color : red;
+	}
+</style>
+```
+
+## 值得注意的问题
+
+### 值的不同写法和单位
+
+例如在设置字体颜色时，以下几种方式效果相同。
+
+- 第一种方式
+
+```css
+#show1 {color : red;}
+```
+
+- 第二种方式
+
+```css
+#show2 {color : #ff0000;}
+```
+
+像上面这种使用十六进制设置颜色时，如果两两相同，可以写成如下格式:
+
+```css
+#show2 {color : #f00;}
+```
+
+- 第三种方式
+
+```css
+#show3 {color : rgb(255,0,0);}
+```
+
+上面的格式还可以写成如下格式:
+
+```css
+#show3 {color : rgb(100%,0%,0%);}
+```
+
+> **值得注意的是:** 当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。
+
+### 值为若干单词，记得写引号
+
+```css
+div {font-family : Courier, "Courier New", monospace;}
+```
+
+### 多重声明
--- a/CSS/css-introduce.md
+++ b/CSS/css-introduce.md
@@ -0,0 +1,20 @@
+## 什么是 CSS
+
+CSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。
+
+CSS 是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
+
+## 发展历史
+
+从 1990 年代初 HTML 被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。
+
+但随着 HTML 的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。
+
+1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计 CSS。
+
+当时已经有过一些样式表语言的建议了，但 CSS 是第一个含有“层叠”的主意的。在 CSS 中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。
+
+哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当时 W3C 刚刚创建，W3C 对 CSS 的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996 年底，CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。
+
+1997 年初，W3C 内组织了专门管 CSS 的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。到 2007 年为止，第三版还未完备。
+
--- a/CSS/css-pseudo-class.md
+++ b/CSS/css-pseudo-class.md
@@ -0,0 +1,42 @@
+CSS 伪类用于向某些选择器添加特殊的效果。
+
+| 属性 | 描述 |
+| --- | --- |
+| :active | 向被激活的元素添加样式。|
+| :focus | 向拥有键盘输入焦点的元素添加样式。|
+| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。|
+| :link | 向未被访问的链接添加样式。|
+| :visited | 向已被访问的链接添加样式。|
+| :first-child | 向元素的第一个子元素添加样式。|
+
+## 锚伪类
+
+```css
+a:link {color: #FF0000}		/* 未访问的链接 */
+a:visited {color: #00FF00}	/* 已访问的链接 */
+a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
+a:active {color: #0000FF}	/* 选定的链接 */
+```
+
+## :first-child伪类
+
+```css
+p:first-child {font-weight: bold;}
+```
+
+## 选择器的优先级
+
+在实际开发中，经常会为同一个标签设置多个样式。使用不同方式的选择器，由于其优先级不同，导致最终的效果也会不同。
+
+选择器的优先级，具体如下:
+
+- 内联样式的优先级为 1000
+- ID 选择器的优先级为 100
+- 类选择器的优先级为 10
+- 元素选择器的优先级为 1
+- 通配符选择器的优先级为 0
+- 继承的样式没有任何优先级
+
+> **值得注意的是:**
+> 
+> - 当一个样式中包含多个选择器时，需要将所有的选择器的优先级进行相加。
--- a/CSS/css-selector.md
+++ b/CSS/css-selector.md
@@ -0,0 +1,126 @@
+## 元素选择器
+
+元素选择器就是通过 HTML 页面的元素名称来设置 CSS 样式。具体语法如下:
+
+```css
+元素名称 { 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+div {color : red; }
+```
+
+## 类选择器
+
+类选择器就是通过 HTML 元素的 class 属性值来设置 CSS 样式。具体语法如下:
+
+```css
+.class属性值 { 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+.myDiv {color : red; }
+```
+
+## ID选择器
+
+ID选择器就是通过 HTML 元素的 id 属性值来设置 CSS 样式。具体语法如下:
+
+```css
+#id属性值 { 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+#show1 {color : red; }
+```
+
+## 属性选择器
+
+属性选择器就是通过 HTML 元素的属性名称来设置 CSS 样式。具体语法如下:
+
+```css
+[属性名称] { 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+[name] {color : red; }
+```
+
+| 选择器 | 描述 |
+| --- | --- |
+| [attribute] | 用于选取带有指定属性的元素。|
+| [attribute=value] | 用于选取带有指定属性和值的元素。|
+| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。|
+| [attribute^=value] | 匹配属性值以指定值开头的每个元素。|
+| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。|
+| [attribute*=value] | 匹配属性值中包含指定值的每个元素。|
+
+## 后代选择器
+
+后代选择器就是设置 HTML 页面的指定元素的后代元素（中间使用空格）的 CSS 样式。具体语法如下:
+
+```css
+祖先元素 后代元素 { 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+div em {color : red; }
+```
+
+## 子元素选择器
+
+子选择器就是设置 HTML 页面的指定元素的子元素的 CSS 样式。具体语法如下:
+
+```css
+祖先元素 > 子元素{ 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+div > em {color : red; }
+```
+
+## 相邻元素选择器
+
+相邻元素选择器就是设置 HTML 页面的指定元素的下一个兄弟元素的 CSS 样式。具体语法如下:
+
+```css
+指定元素 + 兄弟元素 { 属性名 : 属性值; }
+```
+
+示例代码:
+
+```css
+div + div {color : red; }
+```
+
+## 其他内容
+
+### 选择器分组
+
+选择器分组就是将不同选择器相同声明的内容“压缩”在一起，得到更简洁的样式表。
+
+```css
+/* no grouping */
+h1 {color:blue;}
+h2 {color:blue;}
+h3 {color:blue;}
+h4 {color:blue;}
+h5 {color:blue;}
+h6 {color:blue;}
+
+/* grouping */
+h1, h2, h3, h4, h5, h6 {color:blue;}
+```
+
--- a/CSS/display-and-hidden.md
+++ b/CSS/display-and-hidden.md
@@ -0,0 +1,191 @@
+CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。
+
+- display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。
+- visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，会影响布局。
+
+## display 属性
+
+| 属性值 | 描述 |
+| --- | --- |
+| none | 此元素不会被显示。|
+
+当将一个元素的 CSS 属性 display 设置为 none 时，该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。
+
+在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1"></div>
+    <div id="d2"></div>
+  </body>
+</html>
+```
+
+当为第一个 `<div>` 标签设置 display 属性值为 none 时，该 `<div>` 标签会被隐藏。
+
+| 属性值 | 描述 |
+| --- | --- |
+| block | 此元素将显示为块级元素。|
+
+该值主要作用于**内联元素**。如果将内联元素的 CSS 属性 display 设置为 block 时，该内联元素将在浏览器中显示成块级元素效果。
+
+在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #s1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #s2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <span id="s1">这是一个span</span>
+    <span id="s2">这是一个span</span>
+  </body>
+</html>
+```
+
+当为第一个 `<span>` 标签设置 display 属性值为 block 时，该 `<span>` 标签会呈现块级元素效果。
+
+| 属性值 | 描述 |
+| --- | --- |
+| inline | 默认值，此元素会被显示为内联元素。|
+
+该值主要作用于**块级元素**。如果将内联元素的 CSS 属性 display 设置为 inline 时，该内联元素将在浏览器中显示成内联元素效果。
+
+在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1">这是一个div</div>
+    <div id="d2">这是一个div</div>
+  </body>
+</html>
+```
+
+当为第一个 `<div>` 标签设置 display 属性值为 inline 时，该 `<div>` 标签会呈现内联元素样式。
+
+| 属性值 | 描述 |
+| --- | --- |
+| inline-block | 行内块元素。|
+
+当将 CSS 属性 display 设置为 inline-block 时，该元素在浏览器中显示为内联块级效果。即每个元素呈现块级元素效果，元素之间呈现内联元素效果。
+
+在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1">这是一个div</div>
+    <div id="d2">这是一个div</div>
+  </body>
+</html>
+```
+
+分别为两个 `<div>` 标签设置 display 属性值为 inline-block 时，这两个 `<div>` 会显示在一行中。
+
+### visibility 属性
+
+visibility 属性指定一个元素是否是可见的。
+
+> **值得注意的是:** visibility 属性设置元素不可见的元素，但会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。
+
+| 属性值 | 描述 |
+| --- | --- |
+| visible | 默认值，元素是可见的。|
+| hidden | 元素是不可见的。|
+
+在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1">这是一个div</div>
+    <div id="d2">这是一个div</div>
+  </body>
+</html>
+```
+
+当为第一个 `<div>` 标签设置 visibility 属性值为 hidden 时，该 `<div>` 会被隐藏。
--- a/CSS/float.md
+++ b/CSS/float.md
@@ -0,0 +1,219 @@
+## 文档流
+
+将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。
+
+文档流是 HTML 页面的底层结构，HTML 页面创建的元素默认都在文档流中。
+
+- 块级元素
+	- 块级元素在文档流中自上向下排列（垂直方向排列）
+	- 块级元素在文档流中默认的宽度是父元素的100%
+	- 块级元素在文档流中默认的高度被是所有子元素的高度总和
+- 内联元素
+	- 内联元素在文档流中自左向右水平排列（水平方向排列）
+	- 内联元素的宽度和高度都由内容确定
+
+> **值得注意的是:** 如果在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列。
+
+有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。
+
+> **值得注意的是:** 在 IE 浏览器中浮动元素也存在于文档流中。
+
+## 浮动
+
+CSS 的 Float（浮动），会使元素脱离文档流，向左或向右移动。其他元素会被重新排列。
+
+Float（浮动），往往是用于图像，但它在布局时一样非常有用。
+
+| 属性值 | 描述 |
+| --- | --- |
+| none | 默认值。元素不浮动。|
+| left | 元素向左浮动。|
+| right | 元素向右浮动。|
+
+设置元素浮动效果时，以下四种情况比较特殊:
+
+- 子元素只能在父元素的区域中进行浮动（子元素浮动不能超出父元素的范围）。
+
+在 HTML 页面中定义两个 `<div>` 标签为父子元素，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1">
+      <div id="d2"></div>
+    </div>
+  </body>
+</html>
+```
+
+当为子元素 `<div>` 标签设置 float 属性值为 right 时，该 `<div>` 为浮动效果。
+
+- 兄弟元素同时设置相同浮动效果时，会进行自动排列。
+
+在 HTML 页面中定义两个 `<div>` 标签为兄弟元素，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1"></div>
+    <div id="d2"></div>
+  </body>
+</html>
+```
+
+当同时为两个 `<div>` 标签设置 float 属性值为 left 时，这两个 `<div>` 为浮动效果。
+
+- 如果兄弟元素中，前一个兄弟元素没有设置浮动，而后一个兄弟元素设置浮动的话，后一个兄弟元素的浮动不能超过前一个兄弟元素。
+
+在 HTML 页面中定义两个 `<div>` 标签为兄弟元素，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1"></div>
+    <div id="d2"></div>
+  </body>
+</html>
+```
+
+当为第二个 `<div>` 标签设置 float 属性值为 right 时，该 `<div>` 为浮动效果。
+
+> **值得注意的是:** 所有浮动元素的层级要高于文档流中的元素的层级。但文字是个例外，文字不会被浮动元素所覆盖，而是环绕在浮动元素的周围。
+
+### 块级元素浮动
+
+块级元素设置浮动之后，会从文档流中脱离，并且具有以下特点:
+
+- 块级元素不会独占 HTML 页面的一行。换句话讲，多个块级元素可以处在一行。
+- 块级元素的宽度和高度等于所有后代元素的总和。
+
+### 内联元素浮动
+
+内联元素设置浮动之后，也会从文档流中脱离，并且会呈现块级元素的效果。特点也与设置浮动的块级元素相同。
+
+### 清除浮动
+
+clear 属性指定元素的左侧或右侧不允许浮动的元素。
+
+| 属性值 | 描述 |
+| --- | --- |
+| none | 默认值。允许浮动元素出现在两侧。|
+| left | 在左侧不允许浮动元素。|
+| right | 在右侧不允许浮动元素。|
+| both | 在左右两侧均不允许浮动元素。|
+
+## 高度塌陷
+
+在 HTML 页面中定义两个 `<div>` 标签为父子元素，并设置 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        border: 10px black solid;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1">
+      <div id="d2"></div>
+    </div>
+  </body>
+</html>
+```
+
+上述 HTML 页面运行的效果如下:
+
+![](img/15.png)
+
+为作为子元素 `<div>` 设置 float 属性值为 left 时，该 `<div>` 为浮动效果。
+
+![](img/16.png)
+
+由于并没有为作为父元素的 `<div>` 设置高度，作为父元素的 `<div>` 实际的高度与作为子元素的 `<div>` 的高度相等。
+
+但作为子元素的 `<div>` 设置浮动后，脱离了文档流，导致作为父元素的 `<div>` 没有了高度。
+
+现在所看到的效果，就被称为**高度塌陷**。
+
+> 所谓**高度塌陷**，就是指在没有为父元素设置指定高度，并且设置子元素为浮动时，父元素的高度丢失的情况。
+
+高度塌陷的问题，可以通过 BFC（Block Formatting Context）块级格式化环境进行解决。
+
+### BFC 块级格式化环境
+
+BFC（Block Formatting Context）是元素的隐含属性。默认情况下 BFC 是关闭的，当元素开启 BFC 以后，将会具有如下特性:
+
+- 文档流中的元素不会被设置为浮动的元素所覆盖。
+- 子元素的垂直方向的外边距不会传递给父元素。
+- 元素可以包含浮动的子元素。
+
+当然，并不能直接去开启 BFC，而需要使用一些特殊的样式来间接的打开元素的 BFC。
+
+- 设置元素为浮动（float）
+- 设置元素的 display 为 inline-block
+- 设置元素为绝对定位（后面的内容）
+- 将元素的 overflow 设置为一个非 visible 的值（一般设置为 hidden）
+- 在所有子元素的最后新增一个子元素，并设置 clear 属性值为 both
+
+> **值得注意的是:** 开启 BFC 都会有一些副作用，需要选择一些副作用小的方式。
--- a/CSS/how-use-css.md
+++ b/CSS/how-use-css.md
@@ -0,0 +1,41 @@
+## 第一种内联样式
+
+通过HTML元素的style属性来设置CSS样式，语法如下:
+
+```html
+style="css属性:css属性值;"
+```
+
+示例代码:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>01_第一种使用方式.html</title>
+  </head>
+  <body>
+    <!-- style="css属性:css属性值;" -->
+	<div style="color:red;" >atguigu</div>
+  </body>
+</html>
+```
+
+## 第二种内联样式
+
+通过HTML页面的style元素来设置CSS样式，语法如下:
+
+```html
+<style type="text/css">
+	选择器 {
+		属性名 : 属性值;
+	}
+</style>
+```
+
+示例代码:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
--- a/CSS/overflow-attribute.md
+++ b/CSS/overflow-attribute.md
@@ -0,0 +1,92 @@
+overflow 属性用于设置当元素中的内容溢出后的情况。
+
+> **值得注意的是:** 所谓溢出，是指子元素的大小（包括文本、元素或图片等）超出父元素的区域，会有一部分内容显示在父元素所在的区域外。
+
+| 属性值 | 描述 |
+| --- | --- |
+| visible | 默认值。内容不会被修剪，会呈现在元素框之外。|
+| hidden | 内容会被修剪，并且其余内容是不可见的。|
+
+上述两个值，要么设置溢出的内容默认显示在父元素的区域之外，要么设置溢出的内容隐藏不可见。这两种结果都是很好的效果。所以，在实际开发中，很少使用这两个值。
+
+在 HTML 页面中定义一个 `<div>` 标签，设置 CSS 样式，并设置较多的文本内容，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
+这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
+我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
+枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
+鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
+哇的一声，夜游的恶鸟飞过了。
+我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
+后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。
+猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
+我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
+一九二四年九月十五日。
+    </div>
+  </body>
+</html>
+```
+
+当为第一个 `<div>` 标签设置 overflow 属性值为 hidden 时，该 `<div>` 中的溢出文本内容会被隐藏。
+
+| 属性值 | 描述 |
+| --- | --- |
+| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。|
+| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。|
+
+在 HTML 页面中定义一个 `<div>` 标签，设置 CSS 样式，并设置较多的文本内容，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
+这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
+我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
+枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
+鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
+哇的一声，夜游的恶鸟飞过了。
+我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
+后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。
+猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
+我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
+一九二四年九月十五日。
+    </div>
+  </body>
+</html>
+```
+
+当为第一个 `<div>` 标签设置 overflow 属性值为 scroll 时，该 `<div>` 中的溢出文本内容会显示滚动条。
+
+上述两个值，当有溢出的内容出现时，都会显示滚动条以便查看其余的内容。但不同是:
+
+- scroll: 无论是否有溢出的内容，始终显示滚动条。
+- auto: 当有溢出的内容出现时，才显示滚动条。如果没有溢出的内容时，会自动隐藏滚动条。
--- a/CSS/position.md
+++ b/CSS/position.md
@@ -0,0 +1,217 @@
+CSS 的 position 定位属性允许自定义元素在 HTML 页面的位置，但需要先开启元素在 HTML 页面中的定位。
+
+> **值得注意的是:** 元素在 HTML 页面中默认是不开启定位的。
+
+CSS 定位属性提供了四种方式的定位效果:
+
+- static: 默认值，表示元素为静态定位。
+- absolute: 表示元素为绝对定位。
+- fixed: 表示元素为固定定位。
+- relative: 表示元素为相对定位。
+
+当设置元素的 position 定位属性为**非默认值**时，CSS 提供了上、右、下和左四个方向的偏移量完成元素的位置设置。
+
+- top: 表示当前元素到上边的距离。
+- right: 表示当前元素到右边的距离。
+- bottom: 表示当前元素到下边的距离。
+- left: 表示当前元素到左边的距离。
+
+![](03.png)
+
+## 绝对定位
+
+| 属性值 | 描述 |
+| --- | --- |
+| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。|
+
+> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
+
+元素开启绝对定位后，与浮动效果类似:
+
+- 元素会脱离文档流。
+- 元素会呈现块级元素效果。
+- 如果不设置偏移量，元素的位置不会发生变化。
+
+### 如果元素的父元素是 `<body>` 的话，绝对定位会相对于当前页面
+
+在 HTML 页面中定义两个 `<div>` 标签，并且为相邻的兄弟元素，并设置其 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 300px;
+        height: 300px;
+        background-color: lightskyblue;
+
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1"></div>
+    <div id="d2"></div>
+  </body>
+</html>
+```
+
+为第二个 `<div>` 元素开启绝对定位，并设置偏移量，具体代码如下:
+
+```css
+position: absolute;
+left: 0px;
+top: 0px;
+```
+
+> **值得注意的是:** 如果开启绝对定位的元素的父元素并不是 `<body>` 标签，但父元素没有开启任何定位的话，开启绝对定位的元素还是相对于当前页面。
+
+### 如果元素的父元素不是 `<body>` 标签，并且开启定位的话，绝对定位会相对于父元素
+
+在 HTML 页面中定义两个 `<div>` 标签，并且为父元素与子元素的关系，并设置其 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 500px;
+        height: 400px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1">
+      <div id="d2"></div>
+    </div>
+  </body>
+</html>
+```
+
+为两个 `<div>` 元素开启绝对定位，并设置偏移量，具体代码如下:
+
+```css
+#d1 {
+  width: 500px;
+  height: 400px;
+  background-color: lightskyblue;
+  
+  position: absolute;
+  left: 100px;
+  top: 0px;
+}
+#d2 {
+  width: 300px;
+  height: 300px;
+  background-color: green;
+  
+  position: absolute;
+  left: 100px;
+  top: 0px;
+}
+```
+
+## 固定定位
+
+| 属性值 | 描述 |
+| --- | --- |
+| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。|
+
+> 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
+
+固定定位是一种特殊的绝对定位，固定定位与绝对定位的区别在于:
+
+- 固定定位始终相对于当前页面进行定位。
+- 绝对定位相对于最近的祖先元素进行定位。
+
+例如上述效果就是固定定位的一种应用方式。实现上述效果的具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      body {
+        margin: 0px;
+        height: 2000px;
+      }
+      #d1 {
+        width: 100%;
+        height: 100px;
+        background-color: lightskyblue;
+        position: fixed;
+        bottom: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1"></div>
+  </body>
+</html>
+```
+
+## 相对定位
+
+| 属性值 | 描述 |
+| --- | --- |
+| relative | 生成相对定位的元素，相对于其正常位置进行定位。|
+
+> **值得注意的是:**
+> 
+> - 开启相对定位的元素，不会脱离文档流。
+> - 开启相对定位的元素，是相对于该元素在文档流中的定位效果。
+> - 开启相对定位的元素，不会改变元素的性质。（块级元素呈现块级元素效果，内联元素呈现内联元素效果）
+
+在 HTML 页面中定义两个 `<div>` 标签，并且为相邻的兄弟元素，并设置其 CSS 样式，具体代码如下:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      #d1 {
+        width: 500px;
+        height: 400px;
+        background-color: lightskyblue;
+      }
+      #d2 {
+        width: 300px;
+        height: 300px;
+        background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="d1"></div>
+    <div id="d2"></div>
+  </body>
+</html>
+```
+
+为第二个 `<div>` 元素开启相对定位，并设置偏移量，具体代码如下:
+
+```css
+position: absolute;
+left: 0px;
+top: 0px;
+```
--- a/HTML/html5-basics/first-html.md
+++ b/HTML/html5-basics/first-html.md
@@ -0,0 +1,196 @@
+## 示例代码
+
+```html
+<html>
+	<head>
+		<title>01_helloworld.html</title>
+	</head>
+	<body>
+		<!-- 这是第一个页面 helloworld -->
+		<font color="red">hello world!</font>
+	</body>
+</html>
+```
+
+示例代码说明:
+
+- html 标签: 定义 HTML 文档，HTML 文档的根标签。
+- head 标签: 定义关于文档的基本信息。
+- body 标签: 定义文档的主体，运行 HTML 文档时显示的内容。
+- title 标签: 定义文档的标题。在运行网页时，页面顶端显示的内容。
+- font 标签: 定义文字的字体、尺寸和颜色。
+
+## HTML元素（标签）
+
+HTML 标记标签通常被称为 HTML 标签，"HTML 标签" 和"HTML 元素" 通常都是描述同样的意思。（一个 HTML 元素包含了开始标签与结束标签）
+
+- HTML 标签是由尖括号包围的关键词，比如 `<html>`
+- HTML 标签通常是成对出现的，比如 `<b>` 和 `</b>`
+- 标签对中的第一个标签是开始标签，第二个标签是结束标签
+- 开始和结束标签也被称为开放标签和闭合标签
+
+> **值得注意的是:**
+> 
+> 不要忘记结束标签:
+> 
+> ```html
+> <font color="red">hello world!
+> ```
+> 
+> - 即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。
+> - HTML 文档中，关闭标签是可选的。
+> - 不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
+> 
+> HTML 空元素:
+> 
+> - 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
+> - `<br>` 就是没有关闭标签的空元素（`<br>` 标签定义换行）。
+> - 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
+> - 在开始标签中添加斜杠，比如 `<br />`，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
+> - 即使 `<br>` 在所有浏览器中都是有效的，但使用 `<br />` 其实是更长远的保障。
+> 
+> 推荐使用小写标签:
+> 
+> - HTML 标签对大小写不敏感：`<P>` 等同于 `<p>`。许多网站都使用大写的 HTML 标签。
+> - 万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
+
+## HTML 属性
+
+```html
+<font color="red">hello world!</font>
+```
+
+属性是 HTML 元素提供的附加信息。
+
+- HTML 元素可以设置属性。
+- 属性可以在元素中添加附加信息。
+- 属性一般描述于开始标签。
+- 属性总是以名称/值对的形式出现，比如：name="value"。
+
+> **值得注意的是:**
+> 
+> HTML 属性常用引用属性值:
+> 
+> - 属性值应该始终被包括在引号内。
+> - 双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。
+> 
+> 推荐使用小写属性:
+> 
+> - 属性和属性值对大小写不敏感。
+> - 万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
+> - 新版本的 (X)HTML 要求使用小写属性。
+
+## HTML 注释
+
+```html
+<!-- 这是一个注释 -->
+```
+
+- 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
+- 浏览器会忽略注释，也不会显示它们。
+- 将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
+- 合理地使用注释可以对未来的代码编辑工作产生帮助。
+
+## HTML 文档
+
+```
+HTML文档 = 网页
+```
+
+- HTML文档描述网页
+- HTML文档包含HTML标签和纯文本
+- HTML文档也被称为网页
+- HTML文档文件的后缀名为“.html”和“.htm”，两种后缀名没有任何区别
+
+## HTML 基本结构
+
+```html
+<html>
+	<head>
+	</head>
+	<body>
+	</body>
+</html>
+```
+
+## <!DOCTYPE> 声明
+
+<!DOCTYPE> 声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。
+
+- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
+- <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
+- 总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
+
+各个HTML版本的<!DOCTYPE> 声明应如何书写:
+
+- HTML 5
+
+```html
+<!DOCTYPE html>
+```
+
+- HTML 4.01 Strict
+
+	这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+```
+
+- HTML 4.01 Transitional
+
+	这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+- HTML 4.01 Frameset
+
+	这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+```
+
+## HTML 头部
+
+### `<head>` 元素
+
+`<head>` 元素包含了所有的头部标签元素。在 `<head>` 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。
+
+可以添加在头部区域的元素标签为: `<title>`, `<style>`, `<meta>`, `<link>`, `<script>`, `<noscript>`, and `<base>`。
+
+### `<title>` 元素
+
+`<title>` 标签定义了不同文档的标题。`<title>` 在 HTML/XHTML 文档中是必须的。
+
+### `<base>` 元素
+
+`<base>` 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接。
+
+### `<link>` 元素
+
+`<link>` 标签定义了一个文档和外部资源之间的关系。
+
+### `<style>` 元素
+
+`<style>` 标签定义了HTML文档的样式文件引用地址。
+
+### `<meta>` 元素
+
+meta 标签描述了一些基本的元数据。`<meta>` 标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。
+
+meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。
+
+> **`<meta>` 标签使用实例**
+> 
+> - 为搜索引擎定义关键词:
+> 
+> ```html
+> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
+> ```
+> 
+> - 为网页定义描述内容:
+> 
+> ```html
--- a/HTML/html5-basics/html-basics-element.md
+++ b/HTML/html5-basics/html-basics-element.md
@@ -0,0 +1,59 @@
+## 示例代码
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>06_基本元素实例.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <h1 align="center">春晓</h1>
+	<hr align="center" width="30%">
+	<p align="center">
+		春眠不觉晓， <br>
+		处处闻啼鸟。<br>
+		夜来风雨声，<br>
+		花落知多少。<br>
+	</p>
+  </body>
+</html>
+```
+
+## HTML 标题
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>02_标题元素.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <h1>这是标题 1</h1>
+	<h2>这是标题 2</h2>
+	<h3>这是标题 3</h3>
+	<h4>这是标题 4</h4>
+	<h5>这是标题 5</h5>
+	<h6>这是标题 6</h6>
+  </body>
+</html>
+```
+
+在 HTML 文档中，标题很重要。
+
+- 标题（Heading）是通过 `<h1>` - `<h6>` 标签进行定义的。
+- `<h1>` 定义最大的标题。 `<h6>` 定义最小的标题。
+- 浏览器会自动地在标题的前后添加空行。
+- 用户可以通过标题来快速浏览您网页。
+
+> **值得注意的是:**
+> 
+> - 标题（Heading）在浏览器运行显示的效果并不重要。（后面可以通过 CSS 进行修改）
+> - 标题（Heading）更重要的在于其语义化。
+> - 搜索引擎检索 HTML 页面时，`<h1>` 元素仅次于 `<title>` 元素。
+> - 一般一个 HTML 页面中只包含一个 `<h1>` 元素。
+
+## 段落
+
+```html
--- a/HTML/html5-basics/html-form.md
+++ b/HTML/html5-basics/html-form.md
@@ -0,0 +1,113 @@
+## `<form>` 表单
+
+表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| action | URL | 规定当提交表单时向何处发送表单数据。|
+| method | get/post | 规定用于发送表单数据的 HTTP 方法。|
+| name | text | 规定表单的名称。|
+
+## 文本框
+
+文本框通过 `<input type="text">` 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。
+
+- `<input>` 元素是空的,它只包含标签属性。
+- 你可以使用 `<label>` 元素来定义 `<input>` 元素的标注。
+- 表单本身并不可见。同时，在大多数浏览器中，文本框的缺省宽度是 20 个字符。
+- `<input>` 元素在 `<form>` 元素中使用，用来声明允许用户输入数据的 input 控件。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| type | button/checkbox/radio/password | type 属性规定要显示的 `<input>` 元素的类型。|
+| value | text | 设置值。 |
+| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")|
+| size | number | size 属性规定以字符数计的 `<input>` 元素的可见宽度。|
+| readonly | readonly | readonly 属性规定输入字段是只读的。|
+| disabled | disabled | disabled 属性规定应该禁用的 `<input>` 元素。|
+| checked | checked | checked 属性规定在页面加载时应该被预先选定的 `<input>` 元素。 (只针对 type="checkbox" 或者 type="radio")|
+
+示例代码:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>28_文本框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+    	用户名:<input type="text" id="username" name="username" value="用户名">
+		密码:<input type="text" id="password" name="password" value="密码" readonly="readonly">
+		确认密码:<input type="text" id="password" name="password" value="密码" disabled="true">
+    </form>
+  </body>
+</html>
+```
+
+## 密码字段
+
+密码字段通过标签 `<input type="password">` 来定义。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>29_密码框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+    	用户名:<input type="text" id="username" name="username">
+		密码:<input type="password" id="password" name="password">
+    </form>
+  </body>
+</html>
+```
+
+## 单选按钮
+
+`<input type="radio">` 标签定义了表单单选框选项。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>30_单选框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+		性别:
+		<input type="radio" checked="checked" id="male" name="sex" value="male">男
+		<input type="radio" id="female" name="sex" value="female">女<br>
+    </form>
+  </body>
+</html>
+```
+
+## 复选框
+
+`<input type="checkbox">` 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>31_复选框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+		爱好:
+		<input type="checkbox" checked="checked" id="java" name="like" value="java">java
+		<input type="checkbox" id="PHP" name="like" value="PHP">PHP
+    </form>
+  </body>
+</html>
+```
+
+## 下拉列表
+
+### `<select>` 元素用来创建下拉列表。
--- a/HTML/html5-basics/html-introduce.md
+++ b/HTML/html5-basics/html-introduce.md
@@ -0,0 +1,22 @@
+## 什么是 HTML
+
+HTML 的全称为 Hyper Text Markup Language，译为超文本标记语言。
+
+**超文本**，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
+
+**标记语言**，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。
+
+## 发展历史
+
+1980年，蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究，创建了使用于其系统的 HTML。Tim Berners-Lee 设计的 HTML 以纯文字格式为基础，可以使用任何文本编辑器处理，最初仅有少量标记（TAG）而易于掌握运用。随着 HTML 使用率的增加，人们不满足只能看到文字。
+
+1993年，还是大学生的马克·安德生在他的 Mosaic 浏览器加入 `<img>` 标记，从此可以在 Web 页面上浏览图片。但人们认为仅有图片还是不够，希望可将任何形式的媒体加到网页上。因此 HTML 不断地扩充和发展。
+
+## 标准的版本历史
+
+- 超文本标记语言（第一版）—— 在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
+- HTML 2.0 —— 1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
+- HTML 3.2 —— 1997 年 1 月 14 日，W3C 推荐标准
+- HTML 4.0 —— 1997 年 12 月 18 日，W3C 推荐标准
+- HTML 4.01（微小改进）—— 1999 年 12 月 24 日，W3C 推荐标准
+- HTML 5 的第一份正式草案已于 2008 年 1 月 22 日公布，仍继续完善
--- a/HTML/html5-basics/html-list.md
+++ b/HTML/html5-basics/html-list.md
@@ -0,0 +1,69 @@
+## 有序列表
+
+有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 `<ol>` 标签。每个列表项始于 `<li>` 标签。
+
+### `<ol>` 标签定义了一个有序列表. 列表排序以数字来显示。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| start | number | **HTML5不支持，不赞成使用。**请使用样式取代它。 规定列表中的起始点。|
+| type | 1   A   a   I   i | 规定列表的类型。|
+
+### `<li>` 标签定义列表项目。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| value | number | **HTML5不支持，不赞成使用。**请使用样式取代它。 规定列表项目的数字。|
+| type | 1   A   a   I   i | 规定列表的类型。|
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>13_有序列表.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <h4>Numbered list:</h4>
+	<ol>
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Letters list:</h4>
+	<ol type="A">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Lowercase letters list:</h4>
+	<ol type="a">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Roman numbers list:</h4>
+	<ol type="I">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Lowercase Roman numbers list:</h4>
+	<ol type="i">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	</ol>  
+  </body>
+</html>
+```
+
+## 无序列表
+
+无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
+
+### `<ul>` 标签定义无序列表。
--- a/HTML/html5-basics/html-table.md
+++ b/HTML/html5-basics/html-table.md
@@ -0,0 +1,104 @@
+## 基本表格
+
+表格由 `<table>` 标签来定义。每个表格均有若干行（由 `<tr>` 标签定义），每行被分割为若干单元格（由 `<td>` 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
+
+HTML表格元素:
+
+| 标签 | 属性 |
+| --- | --- |
+| `<table>` | 定义表格 |
+| `<th>` | 定义表格的表头 |
+| `<tr>` | 定义表格的行 |
+| `<td>` | 定义表格单元 |
+| `<caption>` | 定义表格标题 |
+| `<thead>` | 定义表格的页眉 |
+| `<tbody>` | 定义表格的主体 |
+| `<tfoot>` | 定义表格的页脚 |
+
+- 示例代码一:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table>
+		<tr>
+			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
+		</tr>
+		<tr>
+			<td>张三</td><td>男</td><td>18</td>
+		</tr>
+		<tr>
+			<td>李四</td><td>女 </td><td>16</td>
+		</tr>
+	</table>
+  </body>
+</html>
+```
+
+- 示例代码二:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table border="1" width="20%" rules="rows" frame="below">
+		<tr>
+			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
+		</tr>
+		<tr>
+			<td>张三</td><td>男</td><td>18</td>
+		</tr>
+		<tr>
+			<td>李四</td><td>女 </td><td>16</td>
+		</tr>
+	</table>
+  </body>
+</html>
+```
+
+- 示例代码三:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table border="1" width="20%">
+		<tr align="center">
+			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
+		</tr>
+		<tr>
+			<td>张三</td><td>男</td><td>18</td>
+		</tr>
+		<tr>
+			<td>李四</td><td>女 </td><td>16</td>
+		</tr>
+	</table>
+  </body>
+</html>
+```
+
+- 示例代码四:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table border="1" width="20%">
+		<tr align="center">
--- a/HTML/html5-basics/image-element.md
+++ b/HTML/html5-basics/image-element.md
@@ -0,0 +1,22 @@
+img元素定义及使用说明:
+
+- `<img>` 标签定义 HTML 页面中的图像。
+- `<img>` 标签有两个必需的属性：src 和 alt。
+
+> **值得注意的是:**
+> 
+> - 从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。`<img>` 标签的作用是为被引用的图像创建占位符。
+> - 通过在 `<a>` 标签中嵌套 `<img>` 标签，给图像添加到另一个文档的链接。
+
+img元素的属性列表:
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| align | top\bottom\middle\left\right | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。|
+| alt | text | 规定图像的替代文本。|
+| height | pixels | 规定图像的高度。|
+| src | URL | 规定显示图像的 URL。|
+| width | pixels | 规定图像的宽度。|
+
+```html
+<!DOCTYPE html>
--- a/HTML/html5-basics/link-element.md
+++ b/HTML/html5-basics/link-element.md
@@ -0,0 +1,22 @@
+HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
+
+- 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
+- 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
+- 在标签 `<a>` 中使用了href属性来描述链接的地址。
+
+> **值得注意的是:**
+> 
+> - 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
+> - 通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
+> - 请使用 CSS 来改变链接的样式。
+
+`<a>` 元素的属性列表:
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| href | URL | 规定链接的目标 URL。|
+| target | _blank/_parent/_self | 规定在何处打开目标 URL。仅在 href 属性存在时使用。|
+
+```html
+<!DOCTYPE html>
+<html>
--- a/HTML/html5/01.png
+++ b/HTML/html5/01.png
--- a/HTML/html5/02.png
+++ b/HTML/html5/02.png
--- a/HTML/html5/03.jpg
+++ b/HTML/html5/03.jpg
--- a/HTML/html5/04.jpg
+++ b/HTML/html5/04.jpg
--- a/HTML/html5/05.jpg
+++ b/HTML/html5/05.jpg
--- a/HTML/html5/06.jpg
+++ b/HTML/html5/06.jpg
--- a/HTML/html5/07.png
+++ b/HTML/html5/07.png
--- a/HTML/html5/08.jpg
+++ b/HTML/html5/08.jpg
--- a/HTML/html5/09.png
+++ b/HTML/html5/09.png
--- a/HTML/html5/10.jpg
+++ b/HTML/html5/10.jpg
--- a/HTML/html5/11.jpg
+++ b/HTML/html5/11.jpg
--- a/HTML/html5/12.gif
+++ b/HTML/html5/12.gif
--- a/HTML/html5/baidu-map.md
+++ b/HTML/html5/baidu-map.md
@@ -0,0 +1,380 @@
+## 如何使用
+
+### HTML 页面
+
+* 引入百度地图提供的JS文件
+
+```html
+<script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
+```
+
+* 定义容器元素`<div></div>`
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>百度地图如何使用</title>
+  <style type="text/css">
+	body, html,#allmap {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		margin:0;
+		font-family:"微软雅黑";
+	}
+  </style>
+  <!--
+	  引入百度地图提供的JS文件
+	  * 是在线提供的JS文件 - 必须可以联网
+	  http://api.map.baidu.com/api?v=2.0&ak=您的密钥
+	  * v=2.0 - 使用的百度地图的版本
+	  * ak=您的密钥 - 传递当前应用的秘钥
+	    * 只有秘钥正确,正常地使用百度地图的功能
+  -->
+  <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
+ </head>
+ <body>
+  <!-- 定义一个容器元素 - 用于显示百度地图 -->
+  <div id="allmap"></div>
+ </body>
+</html>
+```
+
+### JavaScript 逻辑
+
+* 创建百度地图对象
+
+```javascript
+var map = new BMap.Map(容器元素id);
+```
+
+* 初始化百度地图
+
+```javascript
+map.centerAndZoom(中心点坐标,显示级别)
+```
+
+如下述示例代码：
+
+```javascript
+/*
+	1. 通过Map()构造函数,创建百度地图对象
+		var map = new BMap.Map(容器元素id属性值);
+*/
+var map = new BMap.Map("allmap");
+/*
+	2. (必要)初始化百度地图 - 设置中心点和显示级别
+		map.centerAndZoom(center,zoom)
+		* center - 设置百度地图当前的中心点坐标
+			* Point类型,zoom参数必须设置
+			* String类型,zoom参数可有可无
+				* 如果不设置zoom,自动匹配最佳显示级别
+		* zoom - 设置百度地图当前的显示级别
+			* 一般情况下,值范围为 3-19
+			* 高清地图(移动端),值范围为 3-18
+*/
+map.centerAndZoom("北京",12);
+```
+
+## 核心类
+
+### Map类
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| Map(container) | container：页面容器元素id | 创建地图实例对象 |
+
+**配置方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| enableScrollWheelZoom() | | 开启鼠标滚轮放大或缩小地图的显示级别 |
+| disableScrollWheelZoom() |  | 禁用鼠标滚轮功能 |
+| enableDragging() |  | 启用鼠标拖拽功能 |
+| disableDragging() |  | 禁用鼠标拖拽功能 |
+
+**地图状态方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| getCenter() |  | 返回地图当前中心点(Point类型) |
+| getZoom() |  | 返回地图当前缩放级别(Number类型) |
+
+**修改地图状态方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| centerAndZoom(center,zoom) | center：设置地图的中心点坐标；zoom：设置地图的显示级别 | 初始化地图中心点和级别 |
+| setCenter(center) | center：设置地图的中心点坐标 | 设置地图中心点(Point|String) |
+| setCurrentCity(city) | city：设置地图城市 | 设置地图城市 |
+| setZoom(zoom) | zoom：设置地图的显示级别 | 设置显示级别 |
+
+**控件方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| addControl(control) |  | 将控件添加到地图 |
+| removeControl(control) |  | 从地图中移除控件 |
+
+**覆盖物方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| addOverlay(overlay) |  | 将覆盖物添加到地图中 |
+| removeOverlay(overlay) |  | 从地图中移除覆盖物 |
+| openInfoWindow(InfoWindow, Point) | InfoWindow：设置信息窗口；Point：在指定点打开 | 设置信息窗口 |
+
+## 控件类
+
+### ScaleControl类
+
+表示比例尺控件。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| ScaleControl(ScaleControlOptions) | - | 创建地图比例尺对象 |
+
+### ScaleControlOptions类
+
+表示ScaleControl构造函数的可选参数。
+
+**选项**
+
+- anchor：设置当前控件显示的位置。
+	- `BMAP_ANCHOR_TOP_LEFT`：左上角
+	- `BMAP_ANCHOR_BOTTOM_LEFT`：左下角
+	- `BMAP_ANCHOR_TOP_RIGHT`：右上角
+	- `BMAP_ANCHOR_BOTTOM_RIGHT`：右下角
+
+### NavigationControl类
+
+表示地图的平移缩放控件。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| NavigationControl(NavigationControlOptions) | - | 创建地图平移缩放对象 |
+
+### MapTypeControl类
+
+负责切换地图类型的控件。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| MapTypeControl(MapTypeControlOptions) | - | 创建地图类型对象 |
+
+### OverviewMapControl类
+
+表示缩略地图控件。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| OverviewMapControl(OverviewMapControlOptions) | - | 创建缩略地图对象 |
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>百度地图的控件类</title>
+  <style type="text/css">
+	body, html,#allmap {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		margin:0;
+		font-family:"微软雅黑";
+	}
+  </style>
+  <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
+ </head>
+ <body>
+  <div id="allmap"></div>
+  <script>
+	// 1. 创建地图对象
+	var map = new BMap.Map("allmap");
+	// 2. 初始化地图
+	map.centerAndZoom("北京",13);
+	map.enableScrollWheelZoom();
+	/*
+	   3. 添加比例尺控件
+	      * 创建比例尺控件对象
+		  * 将比例尺控件添加到地图中
+	 */
+	var scale = new BMap.ScaleControl({
+		anchor: BMAP_ANCHOR_TOP_RIGHT
+	});
+	map.addControl(scale);
+	/*
+	   4. 添加平移缩放控件
+	      * 创建平移缩放控件对象
+		  * 将平移缩放控件添加到地图中
+	 */
+	var nav = new BMap.NavigationControl({
+		anchor: BMAP_ANCHOR_TOP_RIGHT
+	});
+	map.addControl(nav);
+	// 5. 添加地图类型切换控件
+	var type = new BMap.MapTypeControl({
+		anchor: BMAP_ANCHOR_TOP_LEFT
+	});
+	map.addControl(type);
+	// 6. 添加缩略地图控件
+	var overview = new BMap.OverviewMapControl({
+		isOpen : true//表示是否自动打开
+	});
+	map.addControl(overview);
+  </script>
+ </body>
+</html>
+```
+
+## 覆盖物类
+
+### Marker类
+
+表示地图上一个图像标注。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| Marker(point) | - | 创建标注对象 |
+
+### InfoWindow类
+
+表示地图上包含信息的窗口。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| InfoWindow(content) | content：设置当前点的地址信息内容 | 创建信息的窗口对象 |
+
+**方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| setWidth(width) |  | 设置信息窗口的宽度 |
+| setHeight(height) |  | 设置信息窗口的高度 |
+| setTitle(title) |  | 设置信息窗口的标题 |
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+
+  <title>为百度地图进行标注</title>
+  <style type="text/css">
+	body, html,#allmap {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		margin:0;
+		font-family:"微软雅黑";
+	}
+  </style>
+  <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
+ </head>
+ <body>
+  <div id="allmap"></div>
+  <script>
+	var map = new BMap.Map("allmap");
+	var point = new BMap.Point(116.404, 39.915);
+	map.centerAndZoom(point, 15);
+	/*
+	   如何进行标注
+	   * 创建标注对象
+	   * 将标注添加到地图中
+	 */
+	var marker = new BMap.Marker(point);
+	map.addOverlay(marker);
+	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
+  </script>
+ </body>
+</html>
+```
+
+## 服务类
+
+### Geocoder类
+
+用于获取用户的地址解析。
+
+**构造器**
+
+| 构造函数 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| Geocoder() | content：设置当前点的地址信息内容 | 创建地址解析对象 |
+
+**方法**
+
+| 方法名称 | 参数 | 说明 |
+| ------- | ---- | ---- |
+| getPoint(address,callback,city) | address：要解析的地址内容；callback：回调函数（解析address地址成功的话,回调函数具有一个形参）；city：当前地址所在的城市名称 | 对指定的地址进行解析 |
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>百度地图案例</title>
+  <style type="text/css">
+	body, html,#allmap {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		margin:0;
+		font-family:"微软雅黑";
+	}
+  </style>
+  <script src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
+ </head>
+ <body>
+  <div id="allmap"></div>
+  <script>
+	// 1. 创建地图对象
+	var map = new BMap.Map("allmap");
+	// 2. 初始化地图
+	//map.centerAndZoom("北京",13);
+	// 3. 启用鼠标的滚轮功能
+	map.enableScrollWheelZoom();
+	/*
+	   4. 根据给定的地址获取Point的经度和纬度
+	      var geocoder = new BMap.Geocoder();
+		  geocoder.getPoint(address,function(point){},city);
+	 */
+	var geocoder = new BMap.Geocoder();
+	geocoder.getPoint("北京市海淀区万寿路西街2号",function(point){
+		// 5. 根据Point进行标注
+		var marker = new BMap.Marker(point);
+		map.addOverlay(marker);
+		// 6. 重新设置中心点位置
+		map.centerAndZoom(point,16);
+		// 7. 设置信息窗口
+		var opts = {
+			width : 200,
+			height: 100,
+			title : "文博大厦"
+		}
+		var info = new BMap.InfoWindow("地址:北京市海淀区万寿路西街2号",opts);
+		marker.addEventListener("click",function(){
+			map.openInfoWindow(info,point);
+		});
+	},"北京");
+  </script>
+ </body>
+</html>
+```
--- a/HTML/html5/canvas.md
+++ b/HTML/html5/canvas.md
@@ -0,0 +1,935 @@
+## 基础内容
+
+### Canvas技术允许在HTML页面直接绘制图形
+
+- 不再需要引入外部图片(图形),HTML页面性能有所提高。
+- 可以实现一些比较复杂的图形绘制工作。
+
+### Canvas技术主要应用方向
+
+- Web应用方面主要实现图表类。
+- 网页游戏方面 - 主要实现2D效果。
+
+### HTML5 提供有关图形方面的技术
+
+- Canvas - 主要以2D为主
+- WebGL - 主要以3D为主
+- SVG - 矢量图
+
+### Canvas的特点
+
+- 绘制的图形与HTML页面之间是无关系的
+- 通过Canvas绘制的图形不能使用DOM API
+- 通过Canvas绘制的图形不能绑定事件
+- Canvas画布最终是以图片(png|jpg)形式出现
+- 绘制图形默认的颜色为黑色
+
+## 如何使用Canvas画布
+
+### 在HTML页面中定义`<canvas>`元素
+
+- 设置`<canvas>`元素宽度和高度使用属性方式。
+- 使用CSS样式方式或属性方式设置`<canvas>`元素的宽度和高度。
+
+```html
+<!-- 
+	 在HTML页面中,定义<canvas>元素
+	 * 默认只定义<canvas>元素时
+	   * 效果非常类似于<div>元素,但不一样的地方:
+	     * <div>元素在默认情况下,不具有高度和宽度的
+		 * <canvas>元素在默认情况下,具有高度和宽度的
+		   * 宽度 - 300px
+		   * 高度 - 150px
+	 * 设置<canvas>元素的高度和宽度
+	   * (建议)使用属性width和height
+	   * 使用CSS中的属性width和height
+	     * 绘制的图形会被拉伸
+  -->
+<canvas id="canvas" width="500px" height="500px" style="background:pink;"></canvas>
+<!--
+<canvas id="canvas" style="width:500px;height:500px;"></canvas>
+-->
+```
+
+### 在JS代码中实现
+
+- 获取`<canvas>`元素
+- 通过`<canvas>`元素,创建画布对象
+	- getContext('2d')函数
+	- 返回画布对象
+- 利用画布对象进行图形的绘制
+
+```javascript
+// 获取HTML页面中的<canvas>元素
+var canvas = document.getElementById("canvas");
+/*
+	通过<canvas>元素,创建画布对象
+	使用getContext(type)函数,创建画布对象
+	* 该函数返回画布对象
+	* type参数
+		* 设置当前创建的画布是2d还是3d
+		* 注意
+			* 参数选项是2d(3d效果使用WebGL)
+			* 必须写成"2d"
+*/
+var context = canvas.getContext("2d");
+// 利用画布对象,进行绘制图形
+context.fillRect(10,10,100,100);
+```
+
+## 绘制图形
+
+### 绘制矩形
+
+#### a. 绘制实心(填充)矩形
+
+```javascript
+fillRect(x,y,width,height)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x和y | 绘制矩形的左上角的坐标值 |
+| width | 设置绘制矩形的宽度(单位为px) |
+| height | 设置绘制矩形的高度(单位为px) |
+
+#### b. 绘制空心(描边)矩形
+
+```javascript
+strokeRect(x,y,width,height)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x和y | 绘制矩形的左上角的坐标值 |
+| width | 设置绘制矩形的宽度(单位为px) |
+| height | 设置绘制矩形的高度(单位为px) |
+
+#### c. 清除指定区域的矩形
+
+```javascript
+clearRect(x,y,width,height)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x和y | 绘制矩形的左上角的坐标值 |
+| width | 设置绘制矩形的宽度(单位为px) |
+| height | 设置绘制矩形的高度(单位为px) |
+
+```html
+<canvas id="canvas" width="500px" height="500px"></canvas>
+<script>
+	// 1. 获取<canvas>元素
+	var canvas = document.getElementById("canvas");
+	// 2. 创建画布对象
+	var context = canvas.getContext('2d');
+	// 3. 绘制图形
+	// a. 绘制实心矩形
+	context.fillRect(10,10,100,100);
+	// b. 绘制空心矩形
+	context.strokeRect(120,10,100,100);
+	// c. 清除指定区域的矩形
+	context.fillRect(230,10,100,100);
+	context.clearRect(240,20,80,80);
+</script>
+```
+
+### 设置样式
+
+| 属性名称 | 作用 |
+| --- | --- |
+| fillStyle | 设置填充样式 |
+| strokeStyle | 设置描边样式 |
+| globalAlpha | 设置透明度(0-1) |
+
+> **值得注意的是：**
+> 
+> * 一定要先设置样式(颜色),再绘制图形。
+> - 每次改变样式(颜色),重新设置。
+
+```html
+<canvas id="canvas" width="500px" height="500px"></canvas>
+<script>
+	var canvas = document.getElementById("canvas");
+	var context = canvas.getContext('2d');
+
+	// a. 设置填充样式
+	context.fillStyle = "pink";
+	// b. 绘制实心矩形
+	context.fillRect(10,10,100,100);
+
+	context.fillStyle = "blue";
+	context.fillRect(10,120,100,100);
+
+	// 设置描边样式
+	context.strokeStyle = "red";
+	context.strokeRect(120,10,100,100);
+
+	context.strokeStyle = "green";
+	context.strokeRect(120,120,100,100);
+
+	// 设置透明度
+	context.globalAlpha = 0.5;
+	context.fillRect(230,10,100,100);
+
+	context.fillStyle = "black";
+	context.globalAlpha = 0.1;
+	context.fillRect(230,120,100,100);
+</script>
+```
+
+### 设置渐变
+
+#### a. 线性渐变
+
+```javascript
+createLinearGradient(x1,y1,x2,y2)
+```
+
+线性渐变主要依靠`基准线`概念，所谓`基准线`就是设置线性渐变的标准。
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x1和y1 | 基准线的起点坐标值 |
+| x2和y2 | 基准线的终点坐标值 |
+
+```html
+<canvas id="canvas" width="500px" height="500px"></canvas>
+<script>
+	var canvas = document.getElementById("canvas");
+	var context = canvas.getContext('2d');
+	/*
+	   设置线性渐变
+	   createLinearGradient(x1,y1,x2,y2)方法
+	   * 该方法具有返回值,是渐变对象
+	 */
+	var grd = context.createLinearGradient(0,0,100,100);
+	/*
+	   设置线性渐变的颜色和位置
+	   addColorStop(position,color)
+	   * position - 设置颜色的位置
+	     * 值的范围为 0 - 1
+	   * color - 设置颜色
+	 */
+	grd.addColorStop(0,"red");
+	grd.addColorStop(1,"blue");
+	grd.addColorStop(0.5,"yellow");
+	// 将设置的线性渐变,赋值给样式(fillStyle和strokeStyle)
+	context.fillStyle = grd;
+	// 绘制矩形
+	context.fillRect(0,0,100,100);
+</script>
+```
+
+#### b. 射线(扇形)渐变
+
+```javascript
+createRadialGradient(x1,y1,r1,x2,y2,r2)
+```
+
+射线渐变主要依靠`基准圆`概念，所谓`基准圆`就是设置射线渐变的标准。
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x1和y1 | 第一个基准圆的圆心 |
+| r1 | 第一个基准圆的半径 |
+| x2和y2 | 第二个基准圆的圆心 |
+| r2 | 第二个基准圆的半径 |
+
+```html
+<canvas id="canvas" width="500px" height="500px"></canvas>
+<script>
+	var canvas = document.getElementById("canvas");
+	var context = canvas.getContext("2d");
+	/*
+	   设置射线渐变
+	   createRadialGradient(x1,y1,r1,x2,y2,r2)
+	   * 该方法返回渐变对象
+	 */
+	var grd = context.createRadialGradient(100,100,100,canvas.width,canvas.height,200);
+	/*
+	   设置渐变颜色
+	 */
+	grd.addColorStop(0,"red");
+	grd.addColorStop(1,"blue");
+	// 将渐变对象赋值给样式
+	context.fillStyle = grd;
+	// 绘制矩形
+	context.fillRect(0,0,canvas.width,canvas.height);
+</script>
+```
+
+#### c. 设置渐变颜色
+
+```javascript
+addColorStop(position,color)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| position | 设置渐变颜色的位置，值的范围必须是`0-1`。 |
+| color | 设置渐变的颜色 |
+
+### 绘制文字
+
+| 属性名称 | 作用 |
+| --- | --- |
+| font | 设置文字的属性（用法同 CSS 属性`font`）。 |
+| textAlign | 水平对齐方式。（`left`：基准线在左边；`center`：基准线在中间；`right`：基准线在右边） |
+| textBaseline | 垂直对齐方式。（`top`：基准线在上边；`middle`：基准线在中间；`bottom`：基准线在下边；`hanging`：悬挂基线；`alphabetic`：字母基线） |
+
+#### a. 绘制实心文字
+
+```javascript
+fillText(text,x,y)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| text | 绘制的文字内容。 |
+| x和y | 绘制文字的坐标值。 |
+
+#### b. 绘制空心文字
+
+```javascript
+strokeText(text,x,y)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| text | 绘制的文字内容。 |
+| x和y | 绘制文字的坐标值。 |
+
+```html
+<canvas id="canvas" width="500px" height="500px"></canvas>
+<script>
+	var canvas = document.getElementById("canvas");
+	var context = canvas.getContext('2d');
+
+	// 设置文字样式
+	context.font = "bold 48px 宋体";
+	// 基准线
+	context.beginPath();
+	context.moveTo(100,0);
+	context.lineTo(100,400);
+	context.stroke();
+	// 设置水平对齐
+	context.textAlign = "right";
+	// 绘制文字
+	context.fillText("text",100,50);
+
+	// 设置水平对齐
+	context.textAlign = "center";
+	// 绘制文字
+	context.fillText("text",100,100);
+
+	// 设置水平对齐
+	context.textAlign = "left";
+	// 绘制文字
+	context.fillText("text",100,150);
+
+	// 基准线
+	context.beginPath();
+	context.moveTo(0,300);
+	context.lineTo(500,300);
+	context.stroke();
+	// 设置垂直对齐
+	context.textBaseline = "top";
+	context.strokeText("text",0,300);
+
+	context.textBaseline = "middle";
+	context.strokeText("text",100,300);
+
+	context.textBaseline = "bottom";
+	context.strokeText("text",200,300);
+
+	context.textBaseline = "hanging";
+	context.strokeText("text",300,300);
+
+	context.textBaseline = "alphabetic";
+	context.strokeText("text",400,300);
+</script>
+```
+
+### 设置阴影
+
+| 属性名称 | 作用 |
+| --- | --- |
+| shadowColor | 设置阴影颜色。 |
+| shadowOffsetX | 设置水平方向阴影。 |
+| shadowOffsetY | 设置垂直方向阴影。 |
+| shadowBlur | 设置阴影程度。 |
+
+## Canvas绘图
+
+### 创建路径
+
+图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
+
+1. 首先，需要创建路径起始点。
+2. 然后，使用画图命令去画出路径。
+3. 之后，把路径封闭。
+4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
+
+#### 绘制矩形
+
+##### 绘制矩形的实现步骤
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`rect(x, y, width, height)`方法，设置矩形的坐标值及宽度和高度。
+3. 通过`fill()`或`stroke()`方法进行绘制。
+
+##### 使用方法说明
+
+```javascript
+rect(x, y, width, height)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x和y | 表示矩形的左上角坐标值。 |
+| width和height | 表示矩形的宽度和高度。|
+
+#### 绘制圆形
+
+##### 绘制圆形的实现步骤
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`arc(x, y, radius, startAngle, endAngle, anticlockwise)`方法，设置矩形的坐标值及宽度和高度。
+3. 通过`fill()`或`stroke()`方法进行绘制。
+
+##### 使用方法说明
+
+```javascript
+arc(x, y, radius, startAngle, endAngle, anticlockwise)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x和y | 表示圆形的圆心坐标值。 |
+| radius | 表示圆形的半径。|
+| startAngle | 表示绘制圆形的开始点，值为 0。|
+| endAngle | 表示绘制圆形的结束点，值为 Math.PI*2。|
+| anticlockwise | 表示是以顺时针还是以逆时针方式绘制圆形，Boolean值。（默认值为false，表示顺时针。）|
+
+#### 绘制弧形
+
+##### 绘制圆形的实现步骤
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`arc(x, y, radius, startAngle, endAngle, anticlockwise)`方法，设置矩形的坐标值及宽度和高度。
+3. 通过`fill()`或`stroke()`方法进行绘制。
+
+##### 使用方法说明
+
+```javascript
+arc(x, y, radius, startAngle, endAngle, anticlockwise)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| x和y | 表示圆形的圆心坐标值。 |
+| radius | 表示圆形的半径。|
+| startAngle | 表示绘制圆形的开始点（取值范围：0 至 `Math.PI*2`。）。|
+| endAngle | 表示绘制圆形的结束点（取值范围：0 至 `Math.PI*2`。）。|
+| anticlockwise | 表示是以顺时针还是以逆时针方式绘制圆形，Boolean值。（默认值为false，表示顺时针。）|
+
+> **值得注意的是：**
+> 
+> 如果绘制的是空心弧形的话，在`arc()`方法调用后：
+> 
+> - 如果使用`closePath()`方法的话，绘制的图形会自动将终点和起点连接成线。
+> - 如果不用`closePath()`方法的话，绘制的图形会呈现开口状。
+
+#### 绘制直线
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`moveTo(x, y)`方法，设置直线的起点坐标值。
+3. 使用`lineTo(x, y)`方法，设置直线的终点坐标值。
+4. 通过`stroke()`方法进行绘制。
+
+#### 绘制折线
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`moveTo(x, y)`方法，设置直线的起点坐标值。
+3. 使用`lineTo(x, y)`方法，设置直线的终点坐标值。
+4. 通过`stroke()`方法进行绘制。
+
+> **值得注意的是：**在绘制折线的时候，`lineTo()`方法既可以绘制折点，也可以绘制终点。
+
+#### 绘制多边形
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`moveTo(x, y)`方法，设置直线的起点坐标值。
+3. 使用`lineTo(x, y)`方法，设置直线的终点坐标值。
+4. 调用`closePath()`方法，闭合当前绘制的路径。
+5. 通过`fill()`或`stroke()`方法进行绘制。
+
+### 设置线型
+
+所有画布操作都使用相同的线型，即默认线型。实际上线条的宽度、端点都可以根据实际绘图需要进行调整。
+
+#### 设置线宽
+
+`lineWidth`：指定线条粗细，默认值是1.0。
+
+```html
+<canvas id="myCanvas" width="578" height="200"></canvas>
+<script>
+  var canvas = document.getElementById('myCanvas');
+  var context = canvas.getContext('2d');
+
+  context.beginPath();
+  context.moveTo(100, 150);
+  context.lineTo(450, 50);
+  context.lineWidth = 15;
+  context.stroke();
+</script>
+```
+
+#### 设置端点形状
+
+`lineCap`：指定线条端点形状。
+
+- butt：默认，向线条的每个末端添加平直的边缘。
+- round：向线条的每个末端添加圆形线帽。
+- square：向线条的每个末端添加正方向线帽。
+
+> **值得注意的是：**`round`和`square`会使线条略变微长。
+
+```html
+<canvas id="myCanvas" width="578" height="200"></canvas>
+<script>
+	var canvas = document.getElementById('myCanvas');
+	var context = canvas.getContext('2d');
+
+	// butt line cap (top line)
+	context.beginPath();
+	context.moveTo(200, canvas.height / 2 - 50);
+	context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
+	context.lineWidth = 20;
+	context.strokeStyle = '#0000ff';
+	context.lineCap = 'butt';
+	context.stroke();
+
+	// round line cap (middle line)
+	context.beginPath();
+	context.moveTo(200, canvas.height / 2);
+	context.lineTo(canvas.width - 200, canvas.height / 2);
+	context.lineWidth = 20;
+	context.strokeStyle = '#0000ff';
+	context.lineCap = 'round';
+	context.stroke();
+
+	// square line cap (bottom line)
+	context.beginPath();
+	context.moveTo(200, canvas.height / 2 + 50);
+	context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
+	context.lineWidth = 20;
+	context.strokeStyle = '#0000ff';
+	context.lineCap = 'square';
+	context.stroke();
+</script>
+```
+
+#### 设置交点形状
+
+`lineJoin`：指定两条线之间的连接点形状。
+	
+- round：创建圆角。
+- bevel：创建斜角。
+- miter：默认，创建尖角。
+
+`miterLimit`：与`lineJoin`一起使用，当`lineJoin`设置为`miter`时，可用于确定线条交接点的延伸范围。
+
+```html
+<canvas id="myCanvas" width="578" height="200"></canvas>
+<script>
+	var canvas = document.getElementById('myCanvas');
+	var context = canvas.getContext('2d');
+
+	// set line width for all lines
+	context.lineWidth = 25;
+
+	// miter line join (left)
+	context.beginPath();
+	context.moveTo(99, 150);
+	context.lineTo(149, 50);
+	context.lineTo(199, 150);
+	context.lineJoin = 'miter';
+	context.stroke();
+
+	// round line join (middle)
+	context.beginPath();
+	context.moveTo(239, 150);
+	context.lineTo(289, 50);
+	context.lineTo(339, 150);
+	context.lineJoin = 'round';
+	context.stroke();
+
+	// bevel line join (right)
+	context.beginPath();
+	context.moveTo(379, 150);
+	context.lineTo(429, 50);
+	context.lineTo(479, 150);
+	context.lineJoin = 'bevel';
+	context.stroke();
+</script>
+```
+
+## 处理图像
+
+在HTML5中，不仅可以使用Canvas API来绘制图形，还可以读取磁盘或网络中的图像文件，然后使用Canvas API将该图像绘制在画布中。
+
+### 绘制图像
+
+#### 加载图像
+
+- 使用相同页面中的图片。
+- 使用相同页面中的其他Canvas元素。
+- 可以脚本通过Image( )构造函数创建图像。
+
+#### 绘制图像
+
+使用 `drawImage()` 方法绘制图像，该方法具体用法如下：
+
+```javascript
+drawImage(img, x, y)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| img | 需要绘制的图像。 |
+| x和y | 绘制图像的坐标值。|
+
+```javascript
+drawImage(img, x, y, width, height)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| img | 需要绘制的图像。 |
+| x和y | 绘制图像的坐标值。|
+| width和height | 设置绘制图像的宽度和高度。|
+
+```html
+<canvas id="myCanvas" width="578" height="400"></canvas>
+<script>
+	var canvas = document.getElementById('myCanvas');
+	var context = canvas.getContext('2d');
+	var imageObj = new Image();
+	imageObj.src = 'darth-vader.jpg';
+
+	imageObj.onload = function() {
+		context.drawImage(imageObj, 69, 50);
+	};
+</script>
+```
+
+**值得注意的是：**若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用load时间来保证不会在加载完毕之前使用这个图片：
+
+```javascript
+var img = new Image();   // 创建img元素
+img.src = 'myImage.png'; // 设置图片源地址
+img.onload = function(){
+	// 执行drawImage语句
+}
+```
+
+### 平铺图像
+
+所谓图像平铺就是用按一定比例缩小后的图像将画布填满。
+
+1. 加载图像。
+2. 通过 `createPattern(img, type)` 方法设置平铺方式。
+3. 将平铺对象赋值给filleStyle或strokeStyle属性。
+4. 将平铺的图像进行绘制。
+
+```javascript
+createPattern(img, type)
+```
+
+| 参数名称 | 作用 |
+| --- | --- |
+| img | 需要平铺的图像。 |
+| type | 平铺方式。（`no-repeat`：不平铺；`repeat-x`：水平方向平铺；`repeat-y`：垂直方向平铺；`repeat`：全方向平铺）|
+
+该方法返回平铺对象。
+
+```html
+<canvas id="myCanvas" width="578" height="200"></canvas>
+<script>
+	var canvas = document.getElementById('myCanvas');
+	var context = canvas.getContext('2d');
+
+	var imageObj = new Image();
+	imageObj.src = 'wood-pattern.png';
+	imageObj.onload = function() {
+		var pattern = context.createPattern(imageObj, 'repeat');
+
+		context.rect(0, 0, canvas.width, canvas.height);
+		context.fillStyle = pattern;
+		context.fill();
+	};
+</script>
+```
+
+**值得注意的是：**若调用 createPattern 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用load时间来保证不会在加载完毕之前使用这个图片：
+
+```javascript
+var img = new Image();   // 创建img元素
+img.src = 'myImage.png'; // 设置图片源地址
+img.onload = function(){
+	// 执行createPattern语句
+}
+```
+
+### 切割图像
+
+1. 调用`beginPath()`方法，创建新建一条路径。
+2. 使用`rect()`或`arc()`方法
+3. 通过`clip()`方法进行切割。
+
+```html
+<canvas id="canvas" width="578" height="200"></canvas>
+<script>
+	var canvas = document.getElementById('canvas');
+	var context = elem.getContext('2d');
+	var image=new Image();
+	image.src="img/flower.jpg";
+	image.onload=function(){
+		context.drawImage(image,0,0,280,190);
+	}
+	context.beginPath();
+	context.arc(140,95,60,0,Math.PI*2,true);
+	context.closePath();
+	context.clip();
+</script>
+```
+
+### 画布方法
+
+#### 状态方法
+
+- `save()`，保存当前画布属性、状态。
+- `restore()`，恢复画布属性、状态。
+
+```html
+<canvas id="canvas" width="578" height="200"></canvas>
+<script>
+	var ctx = document.getElementById('canvas').getContext('2d');
+	
+	ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings
+	ctx.save();                  // Save the default state
+	
+	ctx.fillStyle = '#09F'       // Make changes to the settings
+	ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
+	
+	ctx.save();                  // Save the current state
+	ctx.fillStyle = '#FFF'       // Make changes to the settings
+	ctx.globalAlpha = 0.5;    
+	ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings
+	
+	ctx.restore();               // Restore previous state
+	ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings
+	
+	ctx.restore();               // Restore original state
+	ctx.fillRect(60,60,30,30);   // Draw a rectangle with restored settings
+</script>
+```
+
+#### 转换方法
+
+`translate(x, y)`：用来移动 canvas 和它的原点到一个不同的位置。
+	
+- x 是左右偏移量。
+- y 是上下偏移量。
+
+`scale(x, y)`：用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
+
+- x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
+- 值分类：
+	- 值比 1.0 小表示缩小。
+	- 比 1.0 大则表示放大。
+	- 值为 1.0 时什么效果都没有。
+
+`rotate(angle)`：用于以原点为中心旋转 canvas。
+
+- 旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
+
+## Chart.js库
+
+### 基础内容
+
+`Chart.js`是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
+
+官方网址：[http://www.chartjs.org/](http://www.chartjs.org/)
+
+`Chart.js`的特点：
+
+- 基于HTML 5：Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案。
+- 简单、灵活：Chart.js不依赖任何外部工具库，轻量级（压缩之后仅有4.5k），并且提供了加载外部参数的方法。
+
+### 使用Chart.js
+
+#### 使用Chart.js的步骤
+
+* 在`HTML`页面中引入`Chart.js`文件。
+
+```html
+<script src="Chart.js"></script>
+```
+
+* 创建`<canvas>`元素：用于显示`Chart`图表的容器。
+  
+```html
+<canvas id="myChart" width="400" height="400"></canvas>
+```
+
+* 获取Canvas对象。
+  
+```javascript
+document.getElementById("myChart").getContext("2d");`
+```
+
+* 创建Chart图表对象。
+  
+```javascript
+new Chart(ctx);
+```
+
+* 通过Chart图表对象进行绘制。
+ 
+```javascript
+chart.PolarArea(data);
+```
+
+#### Chart.js全局配置
+
+Chart.js 全局配置是在chart.js 第一个正式版本中引入。Chart.js 全局配置用于改变所有图表的类型，避免了需要在每一个图表中单独进行设置。当然，Chart.js 全局配置也可以专门为某一个特定的图表进行配置。
+
+语法如下：
+
+```javascript
+Chart.defaults.global.参数名 = 参数值;
+```
+
+例如如下方式设定：
+
+```javascript
+Chart.defaults.global.responsive = true;
+```
+
+#### 绘制图表
+
+##### a. 曲线图
+
+曲线图就是将多个数据点绘制在一条线上，通常被用于展示趋势的数据或两组数据之间的对比。
+
+```javascript
+new Chart(ctx).Line(data, options)
+```
+
+- data：用于设置曲线上的数据、样式及名称。
+- options：选项，用于配置曲线图。
+
+##### b. 柱状图
+
+柱状图就是使用柱状方式显示数据的一种方式，通常被用于展示趋势的数据或多组数据之间的比较。
+
+```javascript
+new Chart(ctx).Bar(data, options)
+```
+
+- data：用于设置柱状图上的数据、样式及名称。
+- options：选项，用于配置柱状图。
+
+##### c. 饼状图
+
+饼状图可能是所有图表中最为常用的一种，就是将一个圆划分成若干个部分，每个弧形展示每个数据的比例值。通常被用于展示多组数据之间的比例。
+
+```javascript
+new Chart(ctx).Pie(data,options)
+```
+
+- data：用于设置饼图的数据、样式及名称。
+- options：选项，用于配置饼图。
+
+##### d. 雷达图
+
+雷达图就是一种展示多个数据点以及它们之间变化的方式，通常被用于比较点的两个或多个不同的数据集。
+
+```javascript
+new Chart(ctx).Radar(data, options)
+```
+
+- data：用于设置雷达图的数据、样式及名称。
+- options：选项，用于配置雷达图。
+
+##### e. 环形图
+
+环形图类似于饼状图，但环形图是一个空心的环形形状，通常被用于展示多组数据之间关系的比例。
+
+```javascript
+new Chart(ctx).Doughnut(data,options)
+```
+
+- data：用于设置环形图的数据、样式及名称。
+- options：选项，用于配置环形图。
+
+##### f. 极地区域图
+
+极地区域图类似于饼状图，但每一个扇形的角度和半径取决于不同的值，通常被用于需要展示类似于饼状图的比较数据的基础上，还需要展示范围值的比较。
+
+```javascript
+new Chart(ctx).PolarArea(data, options)
+```
+
+- data：用于设置极地区域图的数据、样式及名称。
+- options：选项，用于配置极地区域图。
+
+```html
+<canvas id="canvas" width="300px" height="300px"></canvas>
+<script>
+	var canvas = document.getElementById("canvas");
+	var context = canvas.getContext("2d");
+	// 初始化饼状图的数据 - 以数组格式
+	var data = [
+		{
+			// 当前数据占饼状图的比例
+			value: 30,
+			// 当前数据块的颜色
+			color:"blue",
+			// 当鼠标悬停在当前数据块时的颜色
+			highlight: "yellow",
+			// 当前数据块的提示信息
+			label: "Blue"
+		},
+		{
+			value: 50,
+			color: "#46BFBD",
+			highlight: "#5AD3D1",
+			label: "Green"
+		},
+		{
+			value: 100,
+			color: "#FDB45C",
+			highlight: "#FFC870",
+			label: "Yellow"
+		},
+		{
+			value: 40,
+			color: "#949FB1",
+			highlight: "#A8B3C5",
+			label: "Grey"
+		}
+	];
+	//Chart.defaults.global.responsive = true;
+
+	// 通过画布对象,创建Chart对象
+	var chart = new Chart(context);
+	// 利用Chart对象调用图表方法
+	chart.Pie(data);
+</script>
+```
--- a/HTML/html5/drag-and-drop.md
+++ b/HTML/html5/drag-and-drop.md
@@ -0,0 +1,138 @@
+允许用户在一个元素上点击并按住鼠标按钮，拖动它到别的位置，然后松开鼠标按钮将元素放到那儿。
+
+在拖动操作过程中，被拖动元素会以半透明形式展现，并跟随鼠标指针移动。放置元素的位置可能会在不同的应用内。
+
+## 源元素事件
+
+**所谓源元素**就是被拖动的元素。
+
+| 事件名称 | 作用 | 触发次数 |
+| --- | --- | --- |
+| dragstart事件 | 开始拖动源元素时被触发 | 只被触发一次|
+| drag事件 | 拖动的过程中，实时被触发 | 被触发多次 |
+| dragend事件 | 结束拖动源元素时被触发 | 只被触发一次 |
+
+```html
+<div id="d1">
+	<img id="img" src="Penguins.jpg" width="256">
+</div>
+<script>
+	// 获取HTML页面中的源元素<img>
+	var img = document.getElementById("img");
+	// 为源元素绑定拖动事件
+	img.addEventListener("dragstart",myDragstart);
+	img.addEventListener("drag",myDrag);
+	img.addEventListener("dragend",myDragend);
+	// 定义事件的处理函数
+	function myDragstart(event){
+		console.log("开始拖动啦...");
+	}
+	function myDrag(event){
+		console.log("拖动过程中...");
+	}
+	function myDragend(event){
+		console.log("结束拖动啦...");
+	}
+</script>
+```
+
+## 目标元素事件
+
+**所谓目标元素**就是投放到的元素。
+
+| 事件名称 | 作用 | 触发次数 |
+| --- | --- | --- |
+| dragenter事件 | 当源元素到达目标元素时被触发 | 只被触发一次|
+| dragover事件 | 当源元素到达目标元素时被触发 | 被触发多次。阻止默认行为，触发drop事件 |
+| drop事件 | 当源元素投放在目标元素时被触发 | 默认该事件不会被触发 |
+| dragleave事件 | 当源元素离开目标元素时被触发 | 只被触发一次 |
+
+```html
+<div id="d1">
+	<img id="img" src="Penguins.jpg" width="256">
+</div>
+<div id="d2"></div>
+<script>
+	// 获取目标元素
+	var d2 = document.getElementById("d2");
+	// 为目标元素绑定事件
+	d2.addEventListener("dragenter",myDragenter);
+	d2.addEventListener("dragover",myDragover);
+	d2.addEventListener("drop",myDrop);
+	d2.addEventListener("dragleave",myDragleave);
+	// 定义事件的处理函数
+	function myDragenter(event){
+		//event.preventDefault();
+		console.log("大爷,你来啦...");
+	}
+	function myDragover(event){
+		event.preventDefault();
+		console.log("大爷,又来啦...");
+	}
+	function myDrop(event){
+		//event.preventDefault();
+		console.log("大爷,别走啦...");
+	}
+	function myDragleave(event){
+		//event.preventDefault();
+		console.log("大爷,要走啦...");
+	}
+</script>
+```
+
+## dataTransfer对象
+
+该对象已被集成在 `event` 对象中，起到剪切板的功能。
+
+| 方法名称 | 作用 | 场景 |
+| --- | --- | --- |
+| setData(type,data) | 存储数据 | 在源元素事件中 |
+| getData(type) | 取出数据 | 在目标元素事件中 |
+| clearData() | 清除剪切板中所有数据 | |
+
+参数：
+		
+- type：指定当前存储数据的类型(标识)。
+- data：需要中转的数据内容。
+
+```html
+<div id="d1">
+	<img id="img" src="Penguins.jpg" width="256">
+</div>
+<div id="d2"></div>
+<script>
+	// 1. 获取源元素和目标元素
+	var img = document.getElementById("img");
+	var d2 = document.getElementById("d2");
+	/*
+	   2. 为源元素和目标元素绑定事件
+	   * 绑定源元素事件的目的:
+	     * 通过dataTransfer对象获取源元素的关键数据
+		 * 只需绑定dragstart事件即可
+	   * 绑定目标元素事件的目的:
+	     * 通过dataTransfer对象使用源元素的关键数据
+		 * 需要绑定dragover和drop事件
+	 */
+	img.addEventListener("dragstart",function(event){
+		// 通过dataTransfer对象,存储源元素的关键数据
+		event.dataTransfer.setData("text",img.src);
+	});
+	d2.addEventListener("dragover",function(event){
+		event.preventDefault();
+	});
+	d2.addEventListener("drop",function(event){
+		// 通过dataTransfer对象,使用源元素的关键数据
+		var src = event.dataTransfer.getData("text");
+		
+		//d2.innerHTML = "<img src='"+src+"' width='256'>";
+
+		var newImg = document.createElement("img");
+		newImg.src = src;
+		newImg.width = "256";
+		newImg.id = "newImg";
+		d2.appendChild(newImg);
+
+		img.parentNode.removeChild(img);
+	});
+</script>
+```
--- a/HTML/html5/html5-form.md
+++ b/HTML/html5/html5-form.md
@@ -0,0 +1,494 @@
+## Input 新类型
+
+| 类型 | 描述 | 说明 | 
+| ---- | ---- | --- |
+| email | 邮箱类型 | 判断当前字符串中是否包含`@`符号 |
+| search | 搜索类型 | 
+| url | 网址类型 | 判断当前字符串中是否包含`http://` |
+| number | 数字类型 | 
+| tel | 电话号码类型 | 只在移动端浏览器有效 |
+| range | 范围类型 | 适用于应该包含某个范围内数值的输入字段 |
+| color | 颜色类型 | 
+| date | 日期类型 | 按照 `ISO 8601` 编码的日期（包括年，月，日） |
+| month | 月份类型 | 由 `ISO 8601` 编码的年和月组成的日期 |
+| week | 星期类型 | 由 `ISO 8601` 编码的年和星期数组成的日期 | 
+
+下述示例代码使用了 HTML5 提供的表单 2.0 中的 `input` 类型：
+
+```html
+<form>
+	Email:<input type="email"><br>
+	搜索:<input type="search"><br>
+	URL地址:<input type="url"><br>
+	电话号码:<input type="tel"><br>
+	数字类型:<input type="number" min="18" max="50" step="2"><br>
+	范围类型:<input type="range" min="0" max="10" step="2" value="10"><br>
+	颜色类型:<input type="color"><br>
+	日期类型:<input type="date"><br>
+	<input type="submit">
+</form>
+```
+
+### email类型
+
+`email` 类型是专门用于输入 `email` 地址的文本框。
+
+如果输入内容不是 `email` 地址，则不允许提交，并提示错误信息。效果如下图所示：
+
+![](01.png)
+
+根据上图效果，总结 `email` 类型的规则是：提交表单时，检查 `email` 类型的文本框中是否包含 `@` 符号。
+
+> **值得注意的是：** `email` 类型的文本框并不能检查 `email` 地址是否真实存在。
+
+```html
+<input type="email" />
+```
+
+
+### url类型
+
+`url` 类型是专门用于输入 `url` 地址的文本框。
+
+如果输入内容不是 `url` 地址，则不允许提交，并提示错误信息。效果如下图所示：
+
+![](02.png)
+
+根据上图效果，总结 `url` 类型的规则是：提交表单时，检查 `url` 类型的文本框中是否包含 `http://` 符号。
+
+```html
+<input type="url" />
+```
+
+### search类型
+
+`search` 类型是专门用于输入搜索关键词的文本框。
+
+在移动设备中，当 `search` 类型的元素获取焦点时，键盘的“前往”会改为“搜索”字样。效果如下图所示：
+
+* iPhone设备：
+
+![](03.jpg)
+
+* Android设备：
+
+![](04.jpg)
+
+> **值得注意的是：**在`PC`端浏览器 `search` 类型与 `text` 类型外观相同。
+
+```html
+<input type="search" />
+```
+
+### tel类型
+
+`tel` 类型是专门用于输入电话号码的文本框。
+
+在移动设备中，当 `tel` 类型的元素获取焦点时，键盘使用数字面板。效果如下图所示：
+
+* iPhone设备：
+
+![](05.jpg)
+
+* Android设备：
+
+![](06.jpg)
+
+> **值得注意的是：**该元素没有特殊的校验规则，不强制输入数字。
+
+```html
+<input type="tel" />
+```
+
+### number类型
+
+`number` 类型是专门用于输入数字的文本框。
+
+如果输入内容不是数字，则不允许提交，并提示错误信息。效果如下图所示：
+
+![](07.png)
+
+根据上图效果，总结 `number` 类型的规则是：提交表单时，检查 `number` 类型的文本框中是否为数字。
+
+| 属性名称 | 类型 | 描述 |
+| --- | --- | --- |
+| min | Number | 允许输入的最小数值。 |
+| max | Number | 允许输入的最大数值。 |
+| step | Number | 设置增加或减少的间隔。（步长）|
+
+```html
+<input type="number" min="0" max="100" step="5" />
+```
+
+### date类型
+
+`date` 类型是专门用于输入日期，提供日期选择控件。
+
+当用户单击向下箭头按钮时浏览器页面中显示日历。效果如下图所示：
+
+![](08.jpg)
+
+```html
+<input type="date" />
+```
+
+### range类型
+
+`range` 类型是专门用于输入一定范围内数字值。
+
+`range` 类型在HTML页面显示为滑动条。效果如下图所示：
+
+![](09.png)
+
+| 属性名称 | 类型 | 描述 |
+| --- | --- | --- |
+| min | Number | 允许输入的最小数值。 |
+| max | Number | 允许输入的最大数值。 |
+| step | Number | 设置增加或减少的间隔。（步长）| 
+| value | Number | 设置滑动条的当前值。 |
+
+```html
+<input type="range" min="0" max="100" step="5" value="50" />
+```
+
+### color类型
+
+`color` 类型是专门用于选取颜色。
+
+`color` 类型提供了一个颜色选取器。效果如下图所示：
+
+* 显示效果：
+
+![](10.jpg)
+
+* 颜色选取器：
+
+![](11.jpg)
+
+color 类型的显示效果，当用户单击 color 类型弹出显示颜色选取器。
+
+```html
+<input type="color" />
+```
+
+### 练习：自定义调色器
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>自定义调色器</title>
+    <style>
+        body {
+            padding-left: 100px;
+            padding-top: 100px;
+        }
+        .show {
+            width: 300px;
+            height: 300px;
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <div class="show"></div>
+    <br><br>
+    红:<input onchange="mychange()" id="red" min="0" max="255" step="1" value="255" type="range"><br>
+    绿:<input onchange="mychange()" id="green" min="0" max="255" step="1" value="255" type="range"><br>
+    蓝:<input onchange="mychange()" id="blue" min="0" max="255" step="1" value="255" type="range">
+    <script>
+        function mychange(){
+            var red = document.getElementById("red").value;
+            var green = document.getElementById("green").value;
+            var blue = document.getElementById("blue").value;
+            var show = document.getElementsByTagName("div")[0];
+            show.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
+        }
+    </script>
+</body>
+</html>
+```
+
+## 表单新元素
+
+| 元素名称 | 描述 |
+| ------ | ---- |
+| `<datalist>` | `<input>`标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 |
+| `<progress>` | `<progress>` 标签定义运行中的任务进度（进程） |
+| `<meter>` | `<meter>` 标签定义度量衡。仅用于已知最大和最小值的度量 |
+| `<output>` | `<output>` 标签定义不同类型的输出，比如脚本的输出 |
+
+### datalist元素
+
+`<datalist>` 元素规定输入域的选项列表。
+
+`<datalist>` 属性规定 `form` 或 `input` 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
+
+使用 `<input>` 元素的列表属性与 `<datalist>` 元素绑定：
+
+```html
+<input list="browsers">
+
+<datalist id="browsers">
+  <option value="Internet Explorer">
+  <option value="Firefox">
+  <option value="Chrome">
+  <option value="Opera">
+  <option value="Safari">
+</datalist>
+```
+
+### progress元素
+
+`<progress>` 标签表示进度条，用于显示一个任务的完成进度。
+
+**属性：**
+
+| 属性 | 值 | 描述 |
+| --- | --- | --- |
+| max | number | 规定需要完成的值 |
+| value | number | 规定进程的当前值 |
+
+> **提示：**请将 `<progress>` 标签与 JavaScript 一起使用来显示任务的进度。
+> 
+> **值得注意的是：**`<progress>` 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 `<meter>` 标签代替。
+
+```html
+<progress id="progress" max="100" value="0"></progress>
+<script>
+    var progress = document.getElementById("progress");
+    var max = progress.max;
+    var t = setInterval(function(){
+        var v = progress.value;
+        if(v == max){
+            clearInterval(t);
+        }else{
+            v++;
+            progress.value = v;
+        }
+    },100);
+</script>
+```
+
+### meter元素
+
+`<meter>` 标签定义度量衡。仅用于已知最大和最小值的度量。
+
+比如：磁盘使用情况，查询结果的相关性等。
+
+**属性：**
+
+| 属性 | 值 | 描述 |
+| --- | --- | --- |
+| high | number | 规定被界定为高的值的范围 |
+| low | number | 规定被界定为低的值的范围 |
+| max | number | 规定范围的最大值 |
+| min | number | 规定范围的最小值 |
+| value | number | 必需。规定度量的当前值 |
+
+**值得注意的是：**`<meter>` 不能作为一个进度条来使用， 进度条 `<progress>` 标签。
+
+```html
+<meter min="0" max="100" value="95" low="10" high="90"></meter>
+```
+
+### output元素
+
+`<output>` 元素用于不同类型的输出，比如计算或脚本输出：
+
+```html
+<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
+	<input type="range" id="a" value="50">100 +
+	<input type="number" id="b" value="50">=
+	<output name="x" for="a b"></output>
+</form>
+```
+
+## 表单新属性
+
+### placeholder属性
+
+`placeholder` 属性提供一种提示（hint），描述输入域所期待的值。
+
+简短的提示在用户输入值前会显示在输入域上。
+
+> **值得注意的是：**placeholder 属性适用于以下类型的 `<input>` 标签：`text`, `search`, `url`, `telephone`, `email` 以及 `password`。
+
+```html
+<input type="text" name="fname" placeholder="First name">
+```
+
+### autofocus属性
+
+`autofocus` 属性是一个 `boolean` 属性。
+
+`autofocus` 属性规定在页面加载时，域自动地获得焦点。
+
+```html
+First name:<input type="text" name="fname" autofocus>
+```
+
+### multiple属性
+
+`multiple` 属性是一个 `boolean` 属性。
+
+`multiple` 属性规定`<input>` 元素中可选择多个值。
+
+> **值得注意的是：**`multiple` 属性适用于以下类型的 `<input>` 标签：`email` 和 `file`。
+
+```html
+Email: <input type="email" multiple>
+```
+
+### form属性
+
+`form` 属性规定输入域所属的一个或多个表单。
+
+> **值得注意的是：**如需引用一个以上的表单，请使用空格分隔的列表。
+
+位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)：
+
+```html
+<form action="demo-form.php" id="form1">
+  First name: <input type="text" name="fname"><br>
+  <input type="submit" value="Submit">
+</form>
+
+Last name: <input type="text" name="lname" form="form1">
+```
+
+## 表单验证
+
+### 1. 验证属性
+
+| 属性名称 | 描述 |
+| --- | --- |
+| required | 验证不为空 |
+| pattern | 匹配正则表达式 |
+| min和max | 验证最小值和最大值 |
+| minlength和maxlength | 验证最小长度和最大长度 |
+| validity | 获取validityState对象 |
+
+#### required属性
+
+`required` 属性规定必须在提交之前填写输入域（不能为空）。
+
+> **值得注意的是：**required 属性适用于以下类型的 `<input>` 标签：`text`, `search`, `url`, `telephone`, `email`, `password`, `date pickers`, `number`, `checkbox`, `radio` 以及 `file`。
+
+```html
+Username: <input type="text" name="usrname" required>
+```
+
+#### pattern属性
+
+`pattern` 属性的值与指定的正则表达式进行匹配（一般用于验证特定格式）。
+
+> **值得注意的是：**`pattern` 属性适用于以下类型的 `<input>` 标签: `text`, `search`, `url`, `tel`, `email`, 和 `password`。
+
+```html
+Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
+```
+
+#### min和max属性
+
+`min`、`max` 和 `step` 属性用于为包含数字或日期的 input 类型规定限定（约束）。
+
+> **值得注意的是：**`min`、`max` 和 `step` 属性适用于以下类型的 `<input>` 标签：`date pickers`、`number` 以及 `range`。
+
+```html
+Enter a date before 1980-01-01:
+<input type="date" name="bday" max="1979-12-31">
+
+Enter a date after 2000-01-01:
+<input type="date" name="bday" min="2000-01-02">
+
+Quantity (between 1 and 5):
+<input type="number" name="quantity" min="1" max="5">
+```
+
+#### maxlength属性
+
+`maxlength` 属性用于设定允许输入的最大字符个数。
+
+> **值得注意的是：**`maxlength` 属性应该叫做限制属性。
+
+### 有效状态
+
+ValidityState 代表了一个元素可以处于的与约束验证相关的有效性状态。
+
+| 名称 | 类型 | 描述 |
+| ---- | --- | ---- |
+| valid | Boolean | 其他的约束验证条件都不为 `true` | 
+| valueMissing | Boolean | 该元素有 `required` 属性,但却没有值 |
+| typeMismatch | Boolean | 该元素的值不符合元素类型所要求的格式(当 `type` 是 `email` 或者 `url` 时) |
+| patternMismatch | Boolean | 该元素的值与指定的 `pattern` 属性不匹配 |
+| stepMismatch | Boolean | 该元素的值不符合由 `step` 属性指定的规则 |
+| rangeUnderflow | Boolean | 该元素的值小于指定的 `min` 属性 |
+| tooLong | Boolean | 该元素的值的长度超过了 `HTMLInputElement` 或者 `HTMLTextAreaElement` 对象指定的 `maxlength` 属性中的值 |
+| rangeOverflow | Boolean | 该元素的值大于指定的 `max` 属性 |
+| customError | Boolean | 该元素的自定义有效性消息已经通过调用元素的`setCustomValidity()` 方法设置成为一个非空字符串 |
+
+```html
+<form>
+	用户名:<input id="user" type="text" required><br>
+	密码:<input id="pwd" type="text" pattern="^[0-9]{6,8}$"><br>
+	Email:<input id="mail" type="email"><br>
+	年龄:<input id="age" step="5" type="number" min="20"><br>
+	<input type="submit">
+</form>
+<script>
+	 var user = document.getElementById("user");
+	 user.onblur = function(){
+		if(user.validity.valid){
+			alert("验证通过.");
+		}else if(user.validity.valueMissing){
+			alert("用户名为空.");
+		}
+	 }
+	 var pwd = document.getElementById("pwd");
+	 pwd.onblur = function(){
+		if(pwd.validity.valid){
+			alert("验证通过.");
+		}else if(pwd.validity.patternMismatch){
+			alert("密码输入有误.");
+		}
+	 }
+	 var mail = document.getElementById("mail");
+	 mail.onblur = function(){
+		if(mail.validity.valid){
+			alert("验证通过.");
+		}else if(mail.validity.typeMismatch){
+			alert("Email输入有误.");
+		}
+	 }
+	 var age = document.getElementById("age");
+	 age.onblur = function(){
+		if(age.validity.valid){
+			alert("验证通过.");
+		}else if(age.validity.rangeUnderflow){
+			alert("年龄过小.");
+		}else if(age.validity.stepMismatch){
+			alert("年龄有误.");
+		}
+	 }
+</script>
+```
+
+### setCustomValidity() 方法
+
+`setCustomValidity()` 方法设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。
+
+```html
+<form>
+	<input id="data" type="text" required>
+	<input type="submit">
+</form>
+<script>
+	var data = document.getElementById("data");
+	data.onblur = function(){
+		if(data.validity.valueMissing){
+			data.setCustomValidity("不能为空.");
+		}else if(data.validity.customError){
+			data.setCustomValidity("");
+		}
--- a/HTML/html5/html5-introduce.md
+++ b/HTML/html5/html5-introduce.md
@@ -0,0 +1,31 @@
+## HTML5 简介
+
+HTML5 是 HTML 标准的下一个重要版本，用来替代 HTML 4.01，XHTML 1.0 以及 XHTML 1.1。HTML5 也是一种在万维网上构建和呈现内容的标准。
+
+HTML5 是万维网联盟（W3C）和网页超文本技术工作小组（WHATWG）合作的产物。
+
+HTML5 是近十年来 Web 开发标准最巨大的飞跃。HTML5 并非仅仅用来表示 Web 内容，它将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。
+
+### HTML5 引入了许多新元素和属性帮助我们构建现代化的网站。下面是 HTML5 引入的主要特性:
+
+- 新的语义化元素： 比如 `<header>`，`<footer>` 和 `<section>`。
+- 表单 2.0： 改进了 HTML Web 表单，为 `<input>` 标签引入了一些新的属性。
+- 持久的本地存储： 为了不通过第三方插件实现。
+- WebSocket： 用于 Web 应用程序的下一代双向通信技术。
+- 服务器推送事件： HTML5 引入了从 Web 服务器到 Web 浏览器的事件，也被称作服务器推送事件（SSE）。
+- Canvas： 支持用 JavaScript 以编程的方式进行二维绘图。
+- 音频和视频： 在网页中嵌入音频或视频而无需借助第三方插件。
+- 地理定位： 用户可以选择与我们的网页共享他们的地理位置。
+- 拖放： 把同一网页上的条目从一个位置拖放到另一个位置。
+
+### HTML5 浏览器支持：
+
+最新版 Apple Safari，Mozilla FireFox 和 Opera 支持大部分 HTML5 新特性，IE9 也支持一些 HTML5 的新功能。
+
+预装在 iPhones，iPads 和 Android 手机上的手机浏览器都对 HTML5 有良好的支持。
+
+> **值得注意的是：** IE 8及之前版本浏览器基本不支持 HTML5 新特性。
+
+## HTML5 参考网站
+
+[https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
--- a/HTML/html5/html5-svg.md
+++ b/HTML/html5/html5-svg.md
@@ -0,0 +1,651 @@
+## 基础内容
+
+### 1. 什么是 SVG
+
+SVG 全称为 Scalable Vector Graphics，译为可缩放矢量图形,简称矢量图。是一种用来描述二维矢量图形的 XML 标记语言。
+
+### 2. SVG与Flash的区别
+
+| | SVG | Flash |
+| --- | --- | --- |
+| 相同点 | 用于二维矢量图形 | 用于二维矢量图形 |
+| 不同点 | 是一个开放的W3C标准，基于XML | 封闭的基于二进制格式的 |
+
+### 3. SVG与Canvas的区别
+
+| SVG | Canvas |
+| --- | --- |
+| 不依赖于分辨率 | 依赖于分辨率 |
+| 使用DOM及事件处理器（DOM专门为SVG开放接口）|不能使用DOM及事件处理器|
+| 不能实现游戏开发 | 可以实现游戏开发 |
+| 实现大型渲染区域的应用(例如百度地图) | 是以图片(png|jpg)存在 |
+
+### 4. SVG的优势
+
+- 不需要专门的编辑器,文本编辑器都可以
+- 可被搜索、索引、脚本化及压缩
+- 图像不失真(和分辨率无关)
+
+**值得注意的是：**
+
+- SVG技术并不是专属于HTML5的
+- SVG技术本身是一套独立的用于描述二维图形
+- HTML5版本之前,以图片形式进行引入
+- HTML5版本之后,允许在HTML页面直接使用SVG技术
+
+**可参考的资源：**
+
+- SVG 标准：[http://www.w3.org/Graphics/SVG/](http://www.w3.org/Graphics/SVG/)
+- SVG 教程：[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial)
+
+### 5. 如何使用 SVG
+
+#### 1）SVG 文件（了解）
+
+SVG 文件的扩展名为 “.svg”，使用的是 XML 技术的语法内容，并且可以在浏览器中直接运行。
+
+```xml
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- SVG的语法标准(必要的) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- xmlns="http://www.w3.org/2000/svg" SVG的命名空间 -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<rect x="100" y="100" width="300" height="100" fill="blue" stroke="black" stroke-width="4"/>
+</svg>
+```
+
+也可以在 HTML 页面引入 SVG 文件。
+
+```html
+<img src="01_SvgFile.svg" width="800" height="500">
+```
+
+#### 2）HTML 直接定义 SVG
+
+HTML5 的新特性允许在 HTML 页面中直接定义 SVG 元素（需要学习有关SVG的一些HTML新元素）。
+
+**`<svg>`元素：**
+
+| | `<svg>`元素 |
+| --- | --- |
+| 作用 | 类似于canvas元素 |
+| 特点 | 默认的宽度和高度分别为300px和150px，不具有任何的样式(默认情况下不显示) |
+| 目的 | 表示当前使用SVG语法内容 |
+
+**`<svg>`元素的属性：**
+
+| 属性名称 | 描述 |
+| --- | --- |
+| width | 设置 `<svg>` 元素的宽度 |
+| height | 设置 `<svg>` 元素的高度 |
+| style | 设置 `<svg>` 元素的样式 |
+
+```html
+<svg width="500" height="300" style="background:pink;">
+	<rect x="100" y="100" width="300" height="100" fill="blue" stroke="black" stroke-width="4"/>
+</svg>
+```
+
+## 图像元素
+
+### 1. 样式
+
+| 属性名称 | 描述 |
+| --- | --- |
+| fill | 设置填充样式 |
+| stroke | 设置描边样式 |
+| stroke-width | 设置描边宽度 |
+
+### 2. 矩形
+
+```html
+<rect x="" y="" rx="" ry="" width="" height="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| x和y | 表示绘制矩形的左上角坐标值 |
+| width | 表示绘制矩形的宽度 |
+| height | 表示绘制矩形的高度 |
+| rx和ry | 表示绘制矩形的四个角的水平圆角和垂直圆角（如果rx和ry的值分别为width/2和height/2,绘制圆形）|
+
+> **值得注意的是：**
+> 
+> - 默认绘制出来的效果：实心矩形效果。
+> - 可以实现"空心"的效果：不能实现空心效果。
+
+```html
+<svg width="1000" height="600" style="background:pink;">
+	<!-- 绘制矩形 -->
+	<rect x="10" y="10" width="100" height="100" />
+	<rect x="10" y="120" width="100" height="100" fill="white" stroke="black" />
+	<rect x="10" y="230" width="100" height="100" rx="10" ry="10" />
+	<rect x="10" y="340" width="100" height="100" rx="50" ry="50" style="fill:white;stroke:black;" />
+</svg>
+```
+
+### 3. 圆形
+
+```html
+<cirlcle cx="" cy="" r="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| cx和cy | 表示绘制圆形的圆心坐标值 |
+| r | 表示绘制圆形的半径 |
+
+```html
+<svg width="1000" height="600" style="background:pink;">
+	<!-- 绘制圆形 -->
+	<circle cx="170" cy="60" r="50" />
+	<circle cx="170" cy="170" r="50" fill="white" stroke="black" />
+</svg>
+```
+
+### 4. 椭圆
+
+```html
+<ellipse cx="" cy="" rx="" ry="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| cx和cy | 表示绘制椭圆的圆心坐标值 |
+| rx | 表示绘制椭圆的水平方向半径 |
+| ry | 表示绘制椭圆的垂直方向半径 |
+
+```html
+<svg width="1000" height="600" style="background:pink;">
+	<!-- 绘制椭圆 -->
+	<ellipse cx="280" cy="70" rx="50" ry="60" />
+	<ellipse cx="280" cy="190" rx="50" ry="50" />
+	<ellipse cx="280" cy="300" rx="50" ry="30" />
+</svg>
+```
+
+### 5. 线条
+
+```html
+<line x1="" y1="" x2="" y2="" stroke="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| x1和y1 | 表示绘制直线的起点坐标值 |
+| x2和y2 | 表示绘制直线的终点坐标值 |
+| stroke | 设置绘制直线的样式(颜色) |
+| stroke-width | 设置绘制直线的宽度 |
+
+```html
+<svg width="1000" height="600" style="background:pink;">
+	<!-- 绘制直线 -->
+	<line x1="350" y1="10" x2="500" y2="200" stroke="black" stroke-width="10" />
+</svg>
+```
+
+### 6. 折线
+
+```html
+<polyline points="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| points | 表示绘制折线的起点、折点及终点坐标值（格式：x1,y1 x2,y2 x3,y3 xn,yn） |
+| stroke | 设置折线的颜色 |
+| stroke-width | 设置折线的线宽 |
+| fill | 设置与`<svg>`元素的背景色相同 |
+
+```html
+<svg width="1000" height="600" style="background:pink;">
+	<!-- 绘制折线 -->
+	<polyline points="520,20 520,200" stroke="black" stroke-width="10" />
+	<polyline points="550,20 550,200 700,200 700,20 540,20" stroke="black" stroke-width="20" fill="pink" />
+</svg>
+```
+
+### 7. 多边形
+
+```html
+<polygon points="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| points | 表示绘制多边形的所有点坐标值 |
+
+```html
+<svg width="1000" height="600" style="background:pink;">
+	<!-- 绘制多边形 -->
+	<polygon points="550,300 550,500 800,500" stroke="black" fill="pink" stroke-width="10" />
+</svg>
+```
+
+> **值得注意的是：**
+>
+> - 一个HTML页面允许包含多个`<svg>`元素
+> - 一个`<svg>`元素允许包含多个图形元素
+> - SVG的图形元素基本都是起始元素
+> - 定义图形元素时,只定义开始元素,没有结束元素
+>   - 浏览器在运行页面时,并不报错
+>   - 浏览器解析这段元素代码时,自动补全结束元素
+>   - 自动补全的结束元素是不正确的
+
+### 8. 渐变
+
+#### 1）线性渐变
+
+```html
+<linearGradient id="" x1="" y1="" x2="" y2=""></linearGradient>
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| id | 标识，便于其他元素进行引用 |
+| x1和y1 | 表示基准线的起点坐标值（值范围为 0-1, 是百分值 0%-100%） |
+| x2和y2 | 表示基准线的终点坐标值（值范围为 0-1, 是百分值 0%-100%） |
+
+```html
+<stop offset="" stop-color=""/>
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| offset | 表示设置渐变颜色的位置 |
+| stop-color | 表示设置的渐变颜色 |
+| stop-opacity | 表示设置渐变颜色的透明度 |
+
+```html
+<svg width="800" height="500">
+	<defs>
+		<linearGradient id="grd" x1="0" y1="0" x2="1" y2="1">
+			<stop offset="0" stop-color="red" stop-opacity="0.5" />
+			<stop offset="0.5" stop-color="green" stop-opacity="0.5" />
+			<stop offset="1" stop-color="blue" stop-opacity="0.5" />
+		</linearGradient>
+	</defs>
+	<rect x="0" y="0" width="200" height="200" fill="url(#grd)" />
+	<circle cx="400" cy="400" r="100" fill="url(#grd)" />
+</svg>
+```
+
+#### 2）射线渐变
+
+```html
+<radialGradient id="" cx="" cy="" r="" fx="" fy=""></radialGradient>
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| id | 标识，便于其他元素进行引用 |
+| cx和cy | 表示基准线中的中心点坐标值（值范围为 0-1, 是百分值 0%-100%） |
+| fx和fy | 表示基准线中的焦点坐标值（值范围为 0-1, 是百分值 0%-100%） |
+| r | 设置其边缘位置（值范围为 0-1, 是百分值 0%-100%） |
+
+```html
+<stop offset="" stop-color=""/>
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| offset | 表示设置渐变颜色的位置 |
+| stop-color | 表示设置的渐变颜色 |
+| stop-opacity | 表示设置渐变颜色的透明度 |
+
+```html
+<svg width="800" height="500">
+	<defs>
+		<radialGradient id="grd1">
+			<stop offset="0" stop-color="red" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd2" cx="0" cy="0">
+			<stop offset="0" stop-color="red" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd3" r="1">
+			<stop offset="0" stop-color="red" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd4" fx="1" fy="1">
+			<stop offset="0" stop-color="red" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd5">
+			<stop offset="0" stop-color="red" />
+			<stop offset="0.5" stop-color="yellow" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd6" cx="0" cy="0">
+			<stop offset="0" stop-color="red" />
+			<stop offset="0.5" stop-color="yellow" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd7" r="1">
+			<stop offset="0" stop-color="red" />
+			<stop offset="0.5" stop-color="yellow" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+		<radialGradient id="grd8" fx="1" fy="1">
+			<stop offset="0" stop-color="red" />
+			<stop offset="0.5" stop-color="yellow" />
+			<stop offset="1" stop-color="blue" />
+		</radialGradient>
+	</defs>
+	<rect x="0" y="0" width="200" height="200" fill="url(#grd1)" />
+	<rect x="210" y="0" width="200" height="200" fill="url(#grd2)" />
+	<rect x="420" y="0" width="200" height="200" fill="url(#grd3)" />
+	<rect x="630" y="0" width="200" height="200" fill="url(#grd4)" />
+	<rect x="0" y="210" width="200" height="200" fill="url(#grd5)" />
+	<rect x="210" y="210" width="200" height="200" fill="url(#grd6)" />
+	<rect x="420" y="210" width="200" height="200" fill="url(#grd7)" />
+	<rect x="630" y="210" width="200" height="200" fill="url(#grd8)" />
+</svg>
+```
+
+> **值得注意的是：**
+> 
+> - 渐变元素需要定义id属性,便于其他元素进行引用
+> - 渐变元素定义在<defs>元素内
+>   - <defs>元素内定义：表示该元素允许重复使用
+
+### 9. 滤镜
+
+```html
+<filter id="myfilter"></filter>
+```
+
+**值得注意的是：**该元素只是滤镜的容器。
+
+#### 高斯模糊
+
+```html
+<feGaussianBlur in="" stdDeviation="" />
+```
+
+| 属性名称 | 描述 |
+| --- | --- |
+| in | 设置高斯模糊的样式 |
+| stdDeviation | 设置模糊的程度 |
+
+```html
+<svg width="800" height="500">
+	<defs>
+		<filter id="myfilter">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+		</filter>
+	</defs>
+	<rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" />
+</svg>
+```
+
+## Two.js库
+
+### 1. 基础内容
+
+Two.js支持不同的上下文环境：
+
+- SVG（默认）
+- Canvas
+- WebGL
+
+官网地址：[http://jonobr1.github.io/two.js/](http://jonobr1.github.io/two.js/)
+
+#### 如何使用 Two.js
+
+##### 1）HTML 页面
+
+* 引入Two.js库文件
+* 定义容器元素 `<div></div>`
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>如何使用Two.js库</title>
+  <!-- 1. 引入Two.js库文件 -->
+  <script src="two.js"></script>
+ </head>
+ <body>
+  <!-- 
+		2. 定义用于显示矢量图的容器元素
+		* <div></div>元素 - 建议使用
+  -->
+  <div id="d1"></div>
+ </body>
+</html>
+```
+
+##### 2）JavaScript逻辑
+
+* 获取HTML页面的容器元素
+* 通过 Two.js 库提供的 Two() 构造函数创建 Two 对象
+
+```javascript
+var params = {// 创建svg时初始化的数据
+	width : 宽度,
+	height : 高度
+}
+var two = new Two(params);
+```
+
+* 将创建的 Two 对象添加到 HTML 页面容器元素内
+
+```javascript
+two.appendTo(elem);
+```
+
+* 使用 Two.js 库提供的 API 方法绘制图形
+* 调用 update() 方法进行绘制
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>如何使用Two.js库</title>
+  <!-- 1. 引入Two.js库文件 -->
+  <script src="two.js"></script>
+ </head>
+ <body>
+  <!-- 
+		2. 定义用于显示矢量图的容器元素
+		* <div></div>元素 - 建议使用
+  -->
+  <div id="d1"></div>
+  <script>
+	// 3. 获取HTML页面的容器元素
+	var elem = document.getElementById("d1");
+	/*
+	   4. 通过Two(params)构造函数来创建Two对象
+	   * params - 创建Two对象的初始化数据
+	     * Object类型,{ key : value }格式
+	 */ 
+	var params = { 
+		type : Two.Types.canvas,
+		width : 285,	// 默认为640px
+		height : 200 // 默认为480px
+	};
+	var two = new Two(params);
+	/*
+	   5. 将创建的Two对象添加到页面容器元素中
+	   * Two.js库提供了appendTo()方法向容器添加Two对象
+	   * 注意 - appendTo()方法并不是jQuery的
+	 */
+	two.appendTo(elem);
+	// 6. 通过调用Two对象提供的API方法进行绘制
+	var circle = two.makeCircle(72, 100, 50);
+	var rect = two.makeRectangle(213, 100, 100, 100);
+	// 7. 调用update()方法进行绘制
+	two.update();
+  </script>
+ </body>
+</html>
+```
+
+### 2. 绘制图像
+
+#### 1）绘制图像的方法
+
+| 图像形状 | 方法 |
+| --- | --- |
+| 圆形 | `makeCircle(x, y, radius)` |
+| 直线 | `makeLine(x1, y1, x2, y2)` |
+| 矩形 | `makeRectangle(x, y, width, height)` |
+| 圆角矩形 | `makeRoundedRectangle(x, y, width, height, radius)` |
+| 椭圆 | `makeEllipse(x, y, width, height)` |
+| 多边形 | `makePolygon(ox, oy, r, sides)` |
+| 路径 | `makePath(x1, y1, x2, y2, xN, yN, open)` |
+| 星形 | `makeStar(ox, oy, or, ir, sides)` |
+
+#### 2）绘制图像的属性
+
+| 属性名称 | 描述 |
+| --- | --- |
+| fill | 设置填充样式 |
+| stroke | 设置描边样式 |
+| linewidth | 设置线条宽度 |
+| opacity | 设置透明度 |
+| cap | 设置线条端点形状，默认为`round` |
+| join | 设置线条交点形状，默认为`round` |
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>如何使用Two.js库</title>
+  <script src="two.js"></script>
+ </head>
+ <body>
+  <div id="d1"></div>
+  <script>
+	var elem = document.getElementById("d1");
+
+	var params = { 
+		type : Two.Types.canvas,
+		width : 285,	// 默认为640px
+		height : 200 // 默认为480px
+	};
+	var two = new Two(params);
+
+	two.appendTo(elem);
+
+	var circle = two.makeCircle(72, 100, 50);
+	var rect = two.makeRectangle(213, 100, 100, 100);
+	// 设置绘制的圆形和矩形的样式
+	circle.fill = '#FF8000';
+	circle.stroke = 'orangered';
+	circle.linewidth = 5;
+
+	rect.fill = 'rgb(0, 200, 255)';
+	rect.opacity = 0.75;
+	rect.noStroke();// 设置矩形没有描边
+
+	two.update();
+  </script>
+ </body>
+</html>
+```
+
+### 3. 图像分组
+
+调用 Two 对象的 makeGroup() 方法对图像进行分组操作。
+
+- makeGroup() 方法任意图形对象作为参数
+- makeGroup() 方法返回分组对象
+
+> **值得注意的是：**在统一对一组图像设置后,针对不同图像进行个性化设置。
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>Two.js库进行图形分组</title>
+  <script src="two.js"></script>
+ </head>
+ <body>
+  <div id="d1"></div>
+  <script>
+	var elem = document.getElementById("d1");
+	var two = new Two({
+		width : 285,
+		height : 200
+	}).appendTo(elem);
+
+	var circle = two.makeCircle(72, 100, 50);
+	var rect = two.makeRectangle(213, 100, 100, 100);
+
+	var group = two.makeGroup(circle,rect);
+
+	group.fill = 'rgb(0, 200, 255)';
+	group.opacity = 0.75;
+	group.noStroke();// 设置矩形没有描边
+
+	// 针对不同的图形进行个性化样式设置
+	circle.stroke = 'orangered';
+	circle.linewidth = 5;
+
+	two.update();
+  </script>
+ </body>
+</html>
+```
+
+### 4. 动画效果（了解）
+
+| 方法名称 | 描述 |
+| --- | --- |
+| play() | 提供一组循环动画 |
+| pause() | 提供中止动画效果 |
+| update() | 提供更新当前绘制或设置 |
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>Two.js库实现动画效果</title>
+  <script src="two.js"></script>
+ </head>
+ <body>
+  <div id="d1"></div>
+  <script>
+	var elem = document.getElementById("d1");
+	var two = new Two({
+		width : 285,
+		height : 200
+	}).appendTo(elem);
+	// 设置圆形和矩形
+	var circle = two.makeCircle(-70, 0, 50);
+	var rect = two.makeRectangle(70, 0, 100, 100);
+	// 设置圆形和矩形的样式
+	circle.fill = '#FF8000';
+	rect.fill = 'rgba(0, 200, 255, 0.75)';
+	// 将圆形和矩形分为一组
+	var group = two.makeGroup(circle, rect);
+	// 针对这一组进行样式设置
+	group.translation.set(two.width / 2, two.height / 2);// 将"画布"平移水平和垂直一半距离
+	group.scale = 0;// 将圆形和矩形缩放为 0(不显示)
+	group.noStroke();// 设置圆形和矩形没有边框
+
+	// Two对象绑定update事件(方法)
+	two.bind('update', function(frameCount) {
+	  // 判断如果缩放为原大小,将缩放和旋转设置为 0
+	  if (group.scale > 0.9999) {
+		group.scale = group.rotation = 0;
+	  }
+	  // 每次执行的增量
+	  var t = (1 - group.scale) * 0.125;
+	  // 每次执行后缩放值进行累加
+	  group.scale += t;
+	  // 每次执行后旋转至进行累加
+	  group.rotation += t * 4 * Math.PI;
+	}).play();// 开始无限循环动画
+  </script>
+ </body>
+</html>
+```
--- a/HTML/html5/video-and-audio.md
+++ b/HTML/html5/video-and-audio.md
@@ -0,0 +1,278 @@
+## 视频处理
+
+### 基础内容
+
+#### a. 目前实现网页视频播放的技术 - Flash
+
+- Flash并不是浏览器原生支持(第三方组件)
+- Flash的性能并不好
+- 移动端不支持Flash技术
+
+#### b. HTML 5 提供的视频处理技术 - `<video>`
+
+- 提供了相对应的基本处理方式
+- 提供了高级编程自定义方式
+
+#### c. `<video>`元素所支持的视频格式
+
+| 视频格式 | 类型 | 描述 |
+| --- | --- | --- |
+| MP4格式 | `.mp4` | 目前最主流的视频格式。 |
+| OGV格式 | `.ogv` | |
+| WEBM格式 | `.webm` | 是由Google公司推出的，目前唯一一个支持超高清的视频格式。 |
+
+### 如何使用`<video>`元素
+
+#### a. 引入单个视频格式
+
+`<video>` 标签的编写结构如下：
+
+```html
+<video src="视频文件的路径" autoplay>
+	浏览器不支持的提示内容
+</video>
+```
+
+例如以下示例代码：
+
+```html
+<video src="../DATA/oceans-clip.mp4" autoplay width="640px" height="400px" style="background:black;">
+	非常抱歉,你的浏览器不支持该视频!
+</video>
+```
+
+| 属性名称 | 类型 | 描述 |
+| --- | --- | --- |
+| width | Number | 设置视频的宽度。|
+| height | Number | 设置视频的高度。|
+| style | | 设置CSS样式属性。|
+| class | | 设置CSS样式属性。 |
+| autoplay | Boolean | 设置是否自动播放视频。|
+
+#### b. 引入多个视频格式
+
+`<video>` 标签和 `<source>` 标签的编写结构如下：
+
+```html
+<video autoplay>
+	<source src="视频文件的路径" />
+	<source src="视频文件的路径" />
+	<source src="视频文件的路径" />
+	浏览器不支持的提示内容
+</video>
+```
+
+例如以下示例代码：
+
+```html
+<!-- 解决了浏览器对视频格式的兼容问题 -->
+<video autoplay>
+	<!--
+		<source>元素
+		* 引入视频文件(一个<video>元素允许包含多个<source>)
+	-->
+	<source src="../DATA/oceans-clip.mp4" />
+	<source src="../DATA/oceans-clip.ogv" />
+	<source src="../DATA/oceans-clip.webm" />
+</video>
+```
+
+### `<video>`元素的属性
+
+- autoplay属性：自动播放
+- controls属性：提供控制面板
+
+```html
+<video src="../DATA/oceans-clip.mp4" controls></video>
+```
+
+- loop属性：循环播放
+
+```html
+<video src="../DATA/oceans-clip.mp4" autoplay loop></video>
+```
+
+- poster属性：播放之前实现一张图片
+
+```html
+<video src="../DATA/oceans-clip.mp4" controls poster="../DATA/oceans-clip.png"></video>
+```
+
+- preload属性：预加载视频
+	- none：不预加载
+	- auto：默认值,尽快预加载
+	- metadata：预加载除视频之外的内容(宽度、高度等)
+
+### 视频高级编程
+
+#### a. 事件
+
+| 事件名称 | 作用 |
+| --- | --- |
+| play | 视频播放时触发。|
+| pause | 视频暂停时触发。|
+| ended | 视频播放结束时触发。|
+| error | 视频播放错误时触发。|
+
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>video元素的高级事件</title>
+  <style>
+	img {
+		position: absolute;
+		top : 66px;
+		left : 160px;
+		display : none;
+	}
+  </style>
+ </head>
+ <body>
+  <video id="mmedia" src="../DATA/oceans-clip.mp4" controls></video>
+  <img id="adv" src="../DATA/oceans-clip.png" width="320">
+  <script>
+	var mmedia = document.getElementById("mmedia");
+	var adv = document.getElementById("adv");
+	mmedia.addEventListener("pause",function(){
+		adv.style.display = "block";
+	});
+	mmedia.addEventListener("play",function(){
+		adv.style.display = "none";
+	});
+  </script>
+ </body>
+</html>
+```
+
+#### b. 方法
+
+| 方法名称 | 作用 |
+| --- | --- |
+| `play()` | 用于播放视频。|
+| `pause()` | 用于暂停视频。|
+| `load()` | 用于加载视频。|
+| `canPlayType()` | 判断当前浏览器是否支持当前视频格式。|
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>video元素的高级方法</title>
+ </head>
+ <body>
+  <video id="mmedia" src="../DATA/oceans-clip.mp4"></video>
+  <br>
+  <input type="button" id="btn" value="播放">
+  <script>
+	var btn = document.getElementById("btn");
+	var mmedia = document.getElementById("mmedia");
+	btn.onclick = function(){
+		if(mmedia.paused){// 播放
+			mmedia.play();
+			this.value = "暂停";
+		}else{// 暂停
+			mmedia.pause();
+			this.value = "播放";
+		}
+	}
+  </script>
+ </body>
+</html>
+```
+
+#### c. 属性
+
+| 属性名称 | 作用 |
+| --- | --- |
+| paused | 如果视频为暂停或未播放时,返回true。|
+| ended | 如果视频播放完毕时,返回true。|
+| duration | 返回当前视频的时长。|
+| currentTime | 获取或设置视频的当前位置。|
+
+> **参考内容：**[https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats)
+
+## 音频处理
+
+### 基础内容
+
+#### a. 目前音频处理技术
+
+- Flash技术也可以音频处理
+- Media Player播放器允许嵌入在网页中
+
+#### b. HTML5 提供的音频处理 - `<audio>`
+
+- 浏览器原生支持
+- 性能很好
+- 移动端支持
+
+#### c. `<audio>`元素支持的音频格式
+
+| 音频格式 | 类型 | 描述 |
+| --- | --- | --- |
+| MP3格式 | `.mp3` | 目前最主流的音频格式。 |
+| OGG格式 | `.ogg` | |
+| WAV格式 | `.wav` | |
+
+### 如何使用`<audio>`元素
+
+#### a. 引入单个音频格式
+
+```html
+<audio src="音频文件的路径" autoplay>
+	浏览器不支持的提示内容
+</audio>
+```
+
+#### b. 引入多个音频格式
+
+```html
+<audio autoplay>
+	<source src="音频文件的路径" />
+	<source src="音频文件的路径" />
+	<source src="音频文件的路径" />
+	浏览器不支持的提示内容
+</audio>
+```
+
+### `<audio>`元素的特有属性
+
+| 属性名称 | 作用 |
+| --- | --- |
+| autoplay | 设置是否自动播放。|
+| controls | 提供控制面板。|
+| loop | 设置循环播放。|
+| preload | 预加载视频。|
+
+### `<audio>`元素的高级编程
+
+#### a. 事件
+
+| 事件名称 | 作用 |
+| --- | --- |
+| play | 视频播放时触发。|
+| pause | 视频暂停时触发。|
+| ended | 视频播放结束时触发。|
+| error | 视频播放错误时触发。|
+
+#### b. 方法
+
+| 方法名称 | 作用 |
+| --- | --- |
+| `play()` | 用于播放视频。|
+| `pause()` | 用于暂停视频。|
+| `load()` | 用于加载视频。|
+| `canPlayType()` | 判断当前浏览器是否支持当前视频格式。|
+
+#### c. 属性
+
+| 属性名称 | 作用 |
+| --- | --- |
+| paused | 如果视频为暂停或未播放时,返回true。|
+| ended | 如果视频播放完毕时,返回true。|
+| duration | 返回当前视频的时长。|
+| currentTime | 获取或设置视频的当前位置。
--- a/HTML/html5/web-sockets.md
+++ b/HTML/html5/web-sockets.md
@@ -0,0 +1,147 @@
+## 什么是 Web Sockets
+
+Web Sockets 技术使得浏览器直接与服务器端的程序通过 socket 可以实时的推送或者获取信息的通讯方式成为可能。
+
+在 HTML5 之前实现浏览器与服务器端实时通信的技术如下：
+
+* 轮询：原理简单易懂，就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求，来保持客户端和服务器端的数据同步。
+* Flash：Flash 通过自己的 Socket 实现完成数据交换，再利用 Flash 暴露出相应的接口为 JavaScript 调用，从而达到实时传输目的。
+
+## Web Sockets 的优势与劣势
+
+### Web Sockets 的优势
+
+* Web Sockets 提供强大的、双向、低延迟和易于处理的错误。
+* 它没有很多连接，比如：Comet 长轮询。
+
+### Web Sockets 的劣势
+
+* Web Sockets 是 HTML5 的新规范，并不是所有浏览器都支持。
+* 无请求作用域。由于 Web Sockets 是一个 TCP 套接字，而不是一个 HTTP 请求，因此无法轻松使用请求作用域服务。
+
+## Web Sockets 的实现原理
+
+下图展示了如何使用 WebSockets 进行通信：
+
+![](12.gif)
+
+1. HTTP 握手被发送到带有特定标头的服务器。
+2. 在 JavaScript 的服务器或客户端上提供某种类型的套接字。
+3. 使用该套接字来通过事件处理器异步接收数据。
+
+## Web Sockets API
+
+### Web Sockets 的构造函数
+
+```javascript
+var websocket = new WebSocket(url, protocols);
+```
+
+| 参数名称 | 描述 |
+| --- | --- |
+| url | 表示要连接的URL,这个URL应该是响应WebSocket的地址。|
+| protocols | 单个协议名称或字符串数组,默认为空字符串。|
+
+> **值得注意的是：**Web Sockets 的请求地址（url）必须是 `ws://` 或 `wss://`。
+
+```javascript
+var exampleSocket = new WebSocket("ws://www.example.com/socketserver");
+```
+
+### Web Sockets 的方法
+
+| 方法名称 | 参数 | 描述 |
+| --- | --- | --- |
+| send(data) | data表示发送的请求数据。 | 通过 WebSocket 连接向服务器发送数据。|
+| close() | | 关闭WebSocket连接或停止正在进行的连接请求。|
+
+```javascript
+exampleSocket.send("Here's some text that the server is urgently awaiting!");
+```
+
+### Web Sockets 的属性
+
+Web Sockets 的属性主要使用的就是 `readyState`，该属性表示连接的当前状态。
+
+| 常量名 | 值 | 描述 |
+| --- | --- | --- |
+| CONNECTING | 0 | 连接还没开启。|
+| OPEN | 1 | 连接已开启并准备好进行通信。|
+| CLOSING | 2 | 连接正在关闭的过程中。|
+| CLOSED | 3 | 连接已经关闭，或者连接无法建立。|
+
+### Web Sockets 的事件
+
+| 事件名称 | 描述 |
+| --- | --- |
+| onopen | 用于监听 Web Sockets 打开的事件。|
+| onmessage | 用于监听 Web Sockets 服务器端传递消息的事件。|
+| onerror | 用于监听 Web Sockets 发生错误的事件。|
+| onclose | 用于监听 Web Sockets 通信关闭的事件。|
+
+### Web Sockets 使用步骤
+
+```javascript
+var ws = new WebSocket('ws://127.0.0.1:8080/async'); 
+ws.onopen = function() { 
+    // called when connection is opened 
+}; 
+ws.onerror = function(e) { 
+    // called in case of error, when connection is broken in example 
+}; 
+ws.onclose = function() { 
+    // called when connexion is closed 
+}; 
+ws.onmessage = function(msg) { 
+    // called when the server sends a message to the client. 
+    // msg.data contains the message. 
+}; 
+// Here is how to send some data to the server 
+ws.send('some data'); 
+// To close the socket:
+ws.close();
+```
+
+## Web Sockets 案例
+
+* 客户端代码示例：
+
+```javascript
+// 假设服务端ip为127.0.0.1
+ws = new WebSocket("ws://127.0.0.1:2346");
+ws.onopen = function() {
+    alert("连接成功");
+    ws.send('tom');
+    alert("给服务端发送一个字符串：tom");
+};
+ws.onmessage = function(e) {
+    alert("收到服务端的消息：" + e.data);
+};
+```
+
+* 服务器端代码示例：
+
+这里利用了 PHP 的第三方框架 Workerman 实现 Web Sockets 的服务器端逻辑。
+
+```php
+<?php
+use Workerman\Worker;
+require_once '/Workerman/Autoloader.php';
+
+// 创建一个Worker监听2346端口，使用websocket协议通讯
+$ws_worker = new Worker("websocket://0.0.0.0:2346");
+
+// 启动4个进程对外提供服务
+$ws_worker->count = 4;
+
+// 当收到客户端发来的数据后返回hello $data给客户端
+$ws_worker->onMessage = function($connection, $data)
+{
+    // 向客户端发送hello $data
+    $connection->send('hello ' . $data);
+};
+
+// 运行worker
+Worker::runAll();
+?>
+```
--- a/HTML/html5/web-storage.md
+++ b/HTML/html5/web-storage.md
@@ -0,0 +1,213 @@
+在开发 Web 应用时，开发人员有时需要在本地存储数据。当前浏览器支持 cookie 存储，但其大小有 4KB 的限制。
+
+HTML5 中新引入了 Web Storage 机制，通过使用键值对在客户端保存数据，并且提供了更大容量的存储空间。
+
+HTML5 中的 Web 存储对象有两种类型：
+
+* sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。
+* localStorage 对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。
+
+这两种存储对象具有相同的方法和属性。
+
+> **值得注意的是：**Web 存储并不比 cookies 安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。
+
+官方规范资料地址：[https://html.spec.whatwg.org/multipage/webstorage.html](https://html.spec.whatwg.org/multipage/webstorage.html)
+
+## sessionStorge
+
+### 浏览器支持性检查
+
+```javascript
+ //sessionStorage 
+ if(window.sessionStorage){ 
+    alert(“support sessionStorage”); 
+ }else{ 
+    alert(“not support sessionStorage”); 
+    // 不支持 sessionStorage 
+ } 
+```
+
+### sessionStorage的方法
+
+| 方法名称 | 描述 |
+| ---- | --- |
+| setItem(key, value) | 为 Web 存储对象添加一个键/值对，供以后使用。该值可以是任何的数据类型：字符串、数值、数组等。|
+| getItem(key) | 基于起初用来存储它的这个键检索值。|
+| clear() | 从此 Web 存储对象清除所有的键/值对。|
+| removeItem(key) | 基于某个键从此 Web 存储对象清除特定的键/值对。|
+| key(n) | 检索 key[n] 的值。|
+
+#### a. 向 Web 存储对象添加键/值对
+
+* 使用 `setItem()` 方法
+
+```javascript
+sessionStorage.setItem('myKey', 'myValue');
+```
+
+* 使用 Web 存储对象来直接设置此键的值
+
+```javascript
+sessionStorage.myKey = 'myValue';
+```
+
+#### b. 从 Web 存储对象中检索键/值对
+
+* 使用 `getItem()` 方法
+
+```javascript
+sessionStorage.getItem('myKey');
+```
+
+* 使用 Web 存储对象来直接获取此键的值
+
+```javascript
+sessionStorage.myKey;
+```
+
+#### c. 删除所有键/值对
+
+```javascript
+sessionStorage.clear();
+```
+
+#### d. 删除单个键/值对
+
+```javascript
+sessionStorage.removeItem('myKey');
+```
+
+### 示例代码
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8">
+  <title>sessionStorage</title>
+ </head>
+ <body>
+  <input type="text" id="data">
+  <input type="button" id="save" value="保存">
+  <input type="button" id="read" value="读取">
+  <input type="button" id="dele" value="删除">
+  <script>
+	var save = document.getElementById("save");
+	save.onclick = function(){
+		// 将用户输入的数据,保存到sessionStorage中
+		// 1. 获取用户输入的数据
+		var value = document.getElementById("data").value;
+		// 2. 如何生成存储数据所使用的KEY
+		var key = new Date().getTime();// 时间戳
+		// 3. 存储数据
+		window.sessionStorage.setItem(key,value);
+	}
+	var read = document.getElementById("read");
+	read.onclick = function(){
+		// 读取sessionSotorage中所有的数据
+		// 1. 获取当前sessionStorage中所有数据的个数
+		var count = window.sessionStorage.length;
+		// 2. 进行遍历
+		for(var i=0;i<count;i++){
+			// 3. 根据索引值得到key
+			var key = window.sessionStorage.key(i);
+			// 4. 根据key值得到value
+			var value = window.sessionStorage.getItem(key);
+			// 5. 进行测试
+			console.log(key + " : " + value);
+		}
+	}
+	var dele = document.getElementById("dele");
+	dele.onclick = function(){
+		// removeItem()
+		//window.sessionStorage.removeItem(1452666425707);
+		window.sessionStorage.clear();
+	}
+  </script>
+ </body>
+</html>
+```
+
+## localStorage
+
+### 浏览器支持性检查
+
+```javascript
+//localStorage 
+ if(window.localStorage){ 
+    alert(“support localStorage”); 
+ }else{ 
+    alert(“not support localStorage”); 
+    // 不支持 localStorage 
+ }
+```
+
+### localStorage的方法
+
+| 方法名称 | 描述 |
+| ---- | --- |
+| setItem(key, value) | 为 Web 存储对象添加一个键/值对，供以后使用。该值可以是任何的数据类型：字符串、数值、数组等。|
+| getItem(key) | 基于起初用来存储它的这个键检索值。|
+| clear() | 从此 Web 存储对象清除所有的键/值对。|
+| removeItem(key) | 基于某个键从此 Web 存储对象清除特定的键/值对。|
+| key(n) | 检索 key[n] 的值。|
+
+#### a. 向 Web 存储对象添加键/值对
+
+* 使用 `setItem()` 方法
+
+```javascript
+localStorage.setItem('myKey', 'myValue');
+```
+
+* 使用 Web 存储对象来直接设置此键的值
+
+```javascript
+localStorage.myKey = 'myValue';
+```
+
+#### b. 从 Web 存储对象中检索键/值对
+
+* 使用 `getItem()` 方法
+
+```javascript
+localStorage.getItem('myKey');
+```
+
+* 使用 Web 存储对象来直接获取此键的值
+
+```javascript
+localStorage.myKey;
+```
+
+#### c. 删除所有键/值对
+
+```javascript
+localStorage.clear();
+```
+
+#### d. 删除单个键/值对
+
+```javascript
+localStorage.removeItem('myKey');
+```
+
+### localStorage的事件
+
+如果想在存储成功或修改存储的值时执行一些操作，可以用 Web Storage 接口提供的事件。
+
+```javascript
+// 显示存储事件的相关内容
+ function handleStorageEvent(e) { 
+    document.write(“key” + e.key + “oldValue” + e.oldValue + “newValue” + e.newValue); 
+ } 
+ // 添加存储事件监听
+ window.addEventListener(“storage”, handleStorageEvent, false);
+```
+
+| 事件参数 | 描述 |
+| --- | --- |
+| key | 发生改变的键 |
+| oldValue | 键改变之前的值 |
+| newValue | 键改变之后的值 |
+| url | 触发存储事件的页面 url |
--- a/HTML/html5/web-workers.md
+++ b/HTML/html5/web-workers.md
@@ -0,0 +1,180 @@
+## 基础内容
+
+### 什么是 Web Workers
+
+> 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
+
+上句话是 MDN 对象 Web Workers 的简单描述。
+
+Web Workers 是可以在后台（页面端）运行的任务，它能够被轻松的创建，还能向它的创建者发送消息。 
+
+Web Workers 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。
+
+### 两种 Web Workers
+
+Web Workers 可以分为两种类型：Dedicated Web Worker（专用线程）和 Shared Web Worker（共享线程）。
+
+#### a. Dedicated Web Worker
+
+目前绝大多数的应用场景所使用的是 Dedicated Web Worker（专用线程）。Dedicated Web Worker随着 HTML 页面关闭而被终止，这就意味着 Dedicated Web Worker 只能被创建它的 HTML 页面所访问。
+
+在 JavaScript 代码中，`Work` 类型代表 Dedicated Web Worker。
+
+#### b. Shared Web Worker
+
+与 Dedicated Web Worker（专用线程）相比，Shared Web Worker 一般用于一些特定情况，可以为多个 HTML 页面服务，即可以被多个 HTML 页面所访问。与之对应的，只有将与之相关的所有 HTML 页面都关闭才能被终止。
+
+在 JavaScript 代码中，`SharedWorker` 类型代表 Shared Web Worker。
+
+### Web Workers 的限制
+
+Web Workers 在具体使用中，具有以下几种限制：
+
+* Web Workers 无法访问 DOM 节点；
+* Web Workers 无法访问全局变量或是全局函数；
+* Web Workers 无法调用 `alert()` 或者 `confirm()` 之类的函数；
+* Web Workers 无法访问 window、document 之类的浏览器全局变量；
+
+Web Workers 可以在它的作用域内访问 navigator 对象。它含有如下能够识别浏览器的字符串，就像在普通脚本中做的那样：
+
+* appName
+* appVersion
+* platform
+* userAgent
+
+### Web Workers 的使用场景
+
+* Web Workers 线程能够在不干扰 UI 的情况下执行一些计算的任务。
+* Web Workers 线程能够使用 XMLHttpRequest 对象与服务器端进行异步交互。
+
+### 参考资料
+
+* [Web Workers - W3C](http://www.w3.org/TR/workers/)
+* [使用 Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)
+* [Microsoft Web Workers](https://msdn.microsoft.com/library/hh673568(v=vs.85).aspx)
+
+## Worker API
+
+### Worker 构造函数
+
+```javascript
+Worker(DOMString scriptURL)
+```
+
+通过该构造函数可以直接创建 Worker 对象，并传递 Worker 文件的路径（scriptURL）。具体用法如下：
+
+```javascript
+var worker = new Worker(my_task.js);
+```
+
+通过 Worker 的构造函数得到 Worker 对象，在 HTML 页面与 Worker 文件之间创建通信。
+
+> **值得注意的是：**指定的 Worker 文件路径必须遵循`同源策略`。
+
+### 监听通信消息机制
+
+```javascript
+worker.onmessage = function(event){
+	逻辑编写在这里...
+}
+```
+
+当 Worker 传递消息给 HTML 页面（或 HTML 页面传递消息给 Worker）时，可以通过 onmessage 事件进行监听并且捕获。
+
+传递的消息存储在 onmessage 事件处理函数的参数 `data` 中。
+
+```javascript
+worker.onmessage = function(event) {
+  console.log("Worker's message: " + event.data);
+};
+```
+
+### 发送通信消息方法
+
+```javascript
+postMessage(JSObject message)
+```
+
+HTML 页面通过该方法向 Worker 的内部作用域内传递消息。该方法接收一个单独的参数，即要传递给 Worker 的数据。
+
+`message` 参数用于传递给 Worker 的数据，该数据将包含于传递给 onmessage 处理函数的事件对象中的 data 字段内。
+
+```javascript
+// 普通数据
+worker.postMessage("ali");
+// JSON格式的数据
+worker.postMessage({"cmd": "init", "timestamp": Date.now()});
+```
+
+### 终止 Worker 通信
+
+```javascript
+terminate()
+```
+
+该方法用于立即终止 Worker。该方法不会给 Worker 留下任何完成操作的机会；就是简单的立即停止。
+
+### 监听通信错误机制
+
+```javascript
+worker.onerror = function(event){
+	错误处理编写在这里...
+}
+```
+
+错误信息对象包含三个属性：
+
+* message：一个可读性良好的错误信息。
+* filename：产生错误的脚本文件名。
+* lineno：发生错误时所在的脚本文件行号。
+
+## 双向通信
+
+所谓“单向通信”就是指 HTML 页面与 Worker 建立通信后，只是 Worker 向 HTML 页面传递消息。
+
+所谓“双向通信”就是指 HTML 页面与 Worker 之间可以相互传递消息的一种方式。
+
+要建立双向通信，HTML 页面和 Worker 线程都要侦听 onmessage 事件。
+
+* 首先，该脚本创建 worker 线程。
+
+```javascript
+var echo = new Worker('echo.js'); 
+echo.onmessage = function(e) {
+  alert(e.data); 
+}
+```
+
+* 当用户单击提交按钮时，脚本会将两条信息以 JavaScript 对象文本的形式传递给 Worker。
+
+```html
+<script>
+window.onload = function() {
+  var echoForm = document.getElementById('echoForm'); 
+  echoForm.addEventListener('submit', function(e) {
+    echo.postMessage({
+      message : e.target.message.value,
+      timeout : e.target.timeout.value
+    }); 
+    e.preventDefault();
+  }, false); 
+  }
+</script>
+<form id="echoForm">
+  <p>Echo the following message after a delay.</p>
+  <input type="text" name="message" value="Input message here."/><br/>
+  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
+  <button type="submit">Send Message</button>
+</form>
+```
+
+* 最后，Worker 侦听消息，并在指定的超时间隔之后将其返回。
+
+```javascript
+onmessage = function(e){
+  setTimeout(function(){
+    postMessage(e.data.message);
+  }, 
+  e.data.timeout * 1000);
+}
+```
--- a/JavaScript/12Bom对象.md
+++ b/JavaScript/12Bom对象.md
@@ -0,0 +1,52 @@
+# BOM对象及其属性和方法
+
+
+## 1 window对象
+
+当前的窗口对象
+
+全局所有的对象的父对象
+
+## 2 Navigator对象
+
+当前的浏览器对象
+
+浏览器的名称、版本、代理等信息
+
+## 3 Screen对象
+
+屏幕对象
+
+
+屏幕的尺寸
+
+
+## 4 location 对象
+
+url对象
+
+
+能够用来解析url，访问新的地址，请求的协议和端口号。
+
+## 5 storage对象
+
+1. 本地存储对象localStorage 将数据存储到本地
+2. sessionStorage对象，将数据存储为会话数据。
+
+## 6 document对象
+
+整个HTML页面的对象。
+
+能够得到所有的文档节点、元素节点、属性节点、文本节点、注释节点
+
+1. 能够得到当前页面包含的cookie。保存当前的登录信息
+
+## 7 history对象
+
+代表浏览器的历史记录。
+
+1. history.back
+2. history.forward
+
+
+
--- a/JavaScript/13Dom.md
+++ b/JavaScript/13Dom.md
--- a/JavaScript/jQuery/1简介.md
+++ b/JavaScript/jQuery/1简介.md
@@ -1,20 +1,14 @@
 ## 1 功能

 > jquery是js的一个框架。目的是对js的编程方式进行封装，提供了新的编程方法。简化过程。
-
-基本内容：
-* HTML 元素选取
-* HTML 元素操作
-* CSS 操作
-
-事件和动画处理
-* HTML事件处理
-* JavaScript 特效动画
+> 主要功能包括以下五个部分。非常重要和关键。


-* HTML DOM 遍历和修改
-* AJAX
-* Utilities
+1. HTML元素选取
+2. HTML元素操作：HTML和CSS、HTML DOM 遍历和修改
+3. HTML事件处理：
+4. JS特效动画
+5. AJAX异步请求

 ## 2 引用

@@ -34,7 +28,7 @@
 </script>
 </head>
 ```
-## 3 CSS选择器
+## 3 基础选择器

 ### 元素选择器

@@ -65,4 +59,57 @@ $("[href]")
 ```
 $("*")	选取所有元素	
 $(this)	选取当前 HTML 元素
+```
+
+### 组合选择器
+
+```
+$("selector1,selector2,...")选取多个选择器指定的元素
+```
+
+## 4 层次选择器
+
+### 后代选择器
+
+* 可能是子代也可能是子代的子代
+```
+$("ancestor descendant")
+```
+### 子代选择器
+
+* 直接后代
+
+```
+$("parent>child")
+```
+
+### 相邻选择器
+* 同级元素的下一个
+```
+$("prev+next")
+```
+
+### 同级选择器
+
+* 所有同级元素
+
+```
+$("prev-siblings")
+```
+
+## 5 表单选择器
+
+
+表单
+```
+:input
+:text
+:password
+:radio
+:checkbox
+:submit
+:image
+:reset
+:button
+:file
 ```
--- a/JavaScript/jQuery/2事件.md
+++ b/JavaScript/jQuery/2事件.md
@@ -30,13 +30,21 @@
 * unload

 ## 2 事件处理
-### 事件处理方法
+### 直接绑定事件处理方法
 回调函数作为参数进行传递。

 ```
-("p").click(function(){$(this).hide()});
+$("p").click(function(){$(this).hide()});
 ```
 ### $(document).ready()

 在加载完成文档后需要执行的函数。

+
+### 通过bind绑定事件处理方法
+可以直接在jQuery对事件进行绑定。而不用在html代码中书写js代码了。
+* bind绑定
+
+```
+$(selector).bind(eventtype,eventdata,handler(eventobject))
+```
--- a/JavaScript/jQuery/5遍历.md
+++ b/JavaScript/jQuery/5遍历.md
@@ -79,4 +79,15 @@ $(document).ready(function(){
 $(document).ready(function(){
  $("p").not(".url");
 });
+```
+
+## 6 遍历each
+
+遍历所有的子元素。回调函数的两个参数分别是下标和dom对象
+```
+
+$('selector').each(function(index,element){
+  //可以将dom对象转换为jQuery对象
+  $(element)
+})
 ```
--- a/JavaScript/jQuery/6ajax.md
+++ b/JavaScript/jQuery/6ajax.md
@@ -58,4 +58,17 @@ $("button").click(function(){
        alert("数据: \n" + data + "\n状态: " + status);
    });
 });
+```
+
+
+## 2 GET JSON方法
+GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
+```
+$.getJSON(URL,callback);
+
+$("button").click(function(){
+  $.get("demo_test.php",function(data,status){
+    alert("数据: " + data + "\n状态: " + status);
+  });
+});
 ```