讲在前面:建议在IDE集成环境下开发学习。
HTML5
一、什么是H5?
- H5并不是一个新的语言,它只是HTML语言的第五次重大的修改----版本。
- 支持:支持所有的主流浏览器(Chrome、火狐、Safari、苹果、IE及9以上),IE8以下的不支持,需要考虑兼容性。
- 改变了用户与文档的交互方式。多媒体:video、audio、canvas等。
- 增加了新特性:语义特性、本地存储特性、网页多媒体、二维三维、特效(转换、过渡)。
- 相对于H4:
进步:抛弃了一些不合理不常用的标签和属性;
新增了一些标记和属性表单;
从代码角度看,H5的代码结构更加简洁。
webstorm快捷键生成HTML文档结构:
1. html:5+tab 生成HTML5代码结构
2. html:xt+tab XHTML过渡性文档类型
3. html:4s+tab 严格按照H4的请求标准进行解析
二、H5的语义化:
通俗来讲H5语义化它的本质就是div,只不过是换了名字而已,通过用正确的标签做正确的事情,实现见名知意的效果。
意义:让页面的内容结构化,结构更加清晰,便于浏览器、搜索引擎解析,提高浏览器的性能;使得代码容易阅读;SEO搜索引擎得以优化。但是需要注意的是使用期语义化标签时,需要考虑兼容性(IE8及其以下的浏览器不支持)。
兼容性处理:
- 可以为HTML创建一个元素
document.createElement("header");
document.createElement("nav");
//注意:创建的元素默认是行内元素,需要将其转化为块级元素
header, section, footer, aside, nav, main, article, figure, main {
display: block;
}
- 针对低版本的浏览器,引入html5shiv.js
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
三、H5表单认识
- 表单input中type属性值:email、tel(不起验证作用,主要是打开手机数字键盘)、url(必须是合法的包含协议)、number(包含max/min/value属性)、range、color、time、date、datetime、datetime-local、month、week等;
- 可以通过 setCustomValidity() 方法来改变默认提示的信息;
- 表单新属性:placeholder、autofocus、autocomplete、pattern、multiple,list(结合datalist的id号来使用)等;
- 表单新元素:datalist(需要配合上input输入框来使用)、Keygen、output;
- 表单事件:oninput(兼容输入框的改变事件,只要内容变化就会触发)、onkeyup(监听键盘的抬起事件)、oninvalid (监听表单验证事件);
- 补充进度条:progress、meter(包含max/min/height/low/value属性)。
四、多媒体(audio、video)
<!--
embed:直接插入了视频文件,他的本质是调用本机上已经安装的软件,有兼容性
flash插件:安装flash插件,增加了成本,并且苹果系统不支持flash
-->
<!--
audio音频:
src:播放的音频文件 controls:音频控制面板 autoplay:自动播放 loop:循环
-->
<audio src="" controls autoplay loop></audio>
<!--
video视频:
src:播放的视频文件 controls:视频控制面板 autoplay:自动播放 loop:循环
width: 宽度 height:高度
注意:一般只需要设置宽与高一个即可,跟着比例自适应,当同是设置时,并不会跟着设置的宽高来进行缩放。
poster:当视频还没有下载或者用户还没有点击播放前,默认显示视频的第一帧画面,可以通过设置其路径来改变显示的画面
-->
<video src="" poster="" width="800" height="600" controls></video>
<!--
重点说明 source :因为不同的浏览器对视频的支持格式不同,所以我们在进行添加视频的时候需要考虑兼容性,通过source
来添加不同格式的视频,让浏览器自己来选择
-->
<video controls>
<source src="mp4.mp4" type="video/mp4">
<source src="flv.flv" type="video/flv">
</video>
在实际开发中,直接通过标签的控件属性来确定播放器样式,在不同个浏览器间显示均不一样。为了保持一致,控件样式需要自定义实现。
五、H5元素新增操作
- 获取dom元素
querySelector()、querySelectorAll() //参数可以是选择器 - 操作元素样式类
通过classlist的方法:add()、item()、remove()、toggle()、
window.onload = function(){
//默认会获取到所有li元素中的第一个,add()方法一次只能添加一个
docuemnt.querySelector("li").classList.add("red");
docuemnt.querySelector("li").classList.add("pink");
//remove()方法一次只能删除一个(删除的是类中的值而不是class属性)
document.querySelector("li").classList.remove("pink");
//toggle()切换class属性值,有则切换,无则添加
document.querySelectorAll("li")[2].classList.toggle("green");
//item() 判断是否包含指定的名称的值,返回Boolean值
var res = document.querySelectorAll("li")[3].classlist.item("red");
}
六、自定义属性
- 定义及规范:
data-开头 data-后至少有一个字符,多个单词间使用 - 来连接
建议:名称中不要包含任何大写字符,不要包含特殊字符,不要包含纯数字
<p data-school-name="test" class="class">自定义属性</p>
<script>
let className = document.querySelector("p").className;
console.log(className);
let p = document.querySelector("p");
//通过dataset来获取自定义属性,必须使用camel驼峰命名法来获取
// var result = p.dataset['schoolname']; //data-schoolname
var result = p.dataset['schoolName']; //data-school-name
console.log(result);
</script>
七、H5接口介绍
- 网络状态改变事件
//ononline事件
// window.ononline = function(){};
window.addEventListener("online",function () {
alert("网络接通了");
});
//onoffline事件
window.addEventListener("offline",function () {
alert("网络断开了");
})
- 全屏、退出全屏及是否是全屏状态接口的使用
H5中全屏等相关操作方法或属性:requestFullScreen()、cancelFullScreen()、fullScreenElement;
<script>
/*全屏操作的主要方法和属性
* 1.requestFullScreen(): 开启全屏
* 兼容性处理,不同浏览器需要加不同的前缀,使用能力测试为不同浏览器添加不同的前缀
* Chrome:webkit Firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏
* 退出全屏也不要添加前缀,不同浏览器需要通过document来退出全屏,是整个文档退出全屏显示
* 3.fullScreenElement: 是否是全屏状态,也只能通过document来判断
*
* 使用document的原因:是整个文档而不是某一个元素
* */
window.onload = function () {
let div = document.querySelector("div");
//考虑兼容性问题 全屏处理
document.querySelector("#full").onclick = function () {
if(div.requestFullScreen){
div.requestFullScreen();
}else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}else if(div.msRequestFullscreen){
div.msRequestFullScreen();
}
}
//退出全屏处理
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.msCancelFullScreen){
document.msCancelFullScreen();
}
}
//判断是否是全屏状态
document.querySelector("#isFull").onclick = function () {
//注意:使用document判断 能力测试 ,只有Firefox是标准的
if(div.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.mozFullScreenElement){
alert(true);
}else{
alert(false);
}
}
}
/*
* 能力检测:被人们广泛接受的客户端浏览器检测性形式。其目的不是识别特定的浏览器而是识别浏览器的能力。
* 采用这种方式不用顾及特定浏览器如何如何,只要确定浏览器支持特定的能力就可以给出解决方案。
* */
</script>
- 文件读取FileRead
- readAsText(): 读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认的编码是UTF-8
- readAsBinaryString(): 读取任意类型的文件,返回二进制字符串。该方法不是用来读取文件展示给用户看的,而是存储文件。例如:读取文件内容,获取二进制数据,传递给后台,后台接收到数据后,再将数据存储
- .readAsDataURL(): 读取文件获取一段以data开头的字符串,这段字符串的本质是DataURL。DateURL是将资源转化为base64编码的字符串形式,并将这些内容直接存储在url中,可以优化网站的加载速度和执行效率。
- abort(): 中断文件的读取
案例:实现一个即时预览的效果(更换头像操作等)
<!--
即时:当用户选择完图片之后就立马展示预览的处理 》》 onchange(当内容变化时触发)
预览:通过文件读取对象的readAsDataURL()方法完成
-->
<form action="">
上传图片:<input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br>
<input type="submit">
</form>
<img src="" alt="">
<script>
//即时预览处理:
function getFileContent(){
//首先创建文件读取对象
let reader = new FileReader();
/*
读取文件,获取DataURL (readAsDataURL)
没有任何返回值void,但读取完文件后,他会将读取点后的结果存储在文件读取对象的result中
不要传递一个参数binary large object:文件(图片或者其他可以嵌入到文档的类型)
上传的文件存储在file表单元素的files属性中,他是一个数组
*/
let file = document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
/*
获取数据(FileReader提供了一个完整的事件类型,用来捕获读取文件的状态):
onabort: 读取文件中断时触发
onerror:读取错误时触发
onload:读取文件成功完成时触发
onloadend:无论成功失败,读取结束时均触发
onloadstart:开始读取是触发
onprogress: 读取文件过程中持续触发
*/
reader.onload = function () {
//进行预览
// console.log(reader.result);
document.querySelector("img").src = reader.result;
}
}
</script>
-
拖拽接口
在实现拖拽效果的效果的时候,往往会从两个角度入手: 被拖拽的元素 + 目标元素
应用于被拖拽元素的事件:ondrag :整个拖拽过程中都会调用 ondragstart :当开始拖拽时调用 ondragend :当拖拽结束时调用 ondragleave :当鼠标离开拖拽元素时调用
应用于目标元素的事件:
ondragenter :当拖拽元素进入时调用 ondragover :当停留在目标元素上时调用 ondrop :当在目标元素上松开时调用 ondragleave :当鼠标离开目标元素时调用
注意事项:
1.在选择拖拽元素与目标元素时,为了考虑到实现任意元素间的拖拽效果,需要将事件绑定给 document ,并通过事件捕获的形式来确定具体的元素(e.target);
2.浏览器默认是阻止元素间的拖拽,因此需要在 ondragover 事件上,取消默认事件;
3.此外还需要注意:为了安全起见,尽量不要使用 全局变量,容易造成内存泄漏;
4. 通过dataTransfer来实现数据的存储与获。
5. 为了能够使得元素被拖动,我们需要给其设置属性:draggable=“true”;
<div class="box box1">
<p class="p1" id="p1" draggable="true">我是拖拽元素</p>
<p class="p1" id="p2" draggable="true">我是拖拽元素222</p>
</div>
<div class="box box2"></div>
<div class="box box3"></div>
<script>
//******拖拽事件:被拖拽元素 + 目标元素******
let obj = null; //一般情况下不推荐使用全局变量,容易造成内存泄漏,不安全
//应用与被拖拽元素的事件
document.ondragstart = function (e) {
let id = e.target.id;
obj = document.querySelector("#"+id);
// e.target.parentNode.style.borderWidth = '5px';
/*
通过dataTransfer来实现数据的存储于获取
setData(format,data);
format: 数据的类型, text/html text/uri-list
data: 数据,一般来说是字符串值
*/
e.dataTransfer.setData("text/html",e.target.id);
}
document.ondragend = function (e) {
// console.log("ondragend");
}
document.ondrag = function () {
// console.log("ondrag");
}
document.ondragleave = function () {
// console.log("ondragleave");
}
//应用与目标元素的事件
document.ondragenter = function (e) {
// console.log(e.target)
}
document.ondragover = function (event) {
//要想执行ondrop事件,需要在此处阻止浏览器默认事件
event.preventDefault();
}
//注意:浏览器会默认阻止ondrop事件,即默认阻止拖拽事件
//解决:必须在ondragover中阻止浏览器的默认事件
document.ondrop = function (e) {
// e.target.appendChild(obj);
//通过 e.dataTransfer.getData() 存储的数据,只能在drop事件中获取
var id = e.dataTransfer.getData("text/html");
console.log(e.target)
e.target.appendChild(document.getElementById(id));
}
document.ondragleave = function () {
// console.log("离开了目标元素")
}
</script>
- 地理定位接口
HTML5 Geolocation API 用于获得用户的地理位置。
<script>
<!--HTML5 Geolocation API 用于获得用户的地理位置-->
var x=document.getElementById("demo");
function getLocation(){
//能力测试
if (navigator.geolocation){
/*
navigator.geolocation.getCurrentPosition(success,error,option);
分别是获取地理信息成功之后的回调,失败之后的回调,调整获取当前地理信息的方式
option: 可以设置获取数据的方式
enableHighAccuracy:true/false: 是否使用高精度
timeout:设置超时时间,单位:ms
maximumAge:可以设置浏览器重新获取地理信息的时间间隔 ms
*/
navigator.geolocation.getCurrentPosition(showPosition,showError,{
enableHighAccuracy:true,
timeout:3000
});
}else{
// x.innerHTML="该浏览器不支持获取地理位置。";
x.innerHTML = "Geolocation is not supported by this.browser.";
}
}
/*
成功后的回调,如果获取地理信息成功,会将获取的地理信息传递给成功之后的回调
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度
*/
function showPosition(position){
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
/* 获取地理位置失败之后的回调 */
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERR:
x.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
提示:在实际开发中,为了能够准确的获取到地理位置,往往会采用第三方接口。http://lbsyun.baidu.com/index.php?title=jspopular3.0
- web存储(sessionStorage,localStorage)
二者的主要区别:
localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。存储容量大约 5mb;
sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。存储容量大约 5mb;
常用方法:
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
sessionStorage存储的数据的生命周期是打开的当前的页面。
cookie:存储容量大约是 4KB;
- 应用缓存
H5通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本,缓存自己想要缓存的文件。
优势:
- 离线浏览 - 用户可在应用离线时使用它们;
- 速度 - 已缓存资源加载得更快;
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<!--创建方式:manifest = "应用缓存清单文件路径,建议该文件的扩展名为appcache,本质是一个文本文件"-->
<html manifest="demo.appcache">
文件格式 demo.appcache
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
# “#”号后面是注释
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表,例如:
../images/test.jpg
# "*"号代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/test2.jpg
#配置如果文件无法获取则使用指定的文件进行代替
FALLBACK:
../images/test3.jpg ../images/temp.jgp
# "/"代表所有文件
注意:manifest 文件需要正确的配置 MIME-type,即 “text/cache-manifest”。需要在web服务器上进行配置。
- 待续…