什么是html5 1.H5不是新语言,是第五次修改的版本 2.支持所有主流浏览器(IE9以上支持H5,ie8一下不支持) 3.改变了用户与文档交互方式:多媒体 video audio canvas 4.增加其它的新特性:语义特性,本地存储特性,网页多媒体,二维三维,特效(过度,动画) 5.相对于h4: 1:进步:抛弃了不常用的标记 2.新增:新增标记和属性 3.结构简洁 html:xt +tab html5 是一套规范 ------------------------------------------- 100% 流失布局 || 百分布局 解决ie8兼容性问题:引进JS文件或者更改属性 电话 tel 弹出数字键盘 form:myForm 指定表单 ------------------------------- 码云上传 git clone url地址 git add * 将代码上传到本地仓库 git commit -m '必须写的注释' git push 1.在码云上创建项目 2.复制项目地址 3.四步走 https://gitee.com/tuziling84/code.git ------------------------------------- <!--autofocus:自动获取焦点--> <!--autocomplete:自动完成：on:打开 off:关闭 1.必须成功提交过:提交过才会记录 2.当前添加autocomplete的元素必须有name属性--> 用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br> <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘--> <!--required:必须输入，如果没有输入则会阻止当前数据提交--> <!--pattern:正则表达式验证 *:代表任意个 ?:代表0个或1个 +：代表1个或多个--> 手机号：<input type="tel" name="userPhone" required pattern="^(+86)?1d{10}$"> <br> <!--multiple：可以选择多个文件--> 文件：<input type="file" name="photo" multiple> <br> <!--email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔--> 邮箱：<input type="email" name="email" multiple><br> <!--提交：--> <input type="submit"> <br> </form> <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交--> <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交--> 地址：<input type="text" name="address" form="myForm"> <!--建立输入框与datalist的关联 list="datalist的id号"--> 专业：<input type="text" list="subjects"> <br> <!--通过datalist创建选择列表--> <datalist id="subjects"> <!--创建选项值：value:具体的值 label:提示信息，辅助值--> <!--option可以是单标签也可以是双标签--> <option value="英语" label="不会"/> <option value="前端与移动开发" label="前景非常好"></option> <option value="java" label="使用人数多"></option> <option value="javascript" label="做特效"></option> <option value="c" label="不知道"></option> </datalist> 网址：<input type="url" list="urls"> <datalist id="urls"> <!--如果input输入框的type类型是url,那么value值必须添加http://--> <option value="http://www.baidu.com" label="百度"></option> <option value="http://www.sohu.com"></option> <option value="http://www.163.com"></option> </datalist> ------------------------------- fullscreen 1、js的兼容性处理 加前缀 google+apple+360+qq 内核：webkit 火狐 内核：moz 欧朋 内核：o ie 内核：ms 2、实现全屏和退出全屏对象不一样 实现全屏：具体对象调用 RequestFullScreen()方法 退出全屏：document对象调用 CancelFullScreen()方法 3、火狐最标准的 ------------------------- oninput :监听当前指定元素 onkeypu : 键盘弹起时候触发 oninvalid :当验证不通过时触发 进度条 progress : max value meter ----------------------- 音频 embed 直接插件视频文件:他的本质是条用本机上已经安装的软件,有兼容性 flash 插件 安装flash 苹果设备不支持 增加学习成本 <!--embed:可以直接插入音频视频，本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件 兼容性--> <!--flash: 1.先学习flash,增加使用成本 2.iphone,ipd,不支持flash--> <!--audio:音频--> <!-- <audio controls autoplay> <source src="./mp3/aa.mp3" type="audio/ogg"> <source src="./mp3/aa.mp3" type="audio/mpeg"> </audio> --> <!-- src:播放文件的路径 controls:音频播放器的控制器面板 autoplay:自动播放 loop:循环播放--> <!--<audio src="../mp3/aa.mp3" controls></audio>--> <!--video：视频--> <!-- pause 暂停 src:播放文件的路径 controls:音频播放器的控制器面板 autoplay:自动播放 loop:循环播放 poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像 视频的宽度 height:视频的高度 --> <!--注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放--> <!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>--> <!--source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择--> <!--<video muted src="../mp3/flv.flv" controls></video>--> ------------------------------------ 1.ononline:网络连通的时候触发事件 2.nooffline:网络断开触发 全屏操作: required 必填 3c3ff6933cb1c09c87d09de335612321 -------------------- 拖拽: e.preventDefault();阻止默认事件 draggable 改变鼠标样式 拖拽 -------------------------------- sessionStorage 生命周期: 存储大小:5M 关闭浏览器 数据不存在 存储在浏览器当前页面内存中 数据只能在当前页面 sessionStorage.getItem("key",value) setItem(key,value):存储数据，以键值对的方式存储 getItem(key):获取数据，通过指定名称的key获取对应的value值 removeItem(key):删除数据，通过指定名称key删除对应的值 clear():清空所有存储的内容 JSON.stringify(arr2) =========将数组转换成字符串 原理就是在数组身上打上一个引号 JSON.parse(arr3) ==============将字符串转换成数组对象 原理是把引号去掉 ------------------------- localStorage 同一个浏览器可以共享数据 数据只能手动删除 存储大小 : 20M 数据存储在硬盘上 setItem(key,value):存储数据，以键值对的方式存储 getItem(key):获取数据，通过指定名称的key获取对应的value值 removeItem(key):删除数据，通过指定名称key删除对应的值 clear():清空所有存储的内容 例子： //定义一个字符串 var data='{"name":"goatling"}' //解析对象? ?JSON.parse(data) 结果是： ?name:"goatling" JSON.stringify()【从一个对象中解析出字符串】 var data={name:'goatling'} JSON.stringify(data) 结果是： '{"name":"goatling"}' -------------------------- 用于被拖拽元素的事件 ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用 应用于目标元素的事件 ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragover 应用于目标元素，当停留在目标元素上时调用--持续 ondrop 应用于目标元素，当在目标元素上松开鼠标时调用 ondragleave 应用于目标元素，当鼠标离开目标元素时调用 e.preventDefault(); 清除默认行为 列如: <script> var div1 = document.querySelector("#div1"); var div2 = document.querySelector("#div2"); //开始拖拽 document.ondragstart=function(e){ console.log(e); e.dataTransfer.setData("text/html",e.target.id); } //持续拖拽 document.ondragover=function(e){ e.preventDefault(); } //结束拖拽 document.ondrop=function(e){ var id=e.dataTransfer.getData("text/html"); e.target.appendChild(document.getElementById(id)); } </script> ---------------上传----------------------- multiple 多个文件上传 onabort:读取文件中断片时触发 onerror:读取错误时触发 onload:文件读取成功完成时触发 onloadend:读取完成时触发，无论成功还是失败 onloadstart:开始读取时触发 onprogress:读取文件过程中持续触发 reader.onload=function(){ //console.log(reader.result); 读取的文件在读取对象的reader.result中 document.querySelector("img").src=reader.result; } reader.onprogress=function(e){ var percent= e.loaded/ e.total*100+"%"; div.style.width=percent; } 如: var myfile=document.querySelector("#myfile"); var div =document.querySelector("div"); myfile.onchange=function(){ div.innerHTML=""; var file=myfile.files;//获取个数 // console.log(file); for(var i = 0; i < file.length;i++){ var reader=new FileReader(); // console.log(reader.readAsDataURL) reader.readAsDataURL(file[i]); reader.onload=function(e){ var img=document.createElement("img"); // cosnole.log(img); img.src=e.target.result; div.appendChild(img); } } }