笔记四：HTML5有哪些新特性

一、新增的语义化更好的标签

1.header,footer,nav,article,aside,section

1. header: 表示页面或一个区域(section)的页眉部分,通常在里面包含h1-h6标签来使用
2. footer: 表示zz页面或一个区域(section)的页脚部分，通常会将网站的证书，许可，版权协议等内容放在这块
3. nav: 主要用于定义页面的导航部分
4. article: 表示的是一个独立完整的内容部分
5. aside标签一般会指定网页的侧边栏部分，友情链接等附注性的东西，类似于广告也可以使用aside标签。
6. section标签表示的是文档中内容的分段部分

2. 语义化标签的优点

• 有利于呈现出良好的内容结构。即使在没有CSS的支持下
• 有利于SEO，语义化标签更有利于搜索引擎确定上下文和各个关键字的权重。
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

二、新增的表单标签

• 新增 邮箱 网址 搜索 日期 时间 星期 数量 范围 电话 颜色 等标签，其目的是为了方便用户实用，包括自带样式、自带校验功能、自带逻辑等等。但是目前各大浏览器的适配想过并不是很好。

    <form action="">

        <!-- type="email"邮箱输入，自带校验格式功能，自带呼出提示样式-->
        <input type="email" name="email">请输入邮箱<br>

        <!-- type="email"网址输入，自带校验格式功能，自带呼出提示样式-->
        <input type="url" name="url">请输入网址<br>

        <!-- type="email"输入，自带校验格式功能，自带呼出提示样式-->
        <input type="number" name="number" >输入数字<br>

        <!-- type="search"搜索框，输入搜索时，自带清楚输入内容按钮-->
        <input type="search" name="search">输入搜索<br>

        <!-- type="date"日期下拉框，其功能比较强大的，比较实用-->
        <input type="date" name="data">选择日期<br>

        <input type="submit"><br>
        
    </form>

三、新增API接口

1. 音频（audio）视频(video) 接口

• src —— 源文件路径/ 源文件网址
• play() —— 播放接口
• pause() —— 暂停接口
• load() —— 视频加载接口

<!-- 新增API接口——audio -->
    <audio id="myAudio"></audio>
    <script>
        var myAudio = document.getElementById('myAudio'); 
        myAudio.src = '../content/audio/海阔天空.mp3';   //音频文件位置接口
        myAudio.play();     							//音频播放接口
        myAudio.pause();     							//音频暂停接口
        myAudio.loop = true;         					//音频循环接口
        myAudio.preload = true;               			//音频提前加载在接口
        myAudio.currentTime								//音频当前播放时间接口
    </script>

    <video id="myVideo"></video>  
    <script>
        var myVideo = document.getElementById('myAudio'); 
        myVideo.src = '../content/myVideo/动物世界.mp4';   //视频文件位置接口
        myVideo.load();     							  //视频加载接口
        myVideo.play();     							  //视频播放接口
        myVideo.pause();                                  //视频暂停接口
    </script>

2. 画布（Canvas）接口

1.canvas标签有什么用

1. HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，开发人员可以控制其每一像素。

2. canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

   <!-- canvas -->
    
   <canvas id="canvas"></canvas>
    
   <!-- javascript -->
    
   <script>
    
   const canvas = document.getElementById('canvas')
    
   const ctx = canvas.getContext('2d')
    
   ctx.fillStyle = 'purple'
    
   ctx.fillRect(0, 0, 300, 150)
    
   </script>
   

2.canvas与svg的区别

1. canvas时h5提供的新的绘图方法，svg已经有了十多年的历史
2. canvas画图基于像素点，放大或缩小会失真，svg基于图形，放大缩小不会失真
3. canvas需要在js中绘制，svg在html正绘制
4. canvas无法对已经绘制的图像进行修改、操作，svg可以获取到标签进行操作

3. 拖拽释放（drag and drop）接口

1.源对象和目标对象

• 源对象：指的是可以用鼠标点击拖拽的一个事物，这里可以是一张图片，一个DIV，一段文本等等
• 目标对象：指的是拖动源对象后移动到的一块区域，我们可以拖拽源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域

2.拖拽释放的七个API接口

• 源对象的API
  • ondragstart：源对象开始被拖动
  • ondrag：源对象被拖动过程中
  • ondragend：源对象被拖动结束
• 目标对象的API
  • ondragenter：目标对象被源对象拖动着进入
  • ondragover：目标对象被源对象拖动着悬停在上方
  • ondragleave：源对象拖动着离开了目标对象
  • ondrop：源对象拖动着在目标对象上方释放/松手

四、新增的两个webStorage

1.localStorage（生命周期—永久性）

var foo = 'bar';
var storage = null;  
if(window.localStorage){              //判断浏览器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
       alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  
       storage.removeItem("name");     //调用removeItem方法，移除数据  
       alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null 
} 

2.sessionStorage（生命周期—基于当前浏览器窗口的）

var foo = 'bar';
var storage = null;  
if(window.sessionStorage){              //判断浏览器是否支持sessionStorage 
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
       alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  
       storage.removeItem("name");     //调用removeItem方法，移除数据  
       alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null 
} 

3.webStorage和cookie的区别：

• 生命周期
  • cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置z有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。
  • localStorage的生命周期是永久的
  • .sessionStorage的生命周期是基于当前浏览器窗口的
• 大小限制
  • cookie大小限制在4KB，非常小
  • localstorage和sessionStorage在5M
• 网络流量和安全性
• cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，
• webstorage更加节约网络流量。
• webstorage更加安全性，不会担心截获。