H5归纳

64次阅读

共计 3385 个字符，预计需要花费 9 分钟才能阅读完成。

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

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

  • 新的特性

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对 本地离线存储 的更好的支持
    • 新的特殊内容元素，比如 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 服务器发送事件

  • 服务器发送事件

正文完
html5
发表至：无分类
2019-05-07
 0