zoukankan      html  css  js  c++  java
  • html5新增特性

    一、新增特性:

    1. 绘画 canvas;
    2. 本地离线存储 localStorage    长期存储数据,浏览器关闭后数据不丢失;
    3. sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage
    4. 用于媒介回放的 video和 audio 元素;
    5. 语意化更好的内容元素,比如article、footer、header、nav、section;

        section:定义文档中的一个章节

          nav:定义只包含导航链接的章节

                    header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

                    footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

                    aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。

    1. 表单控件,calendar、date、time、email、url、search;
    2. 新的技术webworker(专用线程)
    3. websocketsocket通信
    4. Geolocation 地理定位
    5. 应用程序缓存(离线缓存技术)

       即在第一次加载后将数据缓存,在没有清除缓存的前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用。

       当然,html5新的特性不是所有浏览器都能支持的,离线缓存也一样。反正IE9及以下的浏览器目前是不支持的,如果用在移动端,应该都能支持。检测是否支持离线缓存也比较简单:

    if(window.applicationCache){
         alert('支持离线缓存');
    }
    else{
        alert('不支持离线缓存');
    }

      应用缓存是从浏览器的缓存中分出来的一块缓存区,想要在这个缓存区保存数据,可以使用一个描述文件(manifest file)列出要下载和缓存的资源。

      应用程序缓存为应用带来了三个优势:

      (1)离线浏览---用户可以在应用离线时使用它们

      (2)速度---------已缓存资源加载得更快

      (3)减少服务器负载------浏览器将只从服务器端下载更新过的资源。、

       实现HTML5应用程序缓存只需三步:

      (1)创建一个cache.manifest文件,并确保文件具有正确的内容;

    CACHE MANIFEST
    #version1
    CACHE:
    index.html
    -----------------------------------------
    
    说明:
    //第一行“CACHE MANIFEST”把本文件的作用告知浏览器,即对本地缓存中的资源文件进行具体设置。
    //注释行以“#”开头
    //CACHE之后列出我们需要缓存的文件

      (2)在服务器上设置文件类型; 

        让服务器支持text/cache-manifest这个MIME类型(在h5中规定manifest文件的MIME类型是text/cache-manifest),

        例如对Apache服务器进行配置的时候,需要找到{apache_home}/conf/mime.type这个文件(.htaccess)

      (3)所有的HTML文件都指向cache.manifest。

    <html manifest="/cache.manifest">

    应用缓存的applicationCache对象,这个对象有一个status属性,属性的值为常量,用于表示应用缓存的当前状态。

      0:无缓存,即没有与页面相关的应用缓存

      1:闲置,即应用缓存未得到更新

      2:检查中,即正在下载描述文件并检查更新

      3:下载中,应用缓存正在下载描述文件中指定的资源

      4:更新完成,即应用缓存已经更新了资源,而且所有资源都已经下载完毕,可以通过swapCache()来使用了。

      5:废弃,即应用缓存的描述文件已经不存在了,因此页面无法在访问应用缓存

    应用缓存还有很多相关的事件,表示其状态的改变。

      checking:在浏览器为应用缓存查找更新时触发;

      error:在检查更新或下载资源期间发生错误时触发;

      noupdate:在检查描述文件发现这个文件无变化时触发;

      downloading:在开始下载应用缓存资源时触发;

      progress:在文件下载应用缓存的过程中持续不断地触发;

      updateready:在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发;

      cached:在应用缓存完整可用时触发

    一般这些事件会随着页面的加载按上述顺序依次触发,不过调用update()方法也可以手工干预,让应用缓存为检查更新而触发上述事件。

      applicationCache.update();

    如果触发了updateready事件,则说明新版本的应用缓存已经可用,而此时需要调用swapCache()来启动新应用缓存。

      applicationCache.swapCache();

    如何判断在线还是离线状态?

    使用离线应用,浏览器必须能知道设备能否访问网络,通过navigator.onLine属性来检测设备是在线还是离线的,对应的值为true或false,但是不同浏览器表现并不一致。

    二、移除的元素

    a. 纯表现的元素:basefont,big,center, s,strike,tt,u;

    b. 对可用性产生负面影响的元素:frame,frameset,noframes;

    怎么区分HTML与HTML5?

    1.在文档类型声明上

    在文档声明上,html有很长的一段代码,并且很难记住这段代码,而html5却不同,只有简简单单的声明,这也方便人们的记忆。

    html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">


    html5:<!doctype html>

    2.在结构语义上
    html:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
    html5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>。

  • 相关阅读:
    JAVA软件工程师应该具备哪些基本素质?
    java编程题(一)
    js继承之Object.create()
    【3D计算机图形学】变换矩阵、欧拉角、四元数
    JS的get和set使用示例
    深入浅析JavaScript中的constructor
    图片预加载之模拟img.load()
    threejs里面的vector3源码解析
    javascript事件轮询
    关于URL编码的一些结论
  • 原文地址:https://www.cnblogs.com/xiaoan0705/p/8612094.html
Copyright © 2011-2022 走看看