HTML5新特性

    <video width="100px" height="100px" autoplay>
        <source src="vai/movie.ogg" type="video/ogg">
        <source src="vai/movie.mp4" type="video/mp4">
    </video>

    <audio src="vai/song.mp3" controls></audio>

    <div ondrop="drop()" ondragover="allowDrop()">
        <imgsrc="vai/w3c.gif" draggable="true" ondragstart="drag()" id="drag1" />  /* 这里我就无能为力了，简书会把我的img替换成它的图片格式，为了防止自动转化，我把img和src中间空格去了 */
    </div>
    <div ondrop="drop()" ondragover="allowDrop()"></div>

    <script type="text/javascript">
        function allowDrop() {
            event.preventDefault();
        }
        function drag() {
            event.dataTransfer.setData("***", event.target.id);  /* 在这个例子中, 数据类型是 "***", 值是可拖动元素的 id ("drag1") */
        }
        function drop() {
            event.preventDefault();  /* 避免浏览器对数据的默认处理 (drop 事件的默认行为是以链接形式打开) */
            var data = event.dataTransfer.getData("***");   
            /* 通过 event 的 dataTransfer.getData() 方法传入数据类型 "***", 获得可拖动数据元素 id ("drag1") */
            event.target.appendChild(document.getElementById(data));   /* 把被拖元素追加到放置元素 (目标元素) 中 */
        }
    </script>

    <canvas id="myCanvas"  width="400" height="200" style="border:1px solid #c3c3c3;">
        坐标原点 (0, 0) 从左上角开始, 宽代表 x 轴, 高代表 y 轴
    </canvas>   
    
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");  /* getContext("2d") 对象是内建的 HTML5 对象, 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 */   
        // 画矩形
        cxt.fillStyle = "#FFFF00";    /* 矩形的背景颜色, 默认为黑色 */
        cxt.fillRect(0,0,250,150);  /* 矩形坐标, 在画布上绘制 150x75 的矩形，从左上角开始 (0, 0) */
        // 画路径 
        cxt.moveTo(10,10);    /* 起点 */
        cxt.lineTo(150,50);  /* 第一个连接点 */
        cxt.lineTo(10,50);  /* 第二个连接点 */
        cxt.strokeStyle = "blue";  /* 颜色 */
        cxt.stroke();  /* stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色 */
        // 画圆形
        cxt.fillStyle = "#FF0000";  /* 圆形背景 */
        cxt.beginPath();
        cxt.arc(125,75,15,0,Math.PI*2,true);  /* 圆心 (x, y)、半径、起始角、结束角、逆时针 (false为顺时针) */
        cxt.closePath();
        cxt.fill();  /* 圆形填充 */
        // 画渐变色
        var grd = cxt.createLinearGradient(0,100,175,50);  /* 渐变开始点(x, y) 渐变结束点(x, y) */
        grd.addColorStop(0,"#000000");   /* 渐变开始颜色 */
        grd.addColorStop(1,"#FFFFFF");  /* 渐变结束颜色 */
        cxt.fillStyle = grd;
        cxt.fillRect(0,100,175,50);
        // 把一副图像放在画布上 (Chrome不支持)
        var img = new Image();
        img.src = "vai/1.png";
        cxt.drawImage(img,200,100);
    </script>

    <div id="result"></div>
    <script>
        // localStorage 和 sessionStorage 的存储与访问
        if (typeof Storage !== "undefined") {
            localStorage.setItem("firstname", "Bill");   /* 存储, 或者 localStorage.lastname="Gates"; */
            sessionStorage["lastname"] = "Gates";
            document.getElementById("result").innerHTML = localStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
        } else {
            document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
        }
        // localStorage 计数功能, 关闭浏览器数据不丢失
        if (localStorage.pagecount) {   
            localStorage.pagecount=Number(localStorage.pagecount) +1;  // 建立的是 String 类型
        }
        else {    // 如果没有该对象属性, 则创建
            localStorage.pagecount=1;
        }
            document.write("Visits "+ localStorage.pagecount + " time(s).");
        // sessionStorage 方法与 localStorage 用法相同
    </script>

    <form action="" method="get">
        Email: <input type="email" name="email" />
        <!-- numner 出现 1~10 的选择框, 和 range 用法相同 (会出现滑动条); step 属性规定合法的数字间隔, 只能选择 1、4、7、10 -->
        Points: <input type="number" name="point" min="1" max="10" step="3" />   <!-- 规定了 name 属性后点击提交, 值会出现在 url 框中 -->
        Date: <input type="date" name="date" />
        Time: <input type="time" name="time" />
        DateTime: <input type="datetime-local" name="datetime-local" /> <!-- 设置日期加时间 (本地时间) -->
        Color: <input type="color" name="color" value="#ff00ff" />  <!-- 默认在输入框中为黑色 -->
        <input type="submit" /> 
    </form>

    Webpage: <input type="url" list="url_list" name="link" />  <!-- 必须通过 input 的 list 属性引用 datalist 标签的 id -->
    <datalist id="url_list">  
        <option label="W3School" value="http://www.W3School.com.cn" />  <!-- [注] 与 select 中的 option 用法不一样 (select 中 option 要闭合) -->
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>

    <!-- input 属性 -->
    期待输入(灰色): <input type="search" name="user_search"  placeholder="Search W3School" /> <br>
    多文件上传: <input type="file" name="mulfile" multiple="multiple" /> <br>
    自动获焦: <input type="text" name="user_name"  autofocus="autofocus" /> <br>
    必填字段: <input type="text" name="usr_name" required="required" /> <br>
    正则判断: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> <br> <!-- 出错会显示title信息 -->
    <!-- form 属性 -->
    <form action="" method="get" id="user_form">
        First name: <input type="text" name="fname" />
        <input type="submit" />
    </form>
    Last name: <input type="text" name="lname" form="user_form" />  <!-- 利用 input 的 form 属性引用表单的 id 使 input 仍然位于该表单之中 -->

    <p id="demo"> 点击这个按钮, 获得您的位置: </p>
    <button onclick="getLocation()">试一下</button>
    <div id="mapholder"></div>
    <script>
        var x=document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
                /* 如果 getCurrentPosition() 运行成功, 则向参数 showPosition 中规定的函数返回一个 coordinates 对象 */
                navigator.geolocation.getCurrentPosition(showPosition,showError);  /* 参数为两个回调函数 (函数名, 不加括号) */
            }
            else{
                x.innerHTML="Geolocation is not supported by this browser.";
            }
        }
        function showPosition(position) {
            var latlon=position.coords.latitude+","+position.coords.longitude; /* 维度、经度*/
            var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false"; /* 谷歌地图 */
            document.getElementById("mapholder").innerHTML = "<imgsrc='"+img_url+"' />";  /* 将谷歌地图的链接加入图片的路径中 */
        }
        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML="User denied the request for Geolocation."
                break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML="Location information is unavailable."
                break;
                case error.TIMEOUT:
                    x.innerHTML="The request to get user location timed out."
                break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML="An unknown error occurred."
                break;
            }
        }
    </script>

    Count numbers: <output id="res"></output><br>
    <button onclick="startWorker()">Start Worker</button>
    <button onclick="stopWorker()">Stop Worker</button>
    <br />
    <script>
        var w;
        function startWorker() {
            if(typeof Worker !== "undefined") {
                if(typeof w =="undefined") {
                    w=new Worker("js/timeCount.js");  /* 创建 Worker 对象 */
                    // w.postMessage("hello");     /* 向worker发送数据, 模拟双线程 */
                    w.onmessage = function (evt) {   /* 当 web worker 传递消息时，会执行事件监听器中的代码 */
                        document.getElementById("res").innerHTML=evt.data; /* 从 timeCount.js 收到的数据*/
                    /* [注] event可传参,也可以不传参 */
                    };
                }
            }
            else {
                document.getElementById("res").innerHTML="Sorry, your browser does not support Web Workers..."; 
            }
        }
        function stopWorker() { 
            w.terminate();  /* 终止 web worker, 并释放浏览器/计算机资源, 请调用 terminate() 方法 */
        }
    </script>

var i=0;
function timeCount() {
    i=i+1;
    postMessage(i);   /* postMessage() 方法向主线程发送数据 */
    setTimeout(timeCount,500);  /* 或 setTimeout("timeCount()",500); */
    timeCount();
}
timeCount();  /* 一定要调用函数执行 */

// 模拟双线程的用法

// onmessage = function (evt){
//   var p = evt.data;  //通过evt.data获得发送来的数据
//   var r = p + " world!!!";
//   postMessage(r);  //将获取到的数据加工后发送回主线程
// }

    <div id="resu"></div>  <!-- id 不能和前面例子的 id 相同 -->
    <script>
        if(typeof EventSource !=="undefined") {
            var source=new EventSource("php/server.php");  /* 创建 EventSource 对象 */
            source.onmessage=function(event) {
                document.getElementById("resu").innerHTML += event.data + "<br />";  /* 获得 php/server.php 发来的数据 */
            };
        }
        else {
            document.getElementById("resu").innerHTML = "抱歉，您的浏览器不支持 server-sent 事件 ...";
        }
    </script>

<?php
    header('Content-Type: text/event-stream');  /* 把报头 "Content-Type" 设置为 "text/event-stream" */
    header('Cache-Control: no-cache');  /* 规定不对页面进行缓存 */

    $time = date('r');
    echo "data: The server time is: ".$time."\n\n";  /* 格式不能变, 以 data: 开头 (data: 不输出), 最后跟两个回车 (回车用 \n, 用 <br> 不通过) */
    flush();
?>