HTML5新特性(1)

<input type="submit" value=""/>

**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: 循环播放  

**语法：**

**方法：**



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

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-17bS1N0R-1715403915999)]

[外链图片转存中…(img-ncEpteUD-1715403916000)]

[外链图片转存中…(img-BC3YGbF2-1715403916000)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！