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>
