HTML5新特性

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： 数据传递对象

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

最后

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

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

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

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

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

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

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

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

[外链图片转存中…(img-24juTqnG-1715403951171)]

[外链图片转存中…(img-03Au9Hf5-1715403951171)]

[外链图片转存中…(img-URgPq71l-1715403951172)]

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

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

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