1.HTML5介绍
- 所有的主流浏览器都支持h5(IE9及以上支持h5(有选择性的支持),IE8以下不支持)
- 改变了用户与文档的交互方式(多媒体)
- 增加了其他的新特性(语义特性,本地存储特性,网页多媒体,二维三维,特效(过渡、动画))
- 相对于H4:
抛弃了一些不常用的标记和属性
新增了一些标记和属性—表单属性
h5的网页代码结构更简洁
2.HTML5 新增语义标签
标签名 | 作用 |
---|---|
header | 表示页眉 |
nav | 表示导航 |
main | 文档主要内容 |
article | 文章 |
aside | 主题内容之外 |
footer | 文档或者页的页脚 |
3.HTML5新增语义标签的兼容问题
IE9及以上有选择性的支持,IE8以下不支持
解决方法:
(1)手动创建标签(注意默认创建的标签都是行级元素,行级元素设置高度无效,需转换为块级元素display:block;
)
(2)引入第三方插件 html5shiv.min.js
4.H5表单新增的type属性
1.email:输入email地址,应用于包含email地址的输入域,在表单提交时会进行完整的验证,必须包含@符号和域名
2.url:输入url地址,在提交表单时,会进行合法性验证,必须包含htpp://
3.tel:输入电话号码,在移动端会自动打开数字键盘以限制用户输入的必须是数字
4.number:输入数字,使用max设置最大值,min设置最小值,value设置当前值
5.range:范围
6.color:颜色
7.与日期相关的:
- time:时分秒
- date:年月日
- datetime:日期时间(大多是浏览器不支持,只在苹果的safari支持)
- datetime-local:日期时间
- month:月份
- week:星期
5.H5表单新增的其他属性
(1)palceholder:提示文本,提示占位
(2)autofocus:自动获取焦点
(3)autocomplete:自动完成:on打开 ,off关闭
1.必须成功提交过:提交才会有记录
2.当前添加autocomplete的元素必须有name属性
(4)required:必须输入,如果没有输入,则会阻止提交
(5)pattern:正则表达式验证
*:代表任意个
?:0个或者1个
+:1个或者多个
(6)multiple 可以进行多选文件,在 输入email邮箱中,允许输入多个邮箱
文件:<input type="file" name="photo" multiple><br>
(7)form属性,指定表单的id,在指定表单提交时,当前表单元素会被提交
6.H5表单新增元素
(1)datalist:创建选择列表
属性:
- value:具体的值
- label:辅助信息
- option可以是单标签也可以是双标签
一般和输入框一起使用:要建立输入框和datalist的连接输入框的list属性值="datalist的id值
专业:<input type="text" list="subjects">
<datalist id="subjects">
<option value="前端开发" label="前景好"></option>
<option value="python数据分析" label="工资好"></option>
<option value="java开发" label="掉发快"></option>
<option value="网络运维" label="烧脑壳"></option>
</datalist>
(2)keygen加密(生成公钥和私钥)
加密: <keygen></keygen><br>
(3)output:显示输出信息,只能显示,不能修改,语义性更强
<output>总金额:¥8888元</output>
(4)progress:进度条
属性:
- max:最大值
- min:最小值
<progress min="1" max="100"></progress>
(5)meter:度量器,衡量当前进度值
属性:
- high:规定的较高的值
- low:规定的较低的值
- max:最大值
- min:最小值
- value:当前值
<meter min="0" high="80" low="40" value="30" max="100"></meter>
<meter min="0" high="80" low="40" value="60" max="100"></meter>
<meter min="0" high="80" low="40" value="90" max="100"></meter>
7.H5-新增的表单事件
oninput:监听当前指定元素内容的改变,只要内容改变(添加内容,删除内容),就会触发这个事件
oninvalid:当验证不通过时触发,可以自定义提示信息(setCustomValidity())
oninput事件区别于onkeyup事件:
- onkeyup:键盘弹起的时候触发,每一个键的弹起都会触发一次
8.H5-新增多媒体标签
(1)audio:音频
属性:
- src:路径
- controls:控制器面板
- autoplay:自动播放
- loop:循环
<audio src="../../../前端/素材/song.mp3" controls="controls" autoplay></audio>
(2)video:视频
属性:
- src:路径
- controls:控制器面板
- autoplay:自动播放
- loop:循环
- width:宽度
- height:高度
- poster:当视频还没完全加载,或者用户还没有点击播放前的默认显示的画面,默认显示当前视频文件的第一幅画面
<video controls>
<source src="../mp4/mov_bbb.mp4" type="video/mp4">
<source src="../mp4/mov_bbb.webm" type="video/webm">
您的浏览器不支持
</video>
注意:
当设置宽高的时候,一般情况下只设置宽度或高度,让其自动的等比缩放,如果同时设置宽度和高度,那么视频并不会调整到设置的宽高,除非设置的刚好是等比例,一般只设置一个属性即可
(3)HTML5 Audio/Video中常用的方法、属性、事件
1.常用方法:
load():加载
play():播放
pause():暂停
js没有提供对视频播放控件的方式,也就意味着如果要操作视频播放,必须使用原生的js方法–dom元素
2.常用属性:
currentTime:视频播放的当前进度
duration:视频的总时间
paused:视频播放状态
3.常用事件:
oncanplay:事件在用户可以开始播放视频/音频时触发
ontimeupdate:通过该事件来报告当前的播放进度
onended:播放完时触发–重置
9.H5-获取DOM元素方式
(1)querySelector获取单个元素,如果获取的元素有多个,只会返回满足条件的第一个
- 参数:选择器名称
- 如果是类选择器,必须添加.
- 如果是id选择器,必须添加#
(2)获取满足条件的所有元素:querySelectorALL()
10.H5-操作元素类样式
(1)add方法添加指定的类样式,一次只能添加一个类样式
(2)remove方法:移除指定名称的样式(不是移除类属性),一次只能移除一个
(3)toggle方法:切换元素样式,如果之前没有指定名称的样式则添加,有则移除
(4)contain方法:判断元素是否包含某个指定的类样式,包含返回true,不包含返回false
//classList:当前元素的所有样式列表--数组
document.querySelector("li").classList.add("red");
//document.querySelector("li").className("red underline");//添加新样式的同时,要指定原有的样式,否则会覆盖掉原有的样式
document.querySelector(".blue").classList.remove("blue");
document.querySelectorAll("li")[2].classList.toggle("green");
var flag= document.querySelectorAll("li")[3].classList.contains("underline");
11.H5-自定义属性
规范:
1.data-开头
2.data-后面至少有一个字符
建议:
- 名称应使用小写,不要包含任何大写字母
- 名称中不能有任何特殊符号
- 名称不要用纯数字
<p data-school-name="itcast">好好学习</p>
<script>
window.onload=function(){
var p=document.querySelector("p");
/*
获取自定义属性的值
将data-后面的单词使用驼峰命名法连接,必须使用camel合法获取,否则为undefined,无法获取到
*/
var value=p.dataset["schoolName"];
console.log(value);
}
</script>
12.H5-网络监听接口
online:网络连接时触发
offline:网络断开时触发
window.addEventListener("online",function(){
alert("网络连通了");
});
window.addEventListener("offline",function(){
alert("网络断开了");
})
13.H5-全屏接口
全屏操作的主要方法和属性:
1.requestFullScreen():开启全屏显示
不同浏览器需要添加不同的前缀: Chrome;webkit firefox:moz ie:ms opers:o
2.cancelFullScreen():退出全屏显示
只能使用document来实现
3.fullScreenElement():是否是全屏状态
只能 使用document来实现
if(document.fullscreeElement || document.webkitFullscreenElement || document.mozFullScreenElement ||msFullscreenElement){
alert(true);
}else{
alert(false)
}
14.H5-拖拽接口
在h5中如果要拖拽,就必须为元素添加draggable=“true”,图片和超链接默认可以拖拽
拖拽事件
被拖拽元素:
ondrag:应用于拖拽元素,整个拖拽过程都会调用—持续
ondragstart:应用域拖拽元素,当拖拽开始时调用
ondragleave:应用于拖拽元素,当鼠标开始拖拽元素时调用
ondragend:应用于拖拽元素,当拖拽结束时调用
目标元素:
ondragenter:应用于目标元素,当拖拽元素进入时调用
ondragover:当保留在目标元素上时调用
ondrop:当在目标元素上松开时调用
ondragleave:当鼠标离开目标元素时调用
document.ondragstart=function(e){
console.log(e);
e.target.opacity=0.5;//设置被拖拽元素的透明度
/*通过dataTransfer来实现数据的存储与获取
setData(format,data)
format:数据的类型 text/html text/uri-list
Data:数据,一般来说是字符串
*/
e.dataTransfer.setData("text/html",e.target.id);
};
document.ondragend=function(e){
e.target.opacity=1;
};
document.ondragleave=function(e){
console.log("ondragleave");
};
document.ondrag=function(e){
console.log("ondrag");
}
//目标元素
document.ondragenter=function(e){
}
document.ondragover=function(e){
e.preventDefault();//阻止默认事件
}
// 浏览器会默认阻止ondrop事件,那么就必须在ondragover中阻止浏览器的默认行为
document.ondrop=function(e){
// 添加被拖拽的元素到当前目标元素
var id=e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));//将被拖拽元素添加到目标位置
}
document.ondragleave=function(e){
}
15.H5-地理定位接口
参考:https://www.w3school.com.cn/html5/html_5_geolocation.asp
几个IP获取地理位置的API接口:https://cloud.tencent.com/developer/article/1152362
16.H5-FileReader读取文件
方法:
- readAsText():读取文本内容。返回文本字符串,默认编码是UTF-8
- readAsBinaryString():读取任意类型的文件,返回二进制字符串,这个方法不是用来读取文件展示给用户看的,而是存储文件
例如:读取文件的内容,获取二进制数据,传递到后台,后台接收了数据之后,再将数据存下
- readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL。DataURL是一种将文件(这个文件一般是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案,DataURL是将资源转换成base64编码的字符串形式,并且将这些内容直接存储在url中—优化网站的加载速度和执行速度
- abort():中断读取
注意:readAsDataURL()方法
- 没有返回值:void 但是读取完文件之后会将读取的结果存储到文件读取对象的result中
- 需要传递一个binary large object:文件(图片或者其他可以嵌入到文档的类型)
//实现图片即时预览
<form action="">
文件: <input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br>
<input type="submit">
</form>
<img src="" alt="">
<script>
function getFileContent(){
//1.创建文件读取对象
var reader=new FileReader();
//2.读取文件,获取DataURL
var file=document.querySelector("#myFile").files;//文件存储在file表单的files属性中,它是一个数组
reader.readAsDataURL(file[0]);
reader.onload=function(){
document.querySelector("img").src=reader.result;
}
}
</script>
注意:
FileReader:提供一个完整的事件模型,用来捕获文件的状态
onabort:读取文件中断片时触发
onerror:读取文件错误时触发
onload:文件读取成功完成时触发
onloadend:读取万和城呢个时触发,无论成功还是失败
onloadstart:开始读取时触发
onprogress:读取文件过程中持续触发
17.H5-web存储
1.cookie:存储容量4k左右
2.sessionStorage:存储数据到本地,存储的容量为5MB左右
特点:
(1)数据存储在当前页面的内存中
(2)它的生命周期为关闭当前页面,关闭页面数据会自动清除
方法:
setItem(key,value):存储数据,以键值对的方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称key删除对应的value值
clear():清空所有鵆的内容
3.localStorage:存储数据到本地,存储容量大约20MB
特点:
(1)不同浏览器间不能共享数据
(2)同一浏览器的不同窗口可以共享数据
(3)永久生效,它的数据存储在硬盘上,并不会随之页面或者浏览器的关闭而清除,如果要清除可以手动清除
//存储数据
window.sessionStorage.setItem("userName",name);
//获取数据
//注意:如果找不到对应名称的key,那么会获取到null
window.sessionStorage.getItem("userName");
//删除数据
//注意:在删除时如果key值错误,则不会报错,也不会删除数据
window.sessionStorage.removeItem("userName");
18.应用程序缓存
使用HTML5,通过创建cache manifest文件,可以创建web应用的离线版本
优势:
(1) 可配置需要缓存的资源
(2) 网络无连接时仍可用
(3) 本地读取缓存资源,提升访问速度,增强用户体验
(4) 减少请求,减轻服务器负担
Cache Mainfest基础:
1.如果需要应用程序缓存,请在文档标签中包含mainfest属性
<html lang="en" manifest="demo.appcache">
每个指定了manifest的页面在用户对齐访问时都会被缓存,如果未指定manifest属性,则页面不会被缓存(除非在manifest文件中直接指定了该页面)
manifest文件建议的文件扩展名是:".appache"
2.manifest文件:简单的文本文件,告知浏览器被缓存的内容(以及不缓存的内容)
a.CACHE MANIFEST:开始
b.CACHE:在此标题下列出的文件将在首次下载后进行缓存
c.NETWORK:在此标题下列出的文件需要与服务器的连接,且不会被缓存
d.FALLBACK:在此标题下列出的文件规定当页面无法访问时的回退页面
3.完整的demo.appache文件
CACHE MANIFEST
#上一句必须放置在第一行
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/my.jpg
# *:代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK
../images.dog.jpg
#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/head.jpg ../images/banner.jpg
# /:代表所有文件
4.配置:manifest文件需要配置正确的MIME-type,即"text/cache-mainfest",必须在web服务器上进行配置
相关参考链接:
VScode开启本地服务器及本地调试:https://www.jianshu.com/p/9f332d67d90f
Win10打开internet信息服务的方法:https://jingyan.baidu.com/article/a17d5285ecafef8099c8f279.html
配置:http://www.360doc.com/content/15/0414/16/15821544_463157243.shtml