简介：
- H5是最新的HTML标准
- H5是专门为承载丰富的web内容而设计的，并且无需额外的插件
- H5拥有新的语义、图形、及多媒体元素
- H5提供新的元素和新的api，简化了web应用程序的搭建
- H5是跨平台的，被设计为在不同类型的硬件上运行
一、新增语义化标签
- head头部标签
- nav导航标签
- main主体标签
- article独立的内容标签
- section区段标签
- aside侧边栏标签
- footer尾部标签
注意：语义化标准主要针对搜索引擎。这些新标签页面中可以使用多次。在IE9中需要把这些元素转化为块级元素。移动端更喜欢使用这些标签。
二、多媒体标签
audio音频标签。在不使用插件的情况下也可以原生的支持音频格式文件的播放。
- autoplay音频就绪后马上播放。Chrome浏览器会组织自动播放
- controls向用户显示控件，比如播放按钮。
- loop音频结束时重新开始播放。
- preload音频在页面加载时进行加载，并预备播放。使用autolay则忽略该属性。
- src:url要播放音频的地址。
例：
h5中属性名和属性值相同，可以只写属性名
<audio src="" control autoplay loop preload ></audio>
<!-- 兼容性写法 -->
<audio controls>
<sourcs src="" typ=" audio/mpeg"></source>
<sourcs src="" typ=" audio/ogg"></source>
你的浏览器版本过低，不支持视频播放
</audio>
video视频标签。在不使用插件的情况下也可以原生的支持视频格式文件的播放
- autoplay视频就绪自动播放。Chrome浏览器需要添加muted来解决自动播放的问题。
- controls向用户显示控件，比如播放按钮
- loop视频结束时重新开始播放，循环播放。
- preload:auto/none规定是否预先加载视频。使用autplay则忽略该属性
- src:url要播放视频的地址
- width：像素。设置播放器的宽度
- height：像素，设置播放器的高度
- poster路径，加载等待的画面图片
- muted 静音播放
<video src="" controls sutoplay loop preload="suto" widh="200px" height="200px" poster="" muted></video>
<!-- 兼容性写法 -->
<video controls width="200px">
<source src="" type="video/mp4">
<source src="" type="video/ogg">
你的浏览器版本过低，不支持视频播放
</video>
三、新增表单标签
- type="email" 限制用户输入必须为Email类型
- type="url" 限制用户输入必须为URL类型
- type="data" 限制用户输入必须为日期类型
- type="time" 限制用户输入必须为时间类型
- type="month" 限制用户输入必须为月类型
- type="week" 限制用户输入必须为周类型
- type="number" 限制用户输入必须为数字类型。max="100" min="0" step="4" value="4"。
- type="range" 滑动条
- type="tel" 手机号码
- type="search" 搜索框
- type="color" 生成一个颜色选择表单
datalist标签
规定了input元素可能的选项例表。
包含一组option元素，这些元素可以预定义可选值，在input元素输入过程中，会自定响应option元素的值。
绑定的input标签必须设置list属性，属性值等于datalist标签的id属性
<input type=’text‘ list="list">
<datalist id="list">
<option value="上海">shanghai</option>
</datalist>
四、新增表单属性
- required:"required"设置该属性的表单元素不能为空。
- placehoder:"提示文本"提示信息
- autofocus:“自动聚焦”，一般一个页面中放一个。
- autocomplete：“off/on”,之前填写并提交过的内容，设置on后再次填写浏览器会去识别。需要在同一个团苏中添加name属性。
- multiple:"multiple"可以多选文件提交
五、全屏显示
H5一般是做移动端
H5规范规定页面中的任何元素都能全屏显示
- 元素.RequestFullScreen()开启全屏显示
- document.CancelFullScreen()关闭全屏显示
- document.IsFullScreen()判断当前是否全屏状态下
- 全屏伪类div:-webkit-full-screen,一旦元素全屏就会触发伪类选择器
- 由于全屏显示功能在各个浏览器的兼容性不同。所以不同的浏览器中需要加不同的兼容前缀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏显示</title>
<style>
*{
margin: 0;
padding:0;
}
#box{
width: 200px;
height: 200px;
background-color: pink;
}
#div{
width: 100%;
height: 800px;
background-color: red;
}
/*全屏伪类选择器 一旦元素全屏就会触发伪类选择器*/
/*选择到全屏下的box 全屏状态激活这个选择器 这个伪类选择器也要加兼容前缀*/
#box:-webkit-full-screen{
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
<button id="full">全屏显示</button>
<button id="cancel">退出全屏</button>
<button id="isfull">是否全屏</button>
</div>
<script>
//获取显示元素
var oBox = document.getElementById('box');
//获取要点击功能的按钮
var full = document.getElementById('full');
var cancel = document.getElementById('cancel');
var isfull = document.getElementById('isfull');
//点击按钮让box全屏显示
full.onclick = function(){
/*
元素.requestFullscreen()表示请求这个元素全屏显示
requestFullScreen() 这个方法各个浏览器都有自己的方法来实现
所以让要让元素全屏显示 必须加上不同的浏览器的兼容前缀
谷歌浏览器的兼容写法加上webkit兼容前缀，需要写驼峰写法才能符合代码规范
*/
// 检测当前浏览器是什么浏览器，有能力执行对应的全屏的方法(检测这个方法有没有在对应浏览器上面的方法)
// 这种方式叫做浏览器的能力检测
//兼容不同的浏览器，让所用浏览器都可以全屏显示
if (oBox.webkitRequestFullScreen) {//谷歌浏览器
oBox.webkitRequestFullScreen()
} else if (oBox.mozRequestFullScreen) {//火狐浏览器
oBox.mozRequestFullScreen()
} else if (oBox.oRequestFullScreen) {//欧朋浏览器
oBox.oRequestFullScreen()
} else {//IE浏览器
oBox.msRequestFullScreen()
}
}
//退出全屏显示有两种方式
//1.在全屏中退出全屏按键盘上的Esc键即可
//2.document.cancelFullScreen()这个方法可以取消全屏显示
//点击按钮让box退出全屏
cancel.onclick = function(){
// cancelFullScreen 这个方法可以取消全屏显示, 这个方法只能是document这个对象调用
//不是让元素退出全屏 而是让docuemnt退出全屏
//兼容所有浏览器退出全屏显示
if (document.webkitCancelFullScreen) {//谷歌浏览器
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {//火狐浏览器
document.mozCancelFullScreen();
} else if (document.oCancelFullScreen) {//欧朋浏览器
document.oCancelFullScreen();
} else {//IE浏览器
document.msCancelFullScreen();
}
}
isfull.onclick = function(){
// isFullScreen 这个方法可以判断是否在全屏状态下, 这个属性只能是document这个对象调用
//判断当前是否全屏状态下
alert(document.webkitIsFullScreen);
}
/*
requestFullscreen()让元素全屏显示的兼容前缀
cancelFullScreen()让元素退出全屏显示兼容前缀
isFullScreen判断元素是否全屏显示
各大浏览器兼容前缀
谷歌浏览器 webkit
火狐浏览器 moz
欧朋 o
IE ms
*/
</script>
</body>
</html>
六、网络检测
HTML5提供两个事件来检测网络状态，两个事件检测的都是window对象
- online 网络连接时
- offline 网络断开时
七、读取文件
h5提供了FileReader这个构造函数让我们读取本地的文件
reader.readAsText(文本文件) //读取文本文件
reader.readAsDataURL(图片文件) //读取图片文件
reader.onload = function(){ //等读取好数据之后 打印读取好的数据
console.log(this.result) //获取文件的数据
}
八、H5拖拽
h5拖拽由两个部分组成 拖拽元素 + 目标元素
拖拽元素的事件
- ondragstart 鼠标按下拖拽元素时触发 常用 一般在这个事件中存储数据
- ondrag 在拖拽元素的过程中持续触发
- ondragend鼠标抬起拖拽元素时触发
dragstart 当鼠标在拖拽元素上按下时 触发
//当你一开始拖拽元素就会触发这个事件(鼠标按下)
oRight.ondragstart = function(){
//一旦拖拽这个元素就触发ondragstart事件
console.log('ondragstart事件')
};
drag 持续触发 当鼠标在拖拽元素上时触发 不论鼠标有没有运动
oRight.ondrag = function(){
console.log('ondrag事件');
//在拖拽元素之上(拖拽元素的虚影)就会触发ondrag事件
};
dragend 当鼠标在拖拽元素上抬起时 触发
oRight.ondragend = function(){
console.log('ondragend事件');
//当鼠标在拖拽元素抬起时触发这个事件
};//end(结束)
目标元素的事件
- ondragenter 当鼠标进入目标元素内部触发
- ondragleave 当鼠标离开目标元素内部时触发
- ondragover 当鼠标在目标元素上部移动时持续触发 常用
- ondrop 当鼠标在目标元素抬起时触发 常用
浏览器的默认行为会阻止该事件，只要在dragover阻止这个默认行为 浏览器就能检测drop事件
ondragenter 当鼠标进入到拖拽区域时触发
oLeft.ondragenter = function(){
console.log('ondragenter事件');
//鼠标进入目标元素里面触发dragenter事件
};
ondragleave 当鼠标离开到拖拽区域时触发
oLeft.ondragleave = function(e){
console.log('ondragleave事件');
//鼠标离开目标元素就会触发这个事件
};
ondragover 常用 当鼠标在拖拽区域时持续触发 不论鼠标有没有运动 (常用于清除浏览器默认事件，激活drop事件)
oLeft.ondragover = function(e){
console.log('ondragover事件');//当鼠标在目标区域上面时触发ondragover事件
//这样写很保险的阻止掉了默认行为
e.preventDefault();//阻止默认行为(必写)
e.stopPropagation();//阻止事件冒泡
return false;
};
ondrop 常用 当鼠标在目标区域抬起时触发 需要在dragover事件中阻止默认行为 默认情况下 浏览器会阻止这个事件的触发
oLeft.ondrop = function(){
//默认是浏览器无法感知ondrop这个事件的(这种情况是浏览器的默认行为)我们需要在dragover事件中阻止默认行为
console.log('ondrop事件');
};
九、Web存储
cookie、sessionStorage、localStrorage区别
- cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器之间来回传递
- cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下，存储大小限制也不同，cookie数据不能超过4k，同事因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。cookie只有设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- sesionStorage和loaclStorage不会自动把数据发给服务器，仅保存在本地。虽然也有存储大小的限制，但比cookie大的多，可以达到5M或更大。
- 数据有效期不同： sesionStorage，仅在当前浏览器窗口关闭前有效，自然不可能保持持久；作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使时同一个页面；localStorage在所有的同源创就也是共享的，cookie也是在所有的同源窗口中都是共享的。loaclStorage，始终有效，窗口或者浏览器关闭也一直保存，因此用作持久数据.
差异性
相同点：都是存储数据，存储在web端，并且都是同源
不同点
- cookie只有4k，并且每一次请求都会带上cookie，体验不好，浪费带宽
- sessionStorage和localStorage直接存储在本地，请求不携带，并且容量比cookie要大的多
- sessionStorage是临时会话，当窗口被关闭的时候九清除掉，而localStorage永久存在，除非手动清除，cookie有过期时间
- cookie和loaclStorage都可以支持多窗口共享，而sessionStorage不支持多窗口共享，但是都支持a链接跳转的新窗口
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
