1、什么是html5
2、HTML5-语义化标签及兼容性处理
3、HTML5-表单新增的type属性
4、H5新增的其他属性
5、表单新增元素datalist
6、HTML5-新增的表单事件
7、进度条
8、音频和视频
9、DOM扩展
10、网络监听事件
11、全屏接口的使用
12、FileReader的使用
13、拖拽接口使用
14、地理定位接口的使用
15、web存储
16、应用程序缓存
1、什么是html5 <--返回目录
* H5是html语言的第五次重大修改版本
* 主流浏览器都支持H5 chrome firefox safari, IE9(部分支持)及以上支持H5, IE8以下不支持H5
* 改变了用户与文档的交互方式：多媒体video audio canvas
* 增加了其他的新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画）
* 相对H4的进步：
- 抛弃了一些不合理不常用的标签和属性
- 新增了一些标记和属性
- 从代码角度而言，H5网页结构更简洁
h5网页结构 sublime：html + tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
sublime：html:xt +tab，xhtml过渡型文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、HTML5-语义化标签及兼容性处理 <--返回目录
header 页眉
nav 导航
main 文档主体
article 文章
aside 主题内容之外
footer 页脚
传统网页布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>网页经典布局</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } ul { list-style: none; padding: 0; margin: 0; } /*头部*/ .header { height: 100px; background-color: blue; } .main { width: 1000px; height: 500px; margin: 0 auto; } .article { width: 700px; height: 100%; float: left; background-color: pink; } .aside { width: 300px; height: 100%; float: right; background-color: yellow; } .footer { height: 100px; background-color: green; } </style> </head> <body> <!-- 头部 --> <div class="header"> <ul class="nav"></ul> </div> <!-- 主体部分 --> <div class="main"> <!-- 文章 --> <div class="article"></div> <!-- 侧边栏 --> <div class="aside"></div> </div> <!-- 底部 --> <div class="footer"></div> </body> </html>
网站经典布局HTML5版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } ul { list-style: none; padding: 0; margin: 0; } /*头部*/ header { height: 100px; background-color: blue; } .main { width: 1000px; height: 500px; margin: 0 auto; } article { width: 700px; height: 100%; float: left; background-color: pink; } aside { width: 300px; height: 100%; float: right; background-color: yellow; } footer { height: 100px; background-color: green; } </style> </head> <body> <!-- 头部 --> <header> <ul class="nav"></ul> </header> <!-- 主体部分 --> <div class="main"> <!-- 文章 --> <article></article> <!-- 侧边栏 --> <aside></aside> </div> <!-- 底部 --> <footer></footer> </body> </html>
兼容性处理
第一种方式：手动创建标签, 默认创建的标签都是行级元素
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('main');
...
</script>
然后将行级元素转成块级元素 display: block;
第二种方式：引入html5shiv.main.js
在默认情况下，IE8及以下版本不支持h5，引入html5shiv.main.js就可以做到兼容h5
<!-- 注意：ie8以下的浏览器不支持h5标签--> <!--解决办法： 引入html5shiv.js文件--> <!-- 条件注释 只有ie能够识别--> <!--[if lte ie 8]> <script src="html5shiv.min.js"></script> <![endif]--> <!-- l:less 更小 t：than 比 e:equal等于 g：great 更大 -->
3、HTML5-表单新增的type属性 <--返回目录
* <input type="email" name="email">
type="email"提供了默认的邮箱验证：要求包含@和服务器名称，如果不满足验证，则会阻止当前的提交
* <input type="tel">：不是用来实现验证的，目的是为了能够在移动端打开数字键盘。
如何查看效果：qq发送文件，手机端使用qq接受，使用浏览器打开文件
* <input type="url">
- 空也能提交，输入必须是网址，必须包含http://否则提示
* 数字控件<input type="number" step="5" value="默认值" min="" max="">
* <input type="search"> 类似text，但是获得焦点时右侧有个X，可以删除文本
* <input type="range" min="0" max="100" value="50"> 滑块
* 颜色拾取 <input type="color">
* 日期控件<input type="date" name="date">
- 在火狐浏览器下，默认会有一个日期插件进行选择，最后get提交后在url后添加date=2018-05-22
* 时间控件<input type="time" name="time">
- 在火狐浏览器下，格式：上午 05:10，最后get提交后在url后添加time=05%3A10
* 日期+时间<input type="datetime"> 大多数浏览器不支持
* 日期+时间<input type="datetime-local">谷歌支持，火狐不支持
* 月份 <input type="month">
* 星期 <input type="week">
4、H5新增的其他属性 <--返回目录
* 用户名：<input type="text" placeholder="请输入用户名" autofocus autocomplete="on">
- placeholder：提示文本，占位文本
- autofocus:自动获取焦点，有多个焦点时自动获取第一个焦点
- autocomplete="on/off": 前提1)有name属性;2)成功提交过后;以后会有输入提示
* 手机号：<input type="tel" required pattern="^(+86)?">
- 不是用来实现验证的，目的是为了能够在移动端打开数字键盘
- required: 必须输入
- pattern: 正则表达式进行约束
* <input type="file" multiple>
- multiple:可以选中多个文件
<input type="email" multiple>
- multiple:可以写多个email，逗号分隔
* <form id="myForm">
<input type="text" form="myForm">
- form="myForm"表示该元素也属于<form id="myForm">
5、表单新增元素datalist <--返回目录
不仅可以输入，还可以选择
用户名：<input type="text" list="listId"> <datalist id="listId"> <option value="1111" label="aa"></option> <option value="2222" label="bb"></option> </datalist>
谷歌支持，火狐不支持option的value属性；火狐双击显示效果
6、HTML5-新增的表单事件 <--返回目录
oninput:监听当前指定元素的内容是否改变（键盘录入或复制或删除），改变了就会触发事件
oninvalid:当验证不通过时触发事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> 邮箱：<input type="email" required id="phoneId"> <input type="submit" value="提交"> </form> <script type="text/javascript"> document.getElementById("phoneId").oninvalid=function(){ this.setCustomValidity("请输入正确的邮箱"); //修改提示信息 }; </script> </body> </html>
7、进度条 <--返回目录
* <progress value="50" max="100">
* 度量器
high="80" low="40"分成三个部分，高于，低于，等于这个区域
<meter high="80" low="40" value="20" max="100" min="0"></meter>
<meter high="80" low="40" value="60" max="100" min="0"></meter>
<meter high="80" low="40" value="90" max="100" min="0"></meter>
8、音频和视频 <--返回目录
* <audio src="" controls>
- controls：控制面板
- autoplay:自动播放
- loop：循环
* <video src="">
- controls：控制面板
- autoplay:自动播放
- loop：循环
- width和height：宽高，一般设置一个值就行
- poster：指定未播放时显示的图片，路径
* 不同浏览器支持的视频文件格式不一样
<video controls>
<source src="" type="video/flv">
<source src="" type="video/mp4">
您的浏览器不支持当前的视频播放
</video>
9、DOM扩展 <--返回目录
document.querySelector 只会获取符合条件的第一个元素
document.querySelectorAll('div.box') // 获取所有复合条的 标签，返回的是一个数组， 参数：可以是任意 css选择器
H5操作元素类样式
ele.classList.add("类名字");
ele.classList.remove("类名字");
ele.classList.toggle("类名字");//切换
ele.classList.contains("类名字");//判断是否包含某个样式，包含true，不包含false
ele.classList.item(0);//获取样式
自定义属性
* <p data-school-name="属性值">文本</p>
- 获取自定义属性 p.dataset["schoolName"];
10、网络监听事件 <--返回目录
window.ononline=fn;
window.onoffline=fn;
window.addEventListener('online',function(){
alert('联网了');
})
window.addEventListener('offline',function(){
alert("断网了！")
})
11、全屏接口的使用 <--返回目录
requestFullScreen()：开启全屏显示
不同浏览器需要添加不同的前缀 chrome:webket firefox:moz ie:ms opera:o
var = document.querySelector("div") if(div.requestFullScreen){ div.requestFullScreen(); } else if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen(); } else if(div.mozRequestFullScreen){ div.mozRequestFullScreen(); } else if(div.msRequestFullScreen){ div.msRequestFullScreen(); }
cancelFullScreen():退出全屏显示，使用document来使用
不同浏览器需要添加不同的前缀 chrome:webket firefox:moz ie:ms opera:o
if(document.requestFullScreen){ document.requestFullScreen(); } else if(document.webkitRequestFullScreen){ document.webkitRequestFullScreen(); } else if(document.mozRequestFullScreen){ document.mozRequestFullScreen(); } else if(document.msRequestFullScreen){ document.msRequestFullScreen(); }
fullScreenElement()：是否全屏状态，使用document来使用
if(document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){ alert(true); }
设置全屏后的样式
.box:-webkit-full-screen{
background-color: red;
}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ 250px; height: 250px; background-color: green; margin:100px auto; border-radius: 50%; } .box:-webkit-full-screen{ background-color: red; } </style> </head> <body> <div class="box"></div> <script> var box=document.querySelector('.box'); document.querySelector('.box').onclick=function(){ if(box.requestFullScreen){ box.requestFullScreen(); } else if(box.webkitRequestFullScreen){ box.webkitRequestFullScreen(); } else if(box.mozRequestFullScreen){ box.mozRequestFullScreen(); } else if(box.msRequestFullScreen){ box.msRequestFullScreen(); } } </script> </body> </html>
12、FileReader的使用 <--返回目录
* readAsText():读取文本文件，返回字符串，默认编码UTF-8
* readAsBinaryString():读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户
看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收数据之后，
再将数据保存。
* readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将
文件嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中，
优化网站的加载速度和执行效率。
* abort():中断读取
需求:即时预览(上传图片时有个图片预览)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="file" id="myFile"><br/>
<img src="" id="imgId" width="400">
<script type="text/javascript">
var ele=document.getElementById("myFile");
ele.onchange=function(){
var file=ele.files[0];//获取文件
var reader=new FileReader();
reader.readAsDataURL(file);//读取文件
reader.onload=function(){ //监听文件是否读完，读取完毕触发该事件
document.getElementById("imgId").src=reader.result;
};
};
</script>
</body>
</html>
* FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
- onabort:读取文件中断时触发
- onerror:读取错误时触发
- onload:成功读取完毕时触发
- onloadend:读取完毕时触发，无论成功还是失败
- onloadstart:开始读取时触发
- onprogress:读取文件过程中持续触发
13、拖拽接口使用 <--返回目录
* 在H5中，如果想要拖拽元素，需要添加draggable="true",图片和超链接默认就可以拖拽。
* 应用于拖拽元素的事件：
- ondrag:应用于拖拽元素，整个拖拽过程都会调用
- ondragstart:拖拽开始时调用
- ondragleave:当鼠标拖拽过程中，鼠标离开被拖拽元素原来范围时调用
- ondragend:当拖拽结束时调用
* 应用于目标元素的事件：
- ondragenter:当拖拽元素进入时调用
- ondragover:当停留在目标元素时调用
- ondrop:当在目标元素上松开鼠标时调用
- ondragleave:当鼠标离开目标元素时调用
* 浏览器默认阻止ondrop事件。需要在ondragover事件里阻止浏览器的默认行为。
div2.ondragover=function(e){ e.preventDefault(); }; div2.ondrop=function(e){ div2.appendChild(p);//p=document.getELementById("pId"); };
demo1：给目标元素添加拖拽事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div style=" 200px;height: 200px;border: 2px solid blue;float: left;">
<p draggable="true">p标签内的文本</p>
</div>
<div style=" 200px;height: 200px;border: 2px solid blue;float: left;margin-left: 100px"></div>
<script type="text/javascript">
var p = document.getElementsByTagName("p")[0];
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementsByTagName("div")[1];
div2.ondragover = function(e){
e.preventDefault();
};
div2.ondrop = function(e){
div2.appendChild(p);
};
div1.ondragover = function(e){
e.preventDefault();
};
div1.ondrop = function(e){
div1.appendChild(p);
};
</script>
</body>
</html>
demo2：给document注册拖拽事件，会拖拽到任何目标元素内（包括拖到body里面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {margin: 0;padding: 0;}
p {
background-color: purple;
}
</style>
</head>
<body>
<div style=" 200px;height: 200px;border: 2px solid blue;float: left;">
<p draggable="true">p标签内的文本</p>
<span draggable="true">span标签内的文本</span>
</div>
<div style=" 200px;height: 200px;border: 2px solid blue;float: left;margin-left: 100px"></div>
<script type="text/javascript">
var obj = null;//用于存储当前拖拽元素
document.ondragstart = function(e){
e.target.style.opacity = 0.5;
obj = e.target;
};
document.ondragend = function(e){
e.target.style.opacity = 1;
};
document.ondragover = function(e){
e.preventDefault();
};
document.ondrop = function(e){
e.target.appendChild(obj);
obj = null;
};
</script>
</body>
</html>
demo3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1,.box2{ 400px; height: 400px; border: 1px solid #000; } .box1 div,.box2 div{ 80px; 97px; height: 97px; background-color: red; border-radius: 50%; float: left; border: 1px solid #000; text-align: center; line-height: 100px; } .box2{ position: absolute; left:600px; top:100px; } </style> </head> <body> <div class="box1"> <div draggable="true">1</div> <div draggable="true">2</div> <div draggable="true">3</div> <div draggable="true">4</div> <div draggable="true">5</div> <div draggable="true">6</div> <div draggable="true">7</div> <div draggable="true">8</div> </div> <div class="box2"></div> <script> var box1 = document.querySelector('.box1'); var box2 = document.querySelector('.box2'); var boxs = document.querySelectorAll('.box1 div'); var temp = null; for(var i = 0;i < boxs.length; i++){ boxs[i].addEventListener('dragstart',function() { temp = this; }); } box2.addEventListener('dragover',function(e){ e.preventDefault(); }); box2.addEventListener('drop',function(e){ box2.appendChild(temp); temp=null; }); </script> </body> </html>
* 通过dataTransfer来实现数据的存储与获取
e.dataTransfer.setData(format, data)
format:数据类型 "text/html" "text/uri-list"
data:数据，一般是字符串
e.dataTransfer.setData("text/html", e.target.id);
var id = e.dataTransfer.getData("text/html"); //只能在ondrop事件中获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {margin: 0;padding: 0;}
p {
background-color: purple;
}
</style>
</head>
<body>
<div style=" 200px;height: 200px;border: 2px solid blue;float: left;">
<p id="pId" draggable="true">p标签内的文本</p>
<span id="spanId" draggable="true">span标签内的文本</span>
</div>
<div style=" 200px;height: 200px;border: 2px solid blue;float: left;margin-left: 100px"></div>
<script type="text/javascript">
document.ondragstart = function(e){
e.target.style.opacity = 0.5;
e.dataTransfer.setData("text/html", e.target.id);
};
document.ondragend = function(e){
e.target.style.opacity = 1;
};
document.ondragover = function(e){
e.preventDefault();
};
document.ondrop = function(e){
var id = e.dataTransfer.getData("text/html"); //只能在ondrop事件中获取
e.target.appendChild(document.getElementById(id));
};
</script>
</body>
</html>
14、地理定位接口的使用 <--返回目录
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<script>
// navigator 导航， geolocation: 地理定位
// window.navigator.geolocation
// 兼容处理：如果支持，获取用户地理信息
if (navigator.geolocation) {
// successCallback 当获取用户位置成功的回调函数
// errorCallback 当获取用户位置失败的回调函数
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
console.log('sorry, 你的浏览器不支持地理定位');
}
// 获取地理位置成功的回调函数
function successCallback(position) {
// 获取用户当前的经纬度
// coords坐标
// 纬度latitude
var wd = position.coords.latitude;
// 经度longitude
var jd = position.coords.longitude;
console.log(`获取用户位置成功！当前位置，纬度 ${wd}, 经度 ${jd}`);
}
// 获取地理位置失败的回调函数
function errorCallback(error) {
console.log(error);
console.log('获取用户位置失败！')
}
</script>
</body>
</html>
15、web存储 <--返回目录
* sessionStorage的使用：存储数据到本地，存储的容量5Mb左右。
- 数据本质是存储在当前页面的内存中，生命周期为当前回话，关闭页面，数据没了。
- setItem(key,value)
- getItem(key)
- removeItem(key)
** 如果删除时，没有该key,也不会报错
- clear():清空所有存储的内容
* localStorage:
- 存储大概为20Mb；
- 不同浏览器不能共享数据，但是同一个浏览器的不同窗口可以共享。
- 永久生效，数据是存储在硬盘上，并不会随着页面或浏览器的关闭而清除。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<input type="text" id="username" name="username" value="jack">
<input type="button" id="btn1" value="设置数据">
<input type="button" id="btn2" value="获取数据">
<input type="button" id="btn3" value="删除数据">
<script type="text/javascript">
document.querySelector("#btn1").onclick=function(){
var name=document.querySelector("#username").value;
window.sessionStorage.setItem("name",name);//存储数据
};
document.querySelector("#btn2").onclick=function(){
var _name=window.sessionStorage.getItem("name");//获取数据
console.log(_name);
};
document.querySelector("#btn3").onclick=function(){
window.sessionStorage.removeItem("name");//删除数据
};
</script>
</body>
</html>
16、应用程序缓存 <--返回目录
* 概念：使用HTML5，通过创建cache manifest文件，可以轻松创建web应用的离线版本
* 优势：
- 可配置需要缓存的资源
- 网络无连接时应用仍可用
- 本地读取缓存资源，提升访问速度，增加用户体验
- 减少请求，缓解服务器压力
* 使用步骤：
- 首先
<html manifest="应用程序缓存文件的路径demo.appcache">
- demo.appcache中的内容
#第一句，必须是CACHE MANIFEST
CACHE MANIFEST
#需要缓存的文件清单列表
CACHE:
images/1.jpg
#配置每一次都需要重新从服务器获取的文件清单列表，*代码所有
NETWORK:
images/2.jpg
#配置如果文件无法获取则使用指定的文件进行替代，/代表所有
FALLBACK:
images/5.jpg images/1.jpg
- 在web服务器上添加MIME-type类型