html5: 新特性（一）

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>