学习HTML5

HTML5中的新特性：

• 用于绘画的canvas元素
• 用于媒介回放的video和audio元素
• 对本地离线存储的更好的支持
• 新的元素：article、footer、hearder、nav、section、aside、figure、mark、progress、menu、command、source
• 新的表单控件：calender、date、time、email、url、search

1.HTML5 canvas 

<canvas id="my_canvas" width="200" height="200"></canvas>

<canvas>元素用于图形的绘制，默认情况下<canvas>是没有边框和内容的，它本省是没有绘图能力的，所有绘制工作必须在Javascript内部完成

2.HTML5 SVG

SVG定义为可缩放矢量图形，用于定义用于网格的基本矢量图形，使用XML格式定义图形

SVG图像在放大或改变尺寸的情况下其图形质量不会有损坏

SVG优势：

• SVG图像可通过文本编辑器来创建和修改
• SVG图像可被搜索、索引、脚本化或压缩
• SVG是可伸缩的
• SVG图像可在任何的分辨率下被高质量地打印
• SVG可在图像质量不下降的情况下被放大

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<svg>

 SVG与Canvase两者间的区别

svg是一种使用XML描绘2D图形的语言

canvas通过Javascript来绘制2D图形

svg基于XML，这意味着svg dom中的每个元素都是可用的，你可以为某个元素附加Javascript事件处理器

在svg中，每个被绘制的图形均被视为对象。如果svg对象的属性发生变化，那么浏览器能够自动重现图形

canvas是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

3.HTML5 拖放

    <script>
        function drag(ev) { //被拖动的数据，设置被拖数据的数据类型和值
            // 第一个参数为携带数据的数据种类的字符串，只能填入类 似“text/plain”或“textml”的表示 MIME类型的文字
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function allowDrop(ev) {
            // 调动preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接形式打开）
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="/images/01.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

 设置元素可拖动：draggable="ture"

4. HTML5 地理定位 Geolocation

Geolocation：用于获取用户的地理位置

获取用户位置：getCurrentPosition()：第一个参数获取经纬度；第二个参数用于处理错误

    <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
    <button onclick="getLocation()">点我</button>
    <script>
        var x = document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = "该浏览器不支持定位。";
            }
        }

        function showPosition(position) {
            x.innerHTML = "纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude;
        }
        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "用户拒绝对获取地理位置的请求。"
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "位置信息是不可用的。"
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "请求用户地理位置超时。"
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "未知错误。"
                    break;
            }
        }
    </script>

5.HTML5 video（视频）和 audio（音频）

<video width="320" height="240" controls autoplay >
    <source src="movie.mp4"></source>
    <source src="movie.ogg"></source>
</vodeo>

<audio controls>
    <source src="horse.ogg" type="audio/ogg"></source>
    <source src="horse.mp3" type="audio/mpeg"></source>
</audio>

 <source></source>标签为媒体元素定义媒体资源，允许规定两个视频/音频文件供浏览器格局它对媒体类型或者编码器的支持进行选择

video元素支持三种视频格式：

• MP4：带有H.264视频编码和AAC音频编码的MPEG4文件
• webM：带有VP8视频编码和Vorbis音频编码的WebM文件
• Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件

 video和audio的属性和属性值：

属性/值	描述
autoplay	自动播放
controls	向用户显示控件，比如播放按钮
loop	循环播放
muted	静音播放
poster=“url”	规定视频正在下载时显示的图像
preload=“auto/metadata/none”	页面加载时进行加载，并预备播放，如果使用autoplay，则忽略该属性
src=“url”	视频或音频的地址

6.HTML5新增input元素的类型和表单元素

html表单：HTML表单_weixin_47940048的博客-CSDN博客

 HTML5新增input元素的类型:

type="color"：用于选取颜色

type=“date”：从日期选择器中选择一个日期

type=“datetime”：选择一个日期和时间（本地时间）

type="datetime-local"：选择一个无时区的日期和时间

type=“email”：输入email，会判断是否合法有效

type="month"：选择月份

type="number"：输入数字 

        min：规定允许的最小值        max：规定允许的最大值

        maxlength：规定输入字段的最大字符长度

<input type="number" name="num" min="1" max="9" maxlength="11" />

type="range"：用于应该包含一定范围内数字值得输入域，显示为滑动条，类似于滑块控制

        min：规定允许得最小值        max：规定允许得最大值

        step：规定合法得数字间隔        value：规定默认值

<input type="range" name="points" min="1" max="100" value="60" />

type=“search”：搜索域

type="tel"：输入电话号码字段

type="time"：选择时间

type="url"：输入url地址

type="week"：选择周和年

autofocus：域自动获取焦点

multiple：可选择多个值

placeholder=“”：描述输入域的值，跟value的区别在于字体颜色比较浅

<input type="search" name="sech" placeholder="电脑">

required：规定在提交之前输入域不能为空 

step=""：输入域规定合法的数字间隔，如果step="3",则合法数是 -3、0、3、6等

HTML5新增的表单元素

1.规定输入域的选项列表：<datalist></datalist>

<input list="browser" />
<datalist id="browser">
    <option value="芒果"></option>
    <option value="西瓜"></option>
    <option value="荔枝"></option>
</datalist>

2.提供一种验证用户的可靠方法：<keygen>

 keygen标签规定用于表单的密钥对生成器字段，当提交表单时，会生成两个健，一个是私钥，一个是公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书

3.不同类型的输出：<output></output>