header nav aside main footer
表单input type:email url tel(number 移动端会弹出数字键盘) color range date time datetime-local datetime(无效) number search(email 有删除x) submit button file
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <form action="" id="loginform"> username:<input type="text" placeholder="please input name" name="username" autocomplete="on" autofocus><br> mobile:<input type="tel" placeholder="please input mobile" id="mobile" name="mobile" pattern="^(\+86)?1\d{10}$" required><br> file:<input type="file" multiple=""><br> <input type="submit"value="submit"></input> </form> 地址：<input type="text" name="addr" form="loginform" id="addr"/><!--addr也会提交到loginform--> <form action=""> 开发：<input type="text" list="dlist"><!--input 即可以输入又可以选择 list指定数据源（firefox不支持） 若type=url则option value必须是合法的url(http https开头)--> <datalist id="dlist"> <option value ="Html" label="前端开发"></option> <option value ="Python" label="Python开发"></option> <option value ="Java" label="java开发"></option> </datalist> </form> <script type="text/javascript"> //input 新增属性 placeholder autofocus autocomplete pattern required multiple(file email（逗号分隔）可用) //input 新增事件 oninput oninvalid var addrInput=document.getElementById('addr'); console.log(addrInput) addrInput.addEventListener("input",function(){ console.log('ssssssssss') }) document.getElementById('mobile').oninvalid=function(){ this.setCustomValidity('请输入合法的手机号') } </script> </body> </html>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> *{ margin:0; padding:0 } body{ margin:35px } fieldset{ width:600px; margin:0 auto; } form{ padding:20px; } form>label,form>input{ width:100%; margin-bottom:5px } form>input,meter{ width:100%; height: 40px; border:none; border:1px solid #ccc; line-height: 40px; border-radius: 10px; font-size: 14px; padding-left:8px; margin-bottom:10px } </style> </head> <body> <fieldset id=""> <legend>学生档案</legend> <form action=""> <label for="username">姓名:</label> <input type="text" name="username" id="username" placeholder="请输入用户名" autofocus="autofocus" required="required"> <label for="mobile">手机号:</label> <input type="number" name="mobile" id="mobile" placeholder="请输入手机号" pattern="^1\d{10}$" required="required"> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="请输入email" required="required"> <label for="dlang">开发语言:</label> <input type="text" name="dlang" id="dlang" placeholder="请输入开发语言" required="required" list="langlist"> <datalist id="langlist"> <option value="Html"></option> <option value="Python"></option> <option value="Java"></option> </datalist> <label for="score">成绩:</label> <input type="number" name="score" id="score" placeholder="请输入成绩" max="100" min="0" value="0" required="required"> <label for="level">基础水平:</label> <meter name="level" id="level" max="100" min="0" low="59" high="90"></meter> <label for="joindate">入学日期:</label> <input type="date" name="joindate" id="joindate" placeholder="请输入入学日期" required="required"> </form> </fieldset> <script type="text/javascript"> document.getElementById('score').oninput=function(){ document.getElementById('level').value=this.value } </script> </body> </html>
h5 css样式添加 删除document.querySelector("#add").classList.add("add") document.querySelector("#add").classList.remove("add") document.querySelector("#add").classList.toggle('add') document.querySelector("#add").classList.contains("add")
自定义属性规范：1、data-xx 开头 2、data-后必须至少有一个字符 建议：名称都小写（不要包含任何大写 特殊符号或纯数字）
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> *{ margin:0; padding:0 } body{ margin:35px } ul,li{ list-style: none; } .add{ color:red } .add1{ font-size: 16px; } </style> </head> <body> <ul> <li id="add">sdfdswer</li> </ul> <div id="div1" data-my-name="howhy">dsfsf </div> <script type="text/javascript"> document.querySelector("#add").classList.add("add") var aa=document.querySelector("#add").classList.contains("add") console.log(aa) var divs=document.querySelector("#div1").dataset; console.log(divs["myName"])//取自定义属性用【camel命名法】 </script> </body> </html>
##新接口事件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> *{ margin:0; padding:0 } body{ margin:35px } div{ border:1px solid red; } </style> </head> <body> <div> <input type="button" id="full" value="fullscreen"> <input type="button" id="cancelfull" value="cancelfull"> <input type="button" id="isfull" value="isfull"> <form action=""> 文件：<input type="file" name="uploadfile" id="uploadfile" onchange="getFileContent()"></input> <input type="submit"> </form> <img src="" alt=""> </div> <script type="text/javascript"> //新增的网络接口 window.addEventListener('online',function(){ console.log("网络连通了") }) window.addEventListener('offline',function(){ console.log("网络断开了") }) //全屏操作 全屏：requestFullScreen cancelFullScreen var div=document.querySelector("div"); document.querySelector('#full').onclick=function(){ if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen() }else if(div.mozRequestFullScreen){ div.mozRequestFullScreen() }else if(div.msRequestFullscreen){ div.msRequestFullscreen() }else{ div.requestFullScreen() }; } document.querySelector('#cancelfull').onclick=function(){ if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen() }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen() }else if(document.msCancelFullScreen){ document.msCancelFullScreen() }else if(document.cancelFullScreen){ document.cancelFullScreen() }; } document.querySelector('#isfull').onclick=function(){ if(document.webkitIsFullScreen||document.mozIsFullScreen||document.msIsFullScreen||document.isFullScreen){ console.log("isfull>>>>>:true") }else{ console.log("isfull>>>>>:false") }; } //FileReader readAsText function getFileContent(){ var reader=new FileReader(); var file=document.querySelector('#uploadfile').files console.log(file[0]) reader.readAsDataURL(file[0]) reader.onload=function(){ console.log(reader.result) document.querySelector('img').src=reader.result } } </script> </body> </html>
h5元素拖拽
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> *{ margin:0; padding:0 } body{ margin:35px } div{ width:200px; height:200px; border:1px solid red; } </style> </head> <body> <div id="div1"><p draggable="true">dfsdfwer2342343</p></div> <div style="border-color:green" id="div2"></div> <script type="text/javascript"> //拖拽事件 draggable="true" //被拖拽元素 ondrag 整个拖拽过程都会调用 ondragstart 拖拽开始 ondragleave鼠标移开拖拽元素时 ondragend 拖拽结束 //目标元素 ondragenter ondragover ondrop ondragleave var pele=document.querySelector('p') pele.ondragstart=function(){ console.log('ondragstart') } pele.ondrag=function(e){ console.log('ondrag') e.preventDefault() } pele.ondragleave=function(){ console.log('ondragleave') } pele.ondragend=function(){ console.log('ondragend') } var divele2=document.querySelector('#div2') var divele1=document.querySelector('#div1') divele2.ondragenter=function(e){ } //浏览器默认不会触发ondrop divele2.ondragover=function(e){ e.preventDefault() } divele2.ondrop=function(){ console.log(333333) this.appendChild(pele) } //浏览器默认不会触发ondrop divele1.ondragover=function(e){ e.preventDefault() } divele1.ondrop=function(){ console.log(333333) this.appendChild(pele) } </script> </body> </html>