乐趣区

H5归纳

写在前面 — 需要提前了解的

这是写给自己的归纳
HTML5 介绍

  • 新的特性

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 videoaudio 元素
    • 本地离线存储 的更好的支持
    • 新的特殊内容元素,比如 article、footer、header、nav、section
    • 新的表单控件,比如 calendar、date、time、email、url、search

HTML5 浏览器兼容性兼容性

  • Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

        // 国外
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        // 国内
        <!--[if lt IE 9]>
          <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
  • 你可以让一 些较早的浏览器 (不支持 HTML5) 支持 HTML5(你可以 “ 教会 ” 浏览器处理 “ 未知 ” 的 HTML 元素)。

    // 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block
    
    
    header, section, footer, aside, nav, main, article, figure {display: block;}
    
    

HTML5 新元素

  • <canvas> 新元素

    • <canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

      • 浏览器支持 IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。
  • 新多媒体元素

    • HTML DOM Audio 对象
      做了一个简单的音乐播放器
    • <audio> 播放声音文件或者音频流。

      浏览器支持 IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。<audio controls>
             <source src="horse.ogg" type="audio/ogg">
             <source src="horse.mp3" type="audio/mpeg">
             您的浏览器不支持 audio 元素。</audio>
      


    • <video> 定义视频,比如电影片段或其他视频流。

      Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。<video src="movie.ogg" controls="controls">
       您的浏览器不支持 video 标签。</video>


    • <source> 标签为媒体元素(比如 <video> 和 <audio>)定义媒体资源

      • IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <source> 标签
      • 标签允许您规定两个视频 / 音频文件 共浏览器根据它对媒体类型或者编解码器的支持 进行选择
    • <embed> 标签定义了一个容器,用来嵌入外部应用或者互动程序(插件)

       所有主流浏览器都支持 <embed> 标签。<embed src="helloworld.swf">
    • <track> 标签为媒体元素(比如 <audio> and <video>)规定外部文本轨道

       IE 10、Opera 和 Chrome 浏览器支持 <track> 标签。带有两个字幕轨道的视频:<video width="320" height="240" controls>
           <source src="forrest_gump.mp4" type="video/mp4">
           <source src="forrest_gump.ogg" type="video/ogg">
           <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
           label="English">
           <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
           label="Norwegian">
       </video>
      
      
  • 新表单元素

    • <keygen>、<output>但是由于不支持 IE, 兼容性不好,就不说了。
    • <datalist> 标签规定了 <input> 元素可能的选项列表(搜索自动匹配)。
  <datalist> 标签被用来在为 <input> 元素提供 "自动完成" 的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。<input list="browsers">
            <datalist id="browsers">
              <option value="Internet Explorer">
              <option value="Firefox">
              <option value="Chrome">
              <option value="Opera">
              <option value="Safari">
            </datalist>
            请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
  • HTML5 新的语义和结构元素

    • <article> 定义页面独立的内容区域。
    • <aside> 定义页面的侧边栏内容。
    • <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
    • <command> 定义命令按钮,比如单选按钮、复选框或按钮
    • <details> 用于描述文档或文档某个部分的细节
    • <dialog> 定义对话框,比如提示框
    • <summary> 标签包含 details 元素的标题
    • <figure> 规定独立的流内容(图像、图表、照片、代码等等)。
    • <figcaption> 定义 <figure> 元素的标题
    • <footer> 定义 section 或 document 的页脚。
    • <header> 定义了文档的头部区域
    • <mark> 定义带有记号的文本。
    • <meter> 定义度量衡。仅用于已知最大和最小值的度量。
    • <nav> 定义导航链接的部分。
    • <progress> 定义任何类型的任务的进度。
    • <ruby> 定义 ruby 注释(中文注音或字符)。
    • <rt> 定义字符(中文注音或字符)的解释或发音。
    • <rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
    • <section> 定义文档中的节(section、区段)。
    • <time> 定义日期或时间。
    • <wbr> 规定在文本中的何处适合添加换行符。【所有主流浏览器都支持 <wbr> 标签,除了 Internet Explorer。】

HTML5 Canvas

  • w3school Canvas 教程

HTML5 SVG

  • Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
  • w3school SVG 教程

HTML5 Web Worker

w3school Web Worker 教程

HTML 5 Web 存储

简介 :之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递, 这使得 cookie 速度很慢而且效率也不高

  • localStorage – 没有时间限制的数据存储. 第二天、第二周或下一年之后,数据依然可用。

    <script type="text/javascript">
        localStorage.lastname="Smith";
        document.write(localStorage.lastname);
    </script>
  • sessionStorage – 针对一个 session 的数据存储. 当用户关闭浏览器窗口后,数据会被删除。

    <script type="text/javascript">
        sessionStorage.lastname="Smith";
        document.write(sessionStorage.lastname);
    </script>

HTML 5 应用程序缓存 Application Cache

  • Application Cache

HTML5 引入了应用程序缓存技术 ,意味着 web 应用可进行缓存,并 在没有网络的情况下使用 ,通过创建 cache manifest 文件,可以 轻松的创建离线应用
Application Cache 带来的三个优势是:

  • 离线浏览
  • 提升页面载入速度
  • 降低服务器压力

而且主要浏览器 (除了 Internet Explorer) 皆以支持 Application Cache,就算不支持也不会对程序造成什么影响。

HTML 5 服务器发送事件

  • 服务器发送事件
退出移动版