HTML5新增标签以及HTML5新增的api
1.H5并不是新的语言，而是html语言的第五次重大修改--版本
2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.
一.新增标签：
1.语义化：header nav aside article main footer
a.在支持语义化标签的浏览器，这些标签会被解析为div
b.如果不支持，则不会进行解析，如果需要使用则需要使用兼容处理
1.IE8及以下：完全不支持，兼容处理
2.在IE8以上，部分支持，但是一些语义化标签会被解析为行级元素，造成高度失效
3.将行级元素设置为块级元素的方式：
a.display:block
b.float:left|right
c.position:absolute
4.兼容处理：
a.可以通过document.crateElement动态的创建元素，但是创建好的元素在ie9以下会被当成行级元素，所以需要手动的设置为块级元素，不然高度属性会失效
b.建议直接引入一个第三方插件实现 IE9以下的html5窔兼容处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
header{
width: 100%;
height: 80px;
background-color: red;
}
nav{
width: 100%;
height: 36px;
background-color: green;
}
main{
width: 100%;
height: 400px;
/*在ie8以上，main会被解析为行级元素，因为它不支持main这个语义化标签，所以手动设置成块级元素*/
display: block;
background-color: #ccc;
}
aside{
width: 20%;
height: 100%;
float: left;
background-color: #68c8ff;
}
article{
width: 80%;
height: 100%;
float: left;
background-color: #ff70f6;
}
footer{
width: 100%;
height: 80px;
background-color: #ffb839;
}
</style>
</head>
<body>
<script>
/**
* 方法一:
* 通过js的createElement方法创建的浏览器不支持的元素默认都是行级元素
*/
document.createElement("header");
</script>
<!-- 方法二:-->
<!-- 进行IE8兼容处理一般引入一个js文件-->
<!--[if lt ie 9]>
<script src="../js/html5shiv.min.js"></script>
<![endif]--> <header class="header">header</header>
<nav class="nav">nav</nav>
<main class="main">
<aside class="aside">aside</aside>
<article class="article">article</article>
</main>
<footer class="footer">footer</footer>
</body>
</html>
二.新增表单标签和表单属性：
input type="email | tel | phone | number | search"
email:可以提供自动的格式验证，如果不通过则无法进行提交
tel:在px端没有任何作用，它的作用是在移动端通过叫出数字键盘
number:数字输入框
placeholder:占位提示文本
autofocus：自动获取焦点
autoComplete:自动完成：设置了自动完成同时这个表单元素的数据曾经成功的提交过,要求当前元素元素必须有name属性
required:要求必须填写
novalidate：它是表单属性，添加之后，表单元素的默认的验证会失效
pattern:确定正则验证
form:指定当前元素的依附的表单
meter:度量器：min max low high
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名: <input type="text" name="userName"> <br>
密码: <input type="password" name="userPwd"> <br>
邮箱: <input type="email" name="userEmail"> <br>
电话: <input type="tel" name="userPhone"> <br>
出生日期: <input type="detetime-local"> <br>
颜色: <input type="color"> <br>
范围: <input type="range" min="0" max="1000" value="50"> <br>
搜索: <input type="search" name="userKey"> <br>
<input type="submit">
</form>
<script>
<!--oninput 当当前元素的值发生改变的时候会持续的触发-->
document.querySelector("[type=range]").oninput = function () {
console.log(this.value);
} document.querySelector("[type=tel]").oninput = function () {
console.log(this.value);
}
</script>
</body>
</html>
设置提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="mother" >
用户名: <input type="text" placeholder="请输入用户名" autofocus autocomplete="on" name="userName"> <br>
邮箱: <input type="email" multiple name="myEmail"> <br>
手机号码: <input type="text" required pattern="^(d{3,4})?1[35874]\d{9}$" name="myPhone"> <br>
手机号码: <input type="tel" required pattern="^(\+86-)?1[35874]\d{9}$"> <br>
文件选择: <input type="file" name="myFile" multiple> <br>
<input type="submit"> </form> <input type="text" name="myAdd" form="mother" >
<script>
/*oninput 只要值发生变化就会触发*/
document.querySelector('[type=email]').oninvalid = function () {
this.setCustomValidity('请输入正确的email');
}
document.querySelector('[type=tel]').oninvalid = function () {
this.setCustomValidity('请输入11位手机号码');
}
</script>
</body>
</html>
度量器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input,meter{
width: 100%;
height: 30px;
line-height:30px;
margin-top:5px;
}
</style>
</head>
<body>
<input type="number" min="0" max="100" value="0">
<meter min="0" max="100" value="0" low="60" high="90"></meter>
<script>
document.querySelector('[type="number"]').oninput = function (e) {
document.querySelector("meter").value = this.value;
}
</script>
</body>
</html>
三.自定义属性及其例子
自定义属性
a.定义：以data-开头，后面接自定义名称，如果名称由多个单词组成，使用-进行分隔
b.获取值
js方式：dom元素.dataset['名称']。注意名称只需要data-后面的内容，如果名称由多个单词组成，则使用pascal命名法进行连接 例如: data-user-name 取值是user-name和userName都可以
jq方式：jq对象.data("名称")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 自定义属性：我们经常需要存储的一些程序中需要使用到的数据
数据的来源只有两种：
1.如果能够获取到，则先进行获取
2.如果不能获取到，则先存储再获取--自定义属性就是用来存储程序中需要使用的数据的
--> <!--定义自定义属性
格式: data- + 名称
如果名称由多个单词构成，那么多个单词之间使用-连接
-->
<a href="javascript:void(0); " data-id="1" data-user-name="jack" data-age="20">编辑</a>
<script>
// 原生获取
var a = document.querySelector("a");
var aId = a.dataset['id'];
var aUserName = a.dataset['userName'];
var aAge = a.dataset['age'];
console.log(aId + ":" + aUserName + ":" + aAge);
</script>
<script src="../js/jquery.min.js"></script>
<script>
// JQ获取
var id = $('a').data('id');
// var userName = $('a').data('user-name'); // 也可以获取值
// var userName = $('a').data('userName'); // 也可以获取值
var userName = $('a').data().userName; // 也可以获取值
var age = $('a').data('age');
console.log(id + ":" + userName + ":" + age);
</script>
</body>
</html>
配合css的tab栏切换:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
} .tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
} .tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
} .tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
} .products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
} .products .main {
float: left;
display: none;
} .products .main.selected {
display: block;
} .tab li.active {
border-color: red;
border-bottom: 0;
} </style> </head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item" data-id="0">国际大牌<span>◆</span></li>
<li class="tab-item" data-id="1">国妆名牌<span>◆</span></li>
<li class="tab-item" data-id="2">清洁用品<span>◆</span></li>
<li class="tab-item" data-id="3">男士精品</li>
</ul>
<div class="products">
<div class="main">
<a href="###"><img src="../images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="../images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="../images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="../images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script>
(function init(index) {
var tab = document.querySelector('.tab');
var items = tab.querySelectorAll('li');
var products = document.querySelector('.products');
var proImgs = products.querySelectorAll('.main'); // 设置默认样式
items[index].classList.add('active') ;
proImgs[index].classList.add('selected'); // for循环设置样式
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
//排除重复点击
if(this.classList.contains('active')){
return ;
} // 排他
tab.querySelector('.active').classList.remove('active');
products.querySelector('.selected').classList.remove('selected'); // 设置当前样式
this.classList.add('active');
proImgs[this.dataset['id']].classList.add('selected');
} }
})(1);
</script>
</body>
</html>
四.dataList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="">
<option value="1">java</option>
<option value="2">php</option>
<option value="3">mysql</option>
<option value="4">linux</option>
</select> <br><br> <!--datalist仅仅是数据列表，它必须依附于一个文本框才能看到效果-->
<datalist id="subject">
<option value="java">java说明</option>
<option value="php">php说明</option>
<option value="mysql">mysql说明</option>
<option value="linux">linux说明</option>
</datalist>
<input type="text" placeholder="请输入学科名称" list="subject"><br><br> <!--特例!-->
<!--如果datalist关联的文本框类型是url，那么datalsit的option的value的值必须包含http://-->
<datalist id="urls">
<option value="http://baidu.com">百度</option>
<option value="http://souhu.com">搜狐</option>
<option value="http://sina">新浪</option>
</datalist>
<input type="text" list="urls">
</body>
</html>
五.新增api：应用程序接口
（1） 网络监听：可以监听网络是否连通
新增的网络监听api可以用来监听当前设备的网络是否断开还是连接
ononline:网络连接时触发
onoffline:网络断开时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--新增的网络监听api可以用来监听当前设备的网络是断开还是在连接状态
ononline: 网络连接时触发
onoffline: 网络断开时触发
-->
<script>
window.addEventListener('online',function () {
console.log("网络连接了");
}); window.addEventListener('offline',function () {
console.log("网络断开了");
});
</script>
</body>
</html>
(2)文件读取--图片预览
**文件读取：FileReader:文件读取对象。可以使用它进行文件的预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
从服务器上请求图片资源(对服务器增加压力)
1.请求资源
2.解析并渲染：从服务器返回的值都是字符串，意味着你如果想得到图片结果，还得对这个字符串进行解码操作-->
<!--<img src="../images/l1.jpg" alt="">-->
<img src="" alt="" width="300" height="150">
<input type="file" name="myPhoto">
<input type="submit">
<script>
var myfile = document.querySelector("[type='file']");
var img = document.querySelector('img');
myfile.onchange = function () {
/*对于 file 类型的表单元素， 用户所选择的图片对象存储在file表单元素的files属性中，这个files属性的本质是一个列表数组，所以可以通过索引方式获取图片对象*/
//console.log(myfile.files);
var currentFile = myfile.files[0];
console.log(currentFile); /*FileReader:
* 1.创建
* 2.读取：读取方法需要关注的两个地方：1.参数，需要文件对象 2.方法没有返回值，在读取完毕之后，会将读取结果存储在读取对象的result属性中
* readAsText():将指定的文件资源读取返回字符串，意味着它只能读取文本文件。返回的字符串的编码格式由参数2决定,如果没有设置，则使用默认编码。
* readAsBinaryString():读取文件数据，返回二进制数据。这个方法一般不会用来做文件的读取展示，一般用来做文件读取的传输
* readAsDataUrl():DataUrl它的本质就是一个base64编码的字符串，以data开头。它里面直接包含了数据。它可以加快文件的解析速度。
* blob:binary large object:二进制的大文件。所有的数据存储的本质都是二进制，说白了，这个参数需要一个文件对象
*3.接收结果：读取器对象有一系列的方法事件，用来监听读取状态
* onabort:读取中断触发
* onload:读取成功后会触发
* onloadend:无论读取成功还是失败都会触发
* onprogress:读取过程中持续触发
* onerror:读取出现错误时触发
* onloadstart:开始读取时触发*/ // 1.创建对象
var reader = new FileReader();
// 2.读取
reader.readAsDataURL(currentFile);
// 3.接收结果
reader.onload = function () {
console.log(reader.result);
img.src = reader.result;
}
}
</script>
</body>
</html>
readAsDataUrl():DataUrl它的本质就是一个base64编码的字符串，以data开头。它里面直接包含了数据。它可以加快文件的解析速度。
readAsDataURL(currentFile).result的内容是如下所示：
六.全屏接口的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img src="../images/l1.jpg" id="img" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelfull" value="退出全屏">
<input type="button" id="isFull" value="是否否屏">
</div> <script>
var img = document.querySelector('div');
/*全屏实现：requestFullScreen:但是它的兼容性，在不同的浏览器中需要对方法添加不同的前缀
* chrome:webkit
* firefox:moz
* opera:o
* ie:ms*/
// myIMg.requestFullScreen();
// myIMg.webkitRequestFullScreen();
/*添加能力测试：测试下浏览器是否支持某种操作 --if*/
document.querySelector('#full').onclick = function () {
if(img.requestFullScreen){
img.requestFullScreen();
}else if(img.webkitRequestFullScreen){
img.webkitRequestFullScreen();
}else if(img.mozRequestFullScreen) {
img.mozRequestFullScreen();
}else if(img.oRequestFullScreen) {
img.oRequestFullScreen();
}else if(img.msRequestFullscreen) {
img.msRequestFullscreen();
}
} /*退出全屏：cancelFullScreen：退出全屏是当前整个屏幕的行为，并不是某个dom元素的行为。所以调用退出全屏方法的时候，应该使用document
* IE的退出全屏的方法中exitFullScreen*/
document.querySelector('#cancelfull').onclick = function () {
if(document.cancelFullScreen){
document.cancelFullScreen();
}else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}else if(document.oCancelFullScreen) {
document.oCancelFullScreen();
}else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
} /*判断是否全屏：fullScreenElement
* 如果方法返回true,则说明是全屏状态，否则非全屏状态*/
document.querySelector('#isFull').onclick = function () {
if(document.fullScreenElement|| document.webkitFullscreenElement || document.mozFullScreenElement || document.oFullScreenElement || document.msFullscreenElement){
alert('是全屏');
}else{
alert('不是全屏');
}
}
</script>
</body>
</html>