1、部分代码代替了以前的代码
例如：
- 获取焦点
旧：document.getElementById("price");.focus;
新：<input type="text" autofocus name="price" />
2、使用
HTML5之前，要表达一个文档的结构，只能通过<div>来实现；
在HTMl5之后，提供了更明确语义的元素，例如：
<header>...</header> <nav>...</nav> <article> <section> ...... ...... </section> </article> <aside>...</aside> <footer>...</footer>
3、基本结构的变化
以前的时候是： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
现在只需要写： <meta charset=utf-8" /> 就OK了
注意：不要在<html><head>之间插入任何内容！不要在</head><body>之间插入任何内容！不要在</body></html>之间插入任何内容！
4、标签不再区分大小写
5、元素可以省略结束标签【空元素标签不允许开始标签和结束标签分开定义】
- 空元素语法的元素
<area> 用于定义图片映射的内部区域 <base> <br> <col> <command> <embed> <hr> <img> <input> <keygen> <link> <mata> <param> <source> <wbr>
- 可以省略结束标签的元素
<colgroup></colgroup> <dt></dt> <dd></dd> <li></li> <optgroup></optgroup> <option></option> <p></p> <rt></rt> <rp></rp> <thead></thead> <tbody></tbody> <tfoot></tfoot> <tr></tr> <td></td> <th></th>
- 可以省略全部标签的元素
<html></html> <head></head> <body></body> <tbody></tbody>
6、允许省略属性值的属性
7、允许属性值不使用引号
传统的XHTML按XML规范对属性值进行要求，要求所有的属性值都必须用引号引起来，但是HTML5允许直接给出属性值，即使不放在引号中也是正确的。
注：如果某个属性值中含有空格的话，由于空格容易引起浏览器混涿的属性值，那么就需要用引号将其括起来。
8、HTML5新增的通用属性
- contentEditable属性
HTML5为大部分元素都增加了contentEditable属性，如果将该属性设为true，那么浏览器将会允许开发者直接编辑该html中的内容，此处的html元素并不是指那些原本就可以编辑输入的表单元素。
contentEditable属性有一个可继承的特点：如果一个HTML元素的父元素是“可编辑”的，那么它默认也是可以编辑的，除非显式指定 contentEditable="false"。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> contentEditable属性 </title> 7 </head> 8 <body> 9 <!-- 直接指定contentEditable="true"表明该元素是可编辑的 --> 10 <div contentEditable="true" style="500px;border:1px solid black"> 11 疯狂Java讲义 12 <!-- 该元素的父元素有contentEditable="true"，因此该表格也是可编辑的 --> 13 <table style="420px;border-collapse:collapse" border="1"> 14 <tr> 15 <td>疯狂Java讲义</td> 16 <td>疯狂Android讲义</td> 17 </tr> 18 <tr> 19 <td>轻量级Java EE企业应用实战</td> 20 <td>经典Java EE企业应用实战</td> 21 </tr> 22 </table> 23 </div> 24 <hr/> 25 <!-- 这个表格默认是不可编辑的 26 双击之后该表格变为可编辑状态 --> 27 <table id="target" 28 ondblclick="this.contentEditable=true;" 29 style="420px;border-collapse:collapse" border="1"> 30 <tr> 31 <td>Java</td> 32 <td>Ruby</td> 33 </tr> 34 <tr> 35 <td>C/C++</td> 36 <td>Python</td> 37 </tr> 38 </table> 39 </body> 40 </html>
- designMode属性
designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode都设置成 on 时，该页面上所有支持contentEditable属性的元素都变成可编辑状态；designMode属性值默认为off。
document.designMode="on" ;
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> designMode属性 </title> 7 </head> 8 <body ondblclick="document.designMode='on';"> 9 <div>aaaa</div> 10 <table style="420px;border-collapse:collapse" border="1"> 11 <tr> 12 <td>疯狂Java讲义</td> 13 <td>疯狂Android讲义</td> 14 </tr> 15 <tr> 16 <td>轻量级Java EE企业应用实战</td> 17 <td>经典Java EE企业应用实战</td> 18 </tr> 19 </table> 20 </body> 21 </html>
- hidden属性
HTML5为所有元素提供了一个hidden属性，属性值为true和false，一旦把某个HTML元素的hidden设为true，该组件就不会显示，浏览器也不会保留该组件所占用的空间！
注：hidden属性可以代替CSS样式中的display属性，设置hidden="true"相当于在CSS中设置display:none。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> hidden属性 </title> 7 </head> 8 <body> 9 <div id="target" hidden="true" style="height:80px"> 10 文字内容 11 </div> 12 <button onclick="var target=document.getElementById('target'); 13 target.hidden=!target.hidden;">显示/隐藏</button> 14 </body> 15 </html>
- spellcheck属性
HTML为<input..../>、<textarea..../>等元素增加了spellcheck属性。该属性有true和false两个属性，如果spellcheck="true"，浏览器将会负责对用户输入的文本内容执行输入检查，如果检查不通过的话，浏览器就会对拼错的单词进行提示。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> spellcheck属性 </title> 7 </head> 8 <body> 9 <!-- 指定执行拼写检查 --> 10 <textarea spelllcheck="true" rows="3" cols="40"> 11 </textarea> 12 </body> 13 </html>
显示效果如下：
9、 HTML5新增的常用元素
- 文档结构元素
在HTML5以前，HTML页面只能使用<div.../>元素作为结构元素，而HTML5则提供了<article.../>、<section.../>、<nav.../>、<aside.../>、<header.../>、<footer.../>等文档结构元素。
这些元素的功能的简单介绍：
- <article>:该元素用于代表页面的独立
- <article>元素内部使用<header.../>定义文章的标题部分；
- <article>元素内部使用<footer.../>定义文章的脚注部分；
- <article>元素内部使用多个<section.../>把文章内容分成几个“段落”；
- <article>元素内部可嵌套多个<article.../>作为它的附属文章。
<section>:该元素用于对页面的内容进行分块。<section.../>元素通常也可由标题和内容组成。
通常建议<section.../>元素包含一个标题（由<h1>....<h6>定义的）。
<section.../>元素可以包含多个<article.../>元素，表示该“分块”内部包含多篇文章。
<section.../>元素可以嵌套<section.../>元素，用于表示该“分块”包含多个子分块。
注：
<article.../>则侧重于表达一篇独立的、完整的文章，而<section.../>则侧重于对页面内容进行分块，也就是说，如果想表达一块独立、完整的内容时，应该使用<article.../>元素；如果想吧一块内容分为几块的时候，则应该使用<section.../>元素
<nav>:该元素专门用于定义页面上的“导航条”，包括上方的“主导航条”、侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等
<aside>专门用于定义当前页面或当前文章的附属信息
<header>该元素主要为<article.../>定义元素的“头部”信息
<hgroup>该元素主要用于组织<h1>...<h6>的标题元素,当<header.../>需要包含多个标题元素的时候，可以考虑使用<hgroup.../>把他们组成一组。
<footer>主要用于为<artcle.../>元素定义脚注部分，该部分包括该文章的版权信息，作者授权信息等。
<figure.../>:该元素用于表示一块独立的“图片区域”，该元素内部包含一个或多个<img.../>元素所代表的图片。除此之外，该元素内部还包含一个<figcaption.../>元素，用于定义该“图片区域”的标题。
<figcaption>:该元素通常放在<figure.../>内部，用于定义“图片区域”的标题。
注：除了<section.../>元素可指定cite属性之外，上面其余元素都只支持id、class、style、contentEditable、hidden等通用属性。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 论坛帖子 </title> 7 </head> 8 <body> 9 <article> 10 <!-- 帖子的“头部” --> 11 <header> 12 <h1>学习Android，必须先学习Java吗</h1> 13 <div>作者：crazystu</div> 14 </header> 15 <p> 16 学习Android，必须先学习Java吗？ 17 Android上的应用程序只能用Java编写吗？可以用C++吗？</p> 18 <!-- 帖子的“回复”部分，用section元素表示 --> 19 <section> 20 <!-- 每个article代表一个回复 --> 21 <article> 22 <!-- 回复的头部 --> 23 <header> 24 <h2>还是得学习Java</h2> 25 <div>作者：kongyeeku</div> 26 </header> 27 <p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br/> 28 或NDK开发，但Java毕竟是Android主要的开发语言，<br/> 29 因此建议学习Android之前还是先学习Java</p> 30 </article> 31 <!-- 每个article代表一个回复 --> 32 <article> 33 <!-- 回复的头部 --> 34 <header> 35 <h2>Java是基础</h2> 36 <div>作者：kuan008</div> 37 </header> 38 <p>Java是基础，学好Java再去学习Android事半功倍。</p> 39 </article> 40 </section> 41 <!-- 帖子的“脚注” --> 42 <footer> 43 以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场 44 </footer> 45 </article> 46 </body> 47 </html>
将<article.../>元素放在<body.../>内部，表明为整个页面添加“边栏”。
将<article.../>元素放在其他父元素的内部，表明为父元素添加“边栏”。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 论坛帖子 </title> 7 <link rel="stylesheet" type="text/css" href="css.css"/> 8 </head> 9 <body> 10 <article> 11 <!-- 帖子的“头部” --> 12 <header> 13 <h1>学习Android，必须先学习Java吗</h1> 14 <div>作者：crazystu</div> 15 </header> 16 <p> 17 学习Android，必须先学习Java吗？ 18 Android上的应用程序只能用Java编写吗？可以用C++吗？</p> 19 <!-- 帖子的“回复”部分，用section元素表示 --> 20 <section> 21 <!-- 每个article代表一个回复 --> 22 <article> 23 <!-- 回复的头部 --> 24 <header> 25 <h2>还是得学习Java</h2> 26 <div>作者：kongyeeku</div> 27 </header> 28 <p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br/> 29 或NDK开发，但Java毕竟是Android主要的开发语言，<br/> 30 因此建议学习Android之前还是先学习Java</p> 31 </article> 32 <!-- 每个article代表一个回复 --> 33 <article> 34 <!-- 回复的头部 --> 35 <header> 36 <h2>Java是基础</h2> 37 <div>作者：kuan008</div> 38 </header> 39 <p>Java是基础，学好Java再去学习Android事半功倍。</p> 40 </article> 41 </section> 42 <!-- 帖子的“脚注” --> 43 <footer> 44 以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场 45 </footer> 46 <!-- 该aside放在article内部，将作为该文章的“边栏”信息 --> 47 <aside> 48 <h3>关于楼主</h3> 49 <section> 50 <div>用户组: 编程摸索者</div> 51 <div>注册日期: 2009-7-27</div> 52 <div>上次访问: 2012-1-3 20:02</div> 53 <div>最后发表: 2012-1-1 17:38</div> 54 <div>发帖数级别: 小试牛刀</div> 55 <div>阅读权限: 30</div> 56 </section> 57 </aside> 58 </article> 59 <!-- 该aside放在body内部，将作为整个HTML文档的“边栏”信息 --> 60 <aside> 61 <h3>页面导航</h3> 62 <nav> 63 <ul> 64 <li><a href="#">查看相关内容</a></li> 65 <li><a href="http://www.crazyit.org">返回首页</a></li> 66 <li><a href="http://www.crazyit.org/forum-63-1.html">返回本版</a></li> 67 </ul> 68 </nav> 69 </aside> 70 </body> 71 </html>
显示的效果为：
下面页面代码使用<figure.../>元素定义了一块“图片区域”，在这块区域包含了3张图片；还使用CSS为<figure/>元素添加了一个边框。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 图片区域 </title> 7 </head> 8 <body> 9 <figure style="border:2px solid black;padding:5px;500px"> 10 <figcaption><b>疯狂Java体系图书</b></figcaption> 11 <img src="images/java.png" alt="疯狂Java讲义"/> 12 <img src="images/android.png" alt="疯狂Android讲义"/> 13 <img src="images/ee.png" alt="轻量级Java EE企业应用实战"/> 14 </figure> 15 </body> 16 </html>
- 语义相关元素
<mark>用于显示HTML页面中需要重点“关注”的内容，就像我们看书时喜欢用荧光笔标记出来的效果相同。该元素指定id、class、style和hidden等通用的属性。浏览器通常会用红色显示<mark.../>标注的内容。
<time>用来显示被标注的内容是日期、时间或者日期时间，该元素除了可以使用<mark>元素可以使用的属性外，还可以使用属性datetime，该属性主要用于向机器提供时间。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 语义相关元素 </title> 7 </head> 8 <body> 9 <article> 10 <header> 11 <h2>疯狂软件即将引入<mark>HTML 5</mark>相关课程</h2> 12 </header> 13 <p> 14 <mark>HTML 5</mark>是下一代的HTML规范，<br/> 15 <mark>HTML 5</mark>即将把前端开发者从繁重的开发中释放出来。<br/> 16 为了把握技术潮流的脉搏，疯狂软件教育计划在 17 <time datetime="2012-04-01">2012年4月</time> 18 引入<mark>HTML 5</mark>的相关课程。<br/> 19 疯狂软件教育的上课时间是<time datetime="09:00">早上9点</time> 20 到<time datetime="17:30">下午5点半</time>。<br/> 21 疯狂软件教育龙年的将于<time datetime="2012-01-30T09:00">正月初八</time> 22 开始上班，也就是<time>2012-01-30</time>。 23 </p> 24 </article> 25 </body> 26 </html>
显示的效果为：
注：如果<time.../>元素包含的内容本身就满足标准的日期、时间格式，那么使用<time.../>元素时可以不指定datetime属性，否则就应该指定datetime属性。
只有Chrome支持<details.../>与<summary.../>元素
- 两个特殊功能的元素
<meter>:用于表示一个已知最大值和最小值的计数仪表，该元素除了通用的属性值id、class、style、hidden外，还有以下属性
value：指定计数仪表的当前值
min：指定计数仪表的最小值
max：指定计数仪表的最大值
low：指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值。
high：指定计数仪表指定范围的最大值。该属性值必须小于等于max属性指定的值。
optimum：指定计数仪表有效范围的最佳值。如果该值大于high属性指定的值，则意味着值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。
<progress>:用于表示一个进度条。使用该元素除了可以使用指定的通用元素外，还有以下属性。
max：指定进度条完成时的值。
value：指定进度条当前完成的进度值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> meter和progress </title> 7 </head> 8 <body> 9 当前行车速度是:<meter value="120" min="0" max="220" low="0" high="160"> 10 120</meter>千米/小时。<br/> 11 任务完成比：<progress value="30" max="100">30/100</progress> 12 </body> 13 </html>
显示效果为：
10、HTML的元信息
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
http-equiv：指定元信息的名称，该属性名称具有特殊的意义，他可以向浏览器传回一些有用的信息，帮助浏览器正确处理网页中的内容。 name：指定元信息的名称，该名称值可以随意指定。
content：指定元信息的值。
Expires：指定网页的过期时间。
Pragma：指定禁止浏览器从本地磁盘缓冲中调阅页面内容，浏览器一旦离开该网页就无法脱机访问该页面
Refresh：指定浏览器多长时间后自动刷新指定页面。
Set-Cookie：设置Cookie。如果网页过期，那么客户端上的Cookie也被删除。
content-Type：设置该页面的内容类型和所用的字符集。
11、HTML5新增拖放的API
在HTML5中，<img.../>元素默认就是可拖动的；而<a.../>元素只要设置了href属性，他默认也是可拖动的。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 可拖动 </title> 7 </head> 8 <body> 9 <a href="http://www.fkjava.org">疯狂软件教育</a> 10 <img src="logo.jpg" alt="crazyit"/> 11 </body> 12 </html>
显示效果分别如下：
对于普通元素而言，如果希望它变为可拖动的，需要将该元素的属性draggable属性设为true即可，如果只设置draggable="true"只表示该元素可以拖动，但拖动时并未携带数据，因此看不到拖动效果。
为了让拖动操作能够携带数据，应该为被拖动的元素的ondragstart事件指定的监听器，在该监听器中让拖动操作可以携带数据。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 可拖动的Div </title> 7 </head> 8 <body> 9 <div id="source" style="80px;height:80px; 10 border:1px solid black; 11 background-color: #bbb;" 12 draggable="true">疯狂软件教育</div> 13 <script type="text/javascript"> 14 var source = document.getElementById("source"); 15 source.ondragstart = function(evt) 16 { 17 // 让拖动操作携带数据 18 evt.dataTransfer.setData("text/plain" , "疯狂软件"); 19 } 20 </script> 21 </body> 22 </html>
不管是拖动图片，还是拖动<div.../>元素，拖动时都显示一个“禁止”的标志，这表明拖动图片、拖动“div”时，被拖到目的地后并不接受被拖动的元素，这是因为当被拖动的元素被“拖过”document对象时，document对象默认阻止了拖动事件，而其他的HTML组件也是位于document对象内的，因此他们不接受“放”。
为了让document接收“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。
例如在上面代码中加上如下代码：
1 document.ondragover = function(evt) 2 { 3 // 取消事件的默认行为 4 return false; 5 }
不同的浏览器对于拖放操作的默认动作并不相同，如果希望开发者希望取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。也就是再增加如下代码：
1 document.ondrop = function(evt) 2 { 3 // 取消事件的默认行为 4 return false; 5 }
下面的代码实现了一个可以自由拖放的<div.../>元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 可自由拖动的Div </title> 7 </head> 8 <body> 9 <div id="source" style="80px;height:80px; 10 border:1px solid black; 11 background-color: #bbb;" 12 draggable="true">疯狂软件教育</div> 13 <script type="text/javascript"> 14 var source = document.getElementById("source"); 15 source.ondragstart = function(evt) 16 { 17 // 让拖动操作携带数据 18 evt.dataTransfer.setData("text/plain" , "www.fkjava.org"); 19 } 20 document.ondragover = function(evt) 21 { 22 // 取消事件的默认行为 23 return false; 24 } 25 document.ondrop = function(evt) 26 { 27 source.style.position = "absolute"; 28 source.style.left = evt.pageX + "px"; 29 source.style.top = evt.pageY + "px"; 30 // 取消事件的默认行为 31 return false; 32 } 33 </script> 34 </body> 35 </html>
下面的页面实现了一个允许通过拖放来添加、删除“ 收藏夹”的功能。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 6 <title> 通过拖放实现添加、删除 </title> 7 <style type="text/css"> 8 div>div{ 9 display: inline-block; 10 padding: 10px; 11 background-color: #aaa; 12 margin: 3px; 13 } 14 </style> 15 </head> 16 <body> 17 <div style="600px;border:1px solid black;"> 18 <h2>可将喜欢的项目拖入收藏夹</h2> 19 <div draggable="true" ondragstart="dsHandler(event);">疯狂Java联盟</div> 20 <div draggable="true" ondragstart="dsHandler(event);">疯狂软件教育</div> 21 <div draggable="true" ondragstart="dsHandler(event);">关于我们</div> 22 <div draggable="true" ondragstart="dsHandler(event);">疯狂成员</div> 23 </div> 24 <div id="dest" 25 style="400px;height:260px; 26 border:1px solid black;float:left;"> 27 <h2 ondragleave="return false;">收藏夹</h2> 28 </div> 29 <img id="gb" draggable="false" src="garbagebin.png" 30 alt="垃圾桶" style="float:left;"/> 31 <script type="text/javascript"> 32 var dest = document.getElementById("dest"); 33 // 开始拖动事件的事件监听器 34 var dsHandler = function(evt) 35 { 36 // 将被拖动元素的innerHTML属性值设置成被拖动的数据 37 evt.dataTransfer.setData("text/plain" 38 , "<item>" + evt.target.innerHTML); 39 } 40 dest.ondrop = function(evt) 41 { 42 var text = evt.dataTransfer.getData("text/plain"); 43 // 如果该text以<item>开头 44 if (text.indexOf("<item>") == 0) 45 { 46 // 创建一个新的div元素 47 var newEle = document.createElement("div"); 48 // 以当前时间为该元素生成一个唯一的ID 49 newEle.id = new Date().getUTCMilliseconds(); 50 // 该元素内容为“拖”过来的数据 51 newEle.innerHTML = text.substring(6); 52 // 设置该元素允许拖动 53 newEle.draggable="true"; 54 // 为该元素的开始拖动事件指定监听器 55 newEle.ondragstart = function(evt) 56 { 57 // 将被拖动元素的id属性值设置成被拖动的数据 58 evt.dataTransfer.setData("text/plain" 59 , "<remove>" + newEle.id); 60 } 61 dest.appendChild(newEle); 62 } 63 64 } 65 // 当把被拖动元素“放”到垃圾桶上时激发该方法。 66 document.getElementById("gb").ondrop = function(evt) 67 { 68 var id = evt.dataTransfer.getData("text/plain"); 69 // 如果id以<remove>开头 70 if (id.indexOf("<remove>") == 0) 71 { 72 // 根据“拖”过来的数据，获取被拖动的元素 73 var target = document.getElementById(id.substring(8)); 74 // 删除被拖动的元素 75 dest.removeChild(target); 76 } 77 } 78 document.ondragover = function(evt) 79 { 80 // 取消事件的默认行为 81 return false; 82 } 83 document.ondrop = function(evt) 84 { 85 // 取消事件的默认行为 86 return false; 87 } 88 </script> 89 </body> 90 </html>