HTML5 新特性

159 阅读6分钟

1.用于绘画的canvas元素

2.用于媒介回放的video和audio元素

video,audio标签
属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
preload load;auto - 当页面加载后载入整个视频meta - 当页面加载后只载入元数据none - 当页面加载后不载入视频 如果出现该属性,则视频在页面加载时进行加载,并预备播放如果使用 "autoplay",则忽略该属性
src 要播放的视频的 URL
height px 设置视频播放器的高度
width px 设置视频播放器的宽度

video、audio-方法、属性以及事件

方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort:在退出时运行的脚本
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width

3.对本地离线存储的更好的支持

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本
   1.什么是应用程序缓存(Application Cache)?
    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问
    优势:
        离线浏览 - 用户可在应用离线时使用它们
        速度 - 已缓存资源加载得更快
        减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

4.新的特殊内容元素,比如 article,footer,header,nav,section

5.新的表单控件,比如 calendar,date,time,email,url,search

6.拖放:抓取对象以后拖到另一个位置

1.使元素可拖动,把draggable属性设置为true
2.拖动什么-ondragstart 和setData()
3.放到何处-ondragover
4.进行放置 - ondrop
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }
        
        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
    </head>
    <body>
    
    <div id="div1" ondrop="drop(event)"
    ondragover="allowDrop(event)"></div>
    <img id="drag1" src="img_logo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69" />

7.SVG:可伸缩矢量图形

    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    SVG 用于定义用于网络的基于矢量的图形
    SVG 使用 XML 格式定义图形
    SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    SVG 是万维网联盟的标准

8.SVG的优势

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

9.Canvas 与SVG的比较 Canvas:

    依赖分辨率
    不支持事件处理器
    弱的文本渲染能力
    能够以 .png 或 .jpg 格式保存结果图像
    最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG:

    不依赖分辨率
    支持事件处理器
    最适合带有大型渲染区域的应用程序(比如谷歌地图)
    复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
    不适合游戏应用 
I

10.地理定位 (Geolocation API)

11.Web存储

    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个session的数据存储,用户关闭浏览器窗口后,数据会被删除
    cookie-不适合大量数据的存储
    三者之间的区别:
    1、数据有效期不同
        sessionStorage:仅在当前浏览器窗口关闭之前有效;
        localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
        cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
    2、数据功能不能
        cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下
    3、存储大小限制也不同
        cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。
        sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
    4、作用域不同
        sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;
        localstorage:在所有同源窗口中都是共享的;
        cookie:也是在所有同源窗口中都是共享的;
    5、web Storage(sessionStorage,localstorage)支持事件通知机制,可以将数据更新的通知发送给监听者
    6、web Storage的api接口使用更方便

        sessionStorage与localStorage的用法一致:
        
        window.sessionStorage.clear(all);
        
        window.sessionStorage.removeItem(key);
        
        window.sessionStorage.setItem(key, value);
        
        window.sessionStorage.getItem(key)
        
        cookie用法:
        
        $.cookie(key);
        
        $.cookie(key,value);

12.Web Workers

    运行在后台的JavaScript,不会影响页面的性能
    Web Workets无法访问windowd对象,document对象,parent对象
    Web Workers 的使用
    
    ```
    // workers.js
    var i=0;

        function timedCount()
            {
            i=i+1;
            postMessage(i);    //用于向HTML页面传回一段消息
            setTimeout("timedCount()",500);
            }
        
        timedCount();
    ```
    
    ```
    <html>
        <body>
        
        <p>Count numbers: <output id="result"></output></p>
        <button onclick="startWorker()">Start Worker</button>
        <button onclick="stopWorker()">Stop Worker</button>
        <br /><br />
        
        <script>
        var w;
        
        function startWorker()
        {
        if(typeof(Worker)!=="undefined")  //检测是否存在worker
        {
          if(typeof(w)=="undefined")
            {
            w=new Worker("demo_workers.js");  //创建Web Worker
            }
          w.onmessage = function (event) {  //事件监听器: 当web worker 传递消息时,会执行事件监听器中的代码
           document.getElementById("result").innerHTML=event.data;
          };
        }
        else
        {
        document.getElementById("result").innerHTML="Sorry, your browser
         does not support Web Workers...";
        }
        }
        
        function stopWorker()
        {
        w.terminate();   //终止web worker
        }
        </script>
        
        </body>
    </html>
    ```

13.服务器发送事件

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新
    1.Server-Sent事件 - 单向消息传递
    2.Server-Sent事件指的时网页自动获取来自服务器的更新
    3.EventSource 对象用于接收服务器发送事件通知
    
    ```
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
      {
      document.getElementById("result").innerHTML+=event.data + "<br />";
      };
    ```
    1.创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
    2.每接收到一次更新,就会发生 onmessage 事件
    3.当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
    
    服务器端
    1.把报头 "Content-Type" 设置为 "text/event-stream"
    2.规定不对页面进行缓存
    3.输出发送日期(始终以 "data: " 开头)
    4.向网页刷新输出数据