1、HTML5 新元素
HTML5提供了新的元素来创建更好的页面结构：
- <article>: 定义页面独立的内容区域。
- <aside>: 定义页面的侧边栏内容（1、放在article元素中使用，2、全局使用侧边栏）。
- <bdi>: 允许您设置一段文本，使其脱离其父元素的文本方向设置。
- <command>: 定义命令按钮，比如单选按钮、复选框或按钮
- <details>: 用于描述文档或文档某个部分的细节
- <dialog>: 定义对话框，比如提示框
- <summary>: 标签包含 details 元素的标题
- <figure>: 规定独立的流内容（图像、图表、照片、代码等等）
- <ficaption>: 定义 <figure> 元素的标题
- <footer>: 定义 section 或 document 的页脚。
- <header>: 定义了文档的头部区域
- <mark>: 定义带有记号的文本。
- <meter>: 定义度量衡。仅用于已知最大和最小值的度量。
- <nav>: 定义导航链接的部分
- <progress>: 定义任何类型的任务的进度。
- <ruby>: 定义 ruby 注释（中文注音或字符）。
- <rt>: 定义字符（中文注音或字符）的解释或发音
- <rp>: 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
- <section>: 定义文档中的节（section、区段）。
- <time>: 定义日期或时间。
- <wbr>: 规定在文本中的何处适合添加换行符。
主体结构元素：article,section,nav,aside,time
非主体结构元素：header，footer，address
section使用注意事项:
1、不要将section元素作为设置样式的页面容器
2、如果article元素、aside元素、nav元素更符合使用条件，那就不要使用section元素
3、没有标题内容，不要使用section元素
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="app.js"></script> </head> <body> <header> <h1>网页标题</h1> <nav> <ul> <li><a href="">首页</a></li> <li><a href="">帮助</a></li> </ul> </nav> </header> <article> <hgroup> <h1>文章主标题</h1> <h2>文章副标题</h2> </hgroup> <p>正文</p> <section> <div> <article> <h1>评论标题</h1> <p>评论正文</p> </article> </div> </section> </article> <footer> <small>版权内容</small> </footer> </body> </html>
2、HTML5 Canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<canvas id="myCanvas" width="200" height="100"></canvas>
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
3、HTML5 拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
进行放置 - ondrop
4、HTML5 地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="该浏览器不支持获取地理位置。";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
5、HTML5 Audio(音频)、Video(视频)
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
HTML5 规定了一种通过 video 元素来包含视频的标准方法
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>