关于HTML5 你需要了解的一些新特新

HTML5的一些新特性：

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

常用的一些HTML5新标签

• HTML5 - 标签

<video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls" width="320px" height="240px" loop="loop" autoplay="autoplay">
对不起，您的浏览器不支持video标签
</video>


// controls:  用户显示控件，比如播放按钮。
// width height： 显示视频的宽高
// autoplay ： 设置视频就绪后播放
// loop: 循环播放

HTML5 元素同样拥有方法、属性和事件。

//同时用到两个属性  play()  pause(),修改视频播放状态
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

//动态修改视频大小
function makeBig()
{ 
myVideo.width=560; 
} 

• HTML5 - 标签

<audio src="https://www.w3school.com.cn/i/song.ogg" controls="controls">
    对不起，您的浏览器不支持audio标签
 </audio>


// controls:  用户显示控件，比如播放按钮。
// autoplay ： 设置视频就绪后播放
// loop: 循环播放

常用的一些HTML5新特性

localStorage 和 sessionStorage 的区别和使用

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

• localStorage 方法（本地存储）

  • 特点
    localStorage 方法存储的数据没有时间限制。第二天，下一周或者下一年，依旧可以使用。
  • 使用（利用JSON提供的parse 和 stringify 方法将其他数据类型转化为字符串，在存储到storage中就可以了）
    注意：如果不使用JSON.stringify()进行转化，那么拿到的数据会是[Object Object]类型。

      <!-- 存 -->
      var obj = {
          name:"xiaokang",
          age:18
      }
  
      localStorage.setItem("userInfo",JSON.stringify(obj));
  
      <!-- 取 -->
      var user = JSON.parse(localStorage.getItem("userInfo"));
  
      <!-- 删除 -->
      localStorage.remove("userInfo");
  
      <!-- 清空 -->
      localStorage.clear()
  

• sessionStorage 方法
  sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

  • 特点
    存储的数据当用户关闭浏览器窗口后，数据就会被删除
  • 使用（利用JSON提供的parse 和 stringify 方法将其他数据类型转化为字符串，在存储到storage中就可以了）
    注意：如果不使用JSON.stringify()进行转化，那么拿到的数据会是[Object Object]类型。

         var obj = {
        name:'kjh',
        age:19
    }
    //存储
     sessionStorage.setItem("userInfo",JSON.stringify(obj));
     sessionStorage.setItem("id",'123');
    
    
    //取出
    console.log(JSON.parse(sessionStorage.getItem("userInfo")))
    console.log(JSON.parse(sessionStorage.getItem("id")))
    
    //删除
    sessionStorage.removeItem('id');
    
    //清空
    sessionStorage.clear();
    
    

• HTML5新的表单控件（calendar, date, time ,email, url, search）检测email url 输入

• HTML5 新标签的介绍

    <address> : 定义文档作者或拥有者的联系信息
    <canavas> : 绘制图形
    <nav> : 定义导航标签
    <header> : 文档头部
    <footer> : 文档尾部
    <dialog> : 对话框