HTML5新特性

语义化标签

标签语义化的作用： 主要用来划分区域

主体结构元素：

<nav>导航</nav>
<article>主体</article>
<section>用来表示 段或者章节 (模块)</section>
<aside>主体之外的附属信息 例如侧边广告栏</aside>
<time>9:00</time>

非主体元素：

<header>用在页面的头部</header>
<footer>用在页面的底部</footer>
<address>标签定义文档坐着或拥有的联系信息</address>
<main>定义文档的主要内容</main>

进度条

<progress value="25" min="0" max="50" id="pro"></progress>

新增的表单控件：

email: <input type="email" name=""  value="" />
电话号码： <input type="tel" name="" value="" />

<!--在移动端会有键盘的切换-->

搜索： <input type="search" name="" value="" />
网址：<input type="url" />
数字： <input type="number" />

<!--
	step 每次移动的增量    
	min:最小值   max:最大值  value: 初始位置
-->

数值选择器： <input type="range" step="1" min="0" 
				max="10" value="10"/>
颜色：<input type="color" id="col"/>
日期：<input type="date" />
时间： <input type="time" name="" id="" value="" />
周：<input type="week" />
月：<input type="month" />
<input type="submit" name="" id="" value="提交" />

新增的表单属性：

1. placeholder : 提示信息

2. autocomplete : 是否保存用户输入值(取消提示信息)

3. autofocus : 指定表单获取输入焦点

4. required : 表示此项必填 ，不能为空

5. pattern : 正则验证 pattern="\d{1,5}"

6. formaction : 在submit里定义提交地址

7. formmethod : 选择数据提交方式 get post

语法示例：

<form action="https://www.baidu.com/" autocomplete="on">

    <input type="text" 
    placeholder="请输入字符~~" autofocus="autofocus"/>
    
    <input type="password"/>
    
    <input type="text" 
    placeholder="请输入1-5位数字" 
    autofocus="autofocus"  pattern="^\d{1,5}"/>
    
    <input type="email" name=""  value=""  
    required="required"/>
    
    <input type="submit" value="提交"/>
    
    <input type="submit" value="保存到草稿"
     formaction=
     "http://www.w3school.com.cn/html5/att_input_type.asp"
      formmethod="get"/>
      
</form>

表单认证：

<form action="" method="post" onsubmit="return check()">

    <input type="text" name="" id= value="用户名" />
    
    <input type="password" pattern="^\d{1,4}" name="" 
    id="tex" value="" />
    
    <input type="email" name="ema" id="ema" value=""  
    required=""/>
    
    <input type="submit" value=""/>
</form>

novalidate=“novalidate” ： 提交后重新加载当前页面

checkValidity()方法：
显式验证方法。每个表单元素都可以调用checkValidity()方法（包括form），它返回一个布尔值，
表示是否通过验证。默认情况下，表单的验证发生在表单提交时，如果使用checkValidity()方法，
可以在需要的任何地方验证表单。

function check(){
     if(tex.value == ""){
         alert("请输入用户名");
         return false;
     }else if(!ema.checkValidity()){  
     //符合emali的验证alert("请输入emali邮箱")
         return false;
     }else{
         alert("验证通过")
     }
 }

setCustomValidity()方法：
自定义错误提示信息的方法。
当默认的提示错误满足不了需求时，可以通过该方法自定义错误提示。

function checkForm(frm){
    var name = frm.name;
    console.log(name.value);
    if(name.value == ""){
        name.setCustomValidity("你是*吗？！");
    }else{
        name.setCustomValidity("");
    }
}

音频标签

属性：
controls: 用户控制界面(标签自带)
autoplay: 自动播放 用于背景音乐
loop: 循环播放
语法：

<audio src="雅俗共赏.mp3" controls autoplay id="au"></audio>

方法：

1. currentTime: 当前播放时间
2. duration ： 总时间
3. volume: 音量
4. muted: 静音
5. play：播放
6. paused：输出当前播放状态
7. load：重新加载
8. ontimeupdate：随着音乐播放而不断触发的方法
9. onended：当音乐结束后触发的事件

canvas画布

！ 需要通过标签获取画布
canvas是标签， 画布是canvas的一个属性
我们在绘制之前，都需要先通过标签来获取到画布，再通过画布来调用绘制的方法
画布： canvas绘制的上下文

//获取标签
var cc = document.getElementById("cc");
//通过标签获取画布
var ig = cc.getContext("2d");

绘制直线流程：

1. 开始绘制（落笔）

ig.beginPath();

2. 保存当前样式（如果不保存会影响后续绘制）

ig.save();

3. 设置终点，可以设置多个

ig.lineTo(100,100);
ig.lineTo(80,55);
ig.lineTo(110,40);

4. 闭合路径 (抬笔)
   备注 可选(根据当前需求来看)
   作用 可以将最后一个终点和起点 相连接

ig.closePath();

5. 根据 设置的点，来连接并是指连接线的样式

//  设置连接线的样式
ig.lineWidth = 8;  // 设置线宽
ig.strokeStyle = "blue"; // 设置连接线的颜色
ig.stroke();
ig.restore(); //加载保存过的样式

空心的矩形：

ig.strokeRect(300,150,100,100);

实心矩形：

ig.fillStyle = "blue";
ig.fillRect(300,30,100,100);

清除矩形：

ig.clearRect(325,55,50,50);

空心字：

ig.font = "50px 楷体";
ig.strokeStyle = "orange";
ig.strokeText("小小涛",310,200);

实心字：

ig.fillText("大大涛",10,300);

渐变：

var col = ig.createLinearGradient(10,10,170,10);
col.addColorStop(0,"pink");
col.addColorStop(1,"purple");

ig.fillStyle = col;
ig.fillRect(10,10,200,20);

圆：
arc: 画圆
参数：

1. 在canvas中 x轴上的位置
2. 在canvas中 y轴上的位置
3. 半径
4. 开始角度 Math.PI 约等于 180°
5. 结束角度
6. 是否逆时针绘制 可选参数 默认 顺时针

拖拽

拖拽属性是H5的新特性：
是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程
draggable:： 标签中自带的属性：是否可以拖拽， 默认值 false

拖拽 Drag：
源对象： 指定的鼠标点击的一个事物，例如： 一个元素，一个图片等
目标对象： 指定是我们拖动源对象后，预计要进入的区域

被拖动的源对象可以触发的方法：

1. ondragstart: 源对象开始被拖动

2. ondrag: 被拖动过程中

3. ondragend: 源对象被拖动结束

4. 源对象进入目标对象可以触发的事件
   1. ondragenter： 源对象进入目标对象时触发
   2. ondragover: 源对象悬停在目标对象上方时触发
   3. ondragleave: 源对象被拖动着离开目标对象时触发
   4. ondrop: 源对象在目标对象上松手时 触发

event.dataTransfer： 数据传递对象
功能： 用于在源对象和目标对象之间传递数据

   setData(): 设置数据 参数是 key 和 value(value必须是字符串)
   getData(): 获取数据，参数是key 。 通过key去获取对应的value值

ondrag事件最后一刻无法获取到鼠标位置处理方法：

if(x == 0 && y == 0){
      return false; //直接结束，不赋值给元素
}

备注！！！
为了使ondrop方法生效，需要在ondragover里添加 阻止默认事件

本地存储

在H5中 提供了两种在客户端存储数据的新方法

1. localStorage： 永久存储(相对)，其中的数据不随着浏览器的开关而改变
2. sessionStorage： 临时存储(相对), 当浏览器关闭时，数据消失(页面刷新时，不会受到影响)

备注： 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

	if(typeof(Storage)!=="undefined"){				
		//移除 localStorage 中的 "sitename" :
		//localStorage.removeItem("sitename");
				
				
		localStorage.siteName = "xxx没错我就是网站名"
		
		box.innerHTML = "教程说这里应该写网站名" + 
						localStorage.siteName;
	}else{
		box.innerHTML = "教程说你的浏览器太垃圾了，
						 不支持web存储";
	}

备注： localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

setItem()： 将数据已键值对的方式，存储，谁调用存个谁

localStorage.setItem(key,value);
//value值必须是字符串
sessionStorage.setItem("text",JSON.stringify(obj)); 

获取数据： 直接获取key键，根据key键 获取对应的value值

console.log(localStorage.key(i));

根据key键 获取对应的value值

删除数据：

//根据key键 删除对应的键值对
localStorage.removeItem("text");
localStorage.removeItem("txt");