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值为字符串形式

  • 相关阅读:
    ASP.Net Core -- 模型验证
    C# -- nameof什么意思?
    C# -- value是什么意思?
    C# -- 异常(二)
    C# -- 异常(一)
    C# -- 委托(二)
    C# -- 委托(一)
    ASP.Net Core -- Controller返回View
    ASP.Net Core -- 中间件
    ASP.Net Core -- 服务注册和管道
  • 原文地址:https://www.cnblogs.com/gutianer/p/8031415.html
Copyright © 2011-2022 走看看