我们就从HTML5的基础总结起。希望可以提高自身的基础。
HTML5 头部 和 元信息
使用 <head.../> 元素可以定义HTML文档头，该元素可以包含如下子元素。
<script> 该元素用于包含JavaScript脚本。
<style> 该元素用于定义内部CSS样式。
<link> 该元素用于链接外部CSS样式等资源。
<title> 该元素用于定义文档标题。该元素较为常用的属性时id，作为其唯一标识。该元素只能包含文本内容，该文本内容就是该文本的标题。
<base> 该元素用于指定该页面中所有链接的基准链接。
<meta> 该元素用于定义HTML页面的元数据。
<base.../> 元素必须是空元素，该元素除了可以指定id作为其唯一标识之外，还可以指定如下两个属性。
href 指定所有链接的基准链接。
target 指定超链接默认在哪个窗口打开链接。该属性只能是 _blank、_parent、_self和_top其中之一。
<meta.../>用于定义页面元信息，定义元信息也就是指定一些name-value对。该元素除了可以指定id属性之外，还可以指定如下三个属性。
http-equiv 指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。
name 指定元信息的名称，该名称值可以随意指定。
content 指定元信息的值。
示例： <meta name="author" content="江小波" />
为网页指定有效的关键字有利于搜索引擎收录本站点。
http-equiv 属性所支持的值主要有如下几个。
Expires 指定网页的过期时间。一旦网页过期，必须重新从服务器上下载。例如如下代码：
<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008" />
Pragma 指定禁止浏览器从本地磁盘缓存中调阅页面内容，浏览器一旦离开该网页就无法脱机访问该页面。例如：
<meta http-equiv="Pragma" content="no-cache" />
Refresh 指定浏览器多长时间后自动刷新指定页面。例如：
<!-- 设置2秒后自动刷新本页面 -->
<meta http-equiv="Refresh" content="2" />
<!-- 设置2秒后自动刷新 http://www.baidu.com -->
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" />
Set-Cookie 设置Cookie。如果网页过期，那么客户端上的Cookie也将被删除。例如：
<meta http-equiv="Set-Cookie" content="name=value expires= Sat Sep 27 16:12:36 CST 2008, path=/" />
content-Type 设置该页面的内容类型和所用的字符集。例如：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5 新增的拖放API
HTML5新增了关于拖放的API，通过拖放API可以让HTML页面的任意元素都变成可拖动的，通过使用拖放机制可以开发出更友好的人机交互界面。
拖放操作可以分成两个动作：在某个元素上按下鼠标并移动鼠标（没有松开鼠标），此时开始拖动；在拖动过程中，只要没有松开鼠标，将会不断地产生拖动事件--这个过程被称为“拖”；把被拖动的元素拖动到另外一个元素上并松开鼠标--这个动作被称为“放”。拖放操作由“拖”和“放”两个动作组成。
1. 启动拖动
在HTML5中，<img.../>元素默认就是可以拖动的；而<a.../>元素只要设置了href属性，它默认也是可拖动的。
对于普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素的draggable属性设为true即可。但仅仅设置该元素的draggable属性还不够，因为仅仅设置了draggable="true"只表示该元素可拖动，但拖动时并未携带数据，因此用户看不到拖动效果。
为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。
2. 接受“放”
不管拖动图片，还是拖动<div.../>元素，拖放时都显示了一个“禁止”标志，这表明拖动图片、拖动<div.../>时，被拖到“目的地”并不接受被拖动的元素--这是因为当被拖动元素被“拖过”document对象时，document对象默认阻止了拖动事件，而其他HTML组件也是位于document对象内的，因此它们也不能接受“放”。
为了让document可以接受“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。
当用户把<div.../>元素拖到指定位置释放后，Firefox浏览器默认会打开一个新页面，页面的URL正是拖放操作携带的数据。但如果使用Chrome浏览器来浏览该页面，当用户把<div.../>元素拖到指定位置释放后，Chrome浏览器并没有执行任何默认动作。
由此可见，不同浏览器对于拖放操作的默认动作并不相同，如果开发者希望取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。
| 事件 | 事件源 | 描述 |
| ondragstart | 被拖动的HTML元素 | 开始拖动操作时触发该事件 |
| ondrag | 被拖动的HTML元素 | 拖动过程中会不断地触发该事件 |
| ondragend | 被拖动的HTML元素 | 拖动结束时触发该事件 |
| ondragenter | 拖动时鼠标经过的元素 | 被拖动的元素进入本元素的范围内时触发该事件 |
| ondragover | 拖动时鼠标经过的元素 | 被拖动的元素进入本元素的范围内拖动时会不断地触发该事件 |
| ondragleave | 拖动时鼠标经过的元素 | 被拖动的元素离开本元素时触发该事件 |
| ondrop | 拖动时鼠标经过的元素 | 其他元素被放到了本元素中时触发该事件 |
3. DataTransfer 对象
拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法。
dataTransfer.dropEffect 设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“none”、“copy”、“link”和“move”四个值之一。
dataTransfer.effectAllowed 设置或返回被拖动元素允许发生的拖动行为。该属性的值可设置为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”、“uninitialized”。
dataTransfer.items 该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDragImage(element,x,y) 设置拖放操作的自定义图标。其中element设置自定义图表，x设置图标与鼠标在水平方向的距离；y设置图标与鼠标在垂直方向的距离。
dataTransfer.addElement(element) 添加自定义图标
dataTransfer.types 该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(format) 获取DataTransfer对象中format格式的数据。
dataTransfer.setData(format,data) 想DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。
dataTransfer.clearData([format]) 清除DataTransfer对象中format格式的数据。如果省略format格式，则意味着清除DataTransfer对象中的全部数据。
4. 拖放行为
通过设置 DataTransfer对象的effectAllowed、dropEffect两个属性可以控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性。
前面已经介绍过一条总规则：如果dropEffect设置的拖放行为不在effectAllowed属性设置多个拖放行为之内，拖放操作将会失败。具体来说，需要注意4点。
1. 如果effectAllowed设为none，则不允许拖动该元素。
2. 如果dropEffect设为none，则被拖动的元素不能“放”到本元素中。
3. 如果effectAllowed设置为all或不设置，则dropEffect可设置为任何属性值（因为都在all范围之内），而且将会遵守dropEffect指定的拖放行为。
4. 如果effectAllowed指定了特定的拖放行为，例如move、copy等，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性的子集。