zoukankan      html  css  js  c++  java
  • HTML5 新元素总结

    1.H5新元素兼容问题

    a.旧版本的浏览器正确显示这些元素,可以设置 CSS 的 display 属性值为 block

    b.

    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

    注意:国内用户请使用百度静态资源库(Google 资源库在国内不稳定):

    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    html5shiv.js 引用代码必须放在  <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

    2.H5定了新的元素

    a.新元素

      canvas:基于javascript的绘图api,定义图形,图表和其他图像

    b.新媒体元素

      audio:定义音频内容

      video:定义视频内容

    <video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    您的浏览器不支持 video 标签。 
    </video>

      source:定义多媒体资源video和audio

    <audio controls> 
      <source src="horse.ogg" type="audio/ogg"> 
      <source src="horse.mp3" type="audio/mpeg"> 
      您的浏览器不支持 audio 元素。 
    </audio>

      embed:定义嵌入的内容如插件 <embed src="helloworld.swf">(被嵌入的flash动画)

      track:为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。例如中英文切换

    <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> 

    c.新表单元素

      datalist:与input配合使用,为input添加可选的下拉选项datalist中描述了其可能的值

    <input list="browsers"> 
    
    <datalist id="browsers"> 
      <option value="Internet Explorer"> 
      <option value="Firefox"> 
      <option value="Chrome"> 
      <option value="Opera"> 
      <option value="Safari"> 
    </datalist>

    3.web存储

      localStorage:没有时间限制的数据存储

      sessionStorage:针对一个对话的数据存储

      使用前应该先检测浏览器是否支持:

    if(typeof(Storage)!=="undefined")
       {
       // 是的! 支持 localStorage  sessionStorage 对象!
       // 一些代码.....
       }
     else
       {
       // 抱歉! 不支持 web 存储。
       }

    不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

      • 保存数据:localStorage.setItem(key,value);
      • 读取数据:localStorage.getItem(key);
      • 删除单个数据:localStorage.removeItem(key);
      • 删除所有数据:localStorage.clear();
      • 得到某个索引的key:localStorage.key(index);

    注意:key值为字符串形式

  • 相关阅读:
    记一道乘法&加法线段树(模版题)
    2021CCPC网络赛(重赛)题解
    Codeforces Round #747 (Div. 2)题解
    F. Mattress Run 题解
    Codeforces Round #744 (Div. 3) G题题解
    AtCoder Beginner Contest 220部分题(G,H)题解
    Educational Codeforces Round 114 (Rated for Div. 2)题解
    Codeforces Global Round 16题解
    Educational Codeforces Round 113 (Rated for Div. 2)题解
    AtCoder Beginner Contest 182 F
  • 原文地址:https://www.cnblogs.com/gutianer/p/8031415.html
Copyright © 2011-2022 走看看