HTML 5

作者: majun00 | 来源:发表于2017-12-04 18:38 被阅读0次

新增的标签

多媒体标签
- audio
  - src,url 要播放的URL
  - autoplay 自动播放
  - preload 在页面加载时进行加载,并预备播放
  如果使用 "autoplay",则忽略该属性
  - loop 循环播放
  - controls 向用户显示控件,比如播放按钮
  - video
  - src,url
  - autoplay
  - preload
  - loop
  - controls
  - width height 设置视频播放器的宽度高度
  > 一般只设置宽度或者高度
  - poster 指定视频还没有完全下载完毕,或者用户没有点击播放前显示的封面,默认显示当前视频文件的第一副图像
  
  因为不同的浏览器所支持的视频格式不一样,为了保证用户能够看到视频,我们可以提供多个视频文件让浏览器自动选择
  html <video controls> <source src="mp3/flv.flv" type="video/flv"> <source src="mp3/mp4.mp4" type="video/mp4"> </video>
fieldset 带标题的框

用法:form fieldset legend(为fieldset元素定义标题)

progress 进度条, meter 度量器用于标示级别
- high:number 定义度量的值位于哪个点,被界定为高的值
- low:number 定义度量的值位于哪个点,被界定为低的值
- max:number 定义最大值,默认值是 1
- min:number 定义最小值,默认值是 0
- optimum:number 定义什么样的度量值是最佳的值
- value:number 定义度量的值
datalist 下拉列表(不常用)
keygen (不常用)
output 用于展示内容,只能展示,不能进行编辑(不常用)

新增的表单属性:

placeholder 占位符
required 验证条件,必填项
pattern 正则表达式,验证表单
autofocus 获取焦点
autocomplete 自动完成

on:打开,off:关闭,
必须成功提交过,且添加autocomplete的元素必须有name属性

multiple 文件上传多选或多个邮箱地址
novalidate 关闭验证,可用于form标签
form 指定表单项属于哪个form

处理复杂表单时会需要,当某个表单元素并没有包含在form中时,可在属性中用form属性指定表单id

新增的表单输入类型

search：搜索框
email : 提供了默认的电子邮箱的完整验证
tel：能够在移动端打开数字键盘
number：只能输入数字(value=""max=""min="")
url：只能输入url格式(必须包含http://)
file
time：时间
date：日期
range：范围,可以进行拖动(value=""max=""min="")
color：拾色器,可通过value进行取值
datetime：时间日期(不常用)
month：月份
week：星期

新增的表单事件：

oninput 用户输入内容时触发,可用于移动端输入字数统计
oninvalid 验证不通过时触发

DOM扩展

获取元素：
- document.querySelector('selector')
获取单个元素,如果获取的元素不止一个,那么只会返回满足条件的第一个元素。如果是类选择器,必须添加.,如果是id选择器,必须添加# ,否则当成标签处理
- document.querySelectorAll('selector')
> 获取满足条件的所有元素,以类数组形式存在
类名操作：
- classList.add('class')
- classList.remove('class')
- classList.toggle('class')
- classList.contains('class') 检测是否存在指定class
- classList.item(n) 获取样式
自定义属性

<p data-school-name="itcast"></p>

var value=p.dataset["schoolName"];

网络接口

ononline:网络连通的时候触发这个事件
onoffline:网络断开时触发

window.addEventListener("online",function(){
    alert("网络连通了");
});
window.addEventListener("offline",function(){
    alert("网络断开了");
})

全屏接口

requestFullScreen():开启全屏显示
cancelFullScreen():退出全屏显示
fullScreenElement:是否是全屏状态

不同浏览器需要添加不同的前缀chrome:webkit firefox:moz ie:ms opera:o
document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement 注意此时的拼写

window.onload=function(){
    var 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(){
        if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
            alert(true);
        }
        else{
            alert(false);
        }
    }
}

FileReader 读取文件内容

- .readAsText():读取文本文件,返回文本字符串,默认编码是UTF-8
- .readAsBinaryString():读取任意类型的文件,返回二进制字符串
这个方法不是用来读取文件展示给用户看,而是存储文件
例如：读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据存储
- .readAsDataURL():
读取文件,获取一段以data开头的字符串,
这段字符串的本质就是DataURL,
DataURL是一种将文件嵌入到文档的方案,
(一般就是指图像或者能够嵌入到文档的文件格式)DataURL是将资源转换为base64编码的字符串形式,
并且将这些内容直接存储在url中,优化网站的加载速度和执行效率

FileReader提供一个完整的事件模型,用来捕获读取文件时的状态

- onabort:读取文件中断片时触发
- onerror:读取错误时触发
- onload:文件读取成功完成时触发
- onloadend:读取完成时触发,无论成功还是失败
- onloadstart:开始读取时触发
- onprogress:读取文件过程中持续触发
- abort():中断读取

<form action="">
    文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
    <input type="submit">
</form>
<img src="" alt="">

var div = document.querySelector("div");
function getFileContent() {
    var file = document.querySelector("#myFile").files[0];
    //文件存储在file表单元素的files属性中,它是一个数组
    var reader = new FileReader();
    //创建文件读取对象
    reader.readAsDataURL(file);
    //读取文件,获取DataURL
    //需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
    //读取完文件之后,它会将读取的结果存储在文件读取对象的result中,void说明没有任何的返回值
    reader.onload = function () {
        document.querySelector("img").src = reader.result;
    }
}

拖拽接口

应用于拖拽元素:
- ondragstart 拖拽开始时调用
- ondragleave 鼠标离开拖拽元素时调用
- ondrag 整个拖拽过程都会调用--持续
- ondragend 拖拽结束时调用
应用于目标元素:
- ondragenter 当拖拽元素进入时调用
- ondragleave 当鼠标离开目标元素时调用
- ondragover 当停留在目标元素上时调用
- ondrop 当在目标元素上松开鼠标时调用

注: 在h5中,如果想拖拽元素,就必须为元素添加标签属性draggable="true",图片和超链接默认就可以拖拽

dataTransfer

通过dataTransfer来实现数据的存储
e.dataTransfer.setData(format,data);
format:数据的类型：text/html text/uri-list
Data:数据:一般来说是字符串值
e.dataTransfer.setData("text/html", e.target.id);
通过e.dataTransfer.setData存储的数据,只能在drop事件中获取
e.dataTransfer.getData(format,data);
var id = e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));

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();
    //浏览器默认会阻止ondrop事件,我们必须在ondragover中阻止浏览器的默认行为
}
document.ondrop = function (e) {
    var id = e.dataTransfer.getData("text/html");
    e.target.appendChild(document.getElementById(id));
}

地理位置接口 (不常用)

var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error, option)
    } else {
        x.innerHTML = "Geolocation is not supported by this browser."
    }
}
function success(position) { //注意position
    x.innerHTML = position.coords.latitude + position.coords.longitude;
}
function error(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_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
getLocation();

注意:
1. navigator.geolocation.getCurrentPosition(showPosition,showError,{});
或navigator.geolocation.getCurrentPosition(success,error,option);
navigator.watchPosition(successCallback, errorCallback, options)
2.option:可以设置获取数据的方式
- enableHighAccuracy:true/false:是否使用高精度
- timeout:设置超时时间,单位ms
- maximumAge:可以设置浏览器重新获取地理信息的时间间隔,单位是ms
3.
- position.coords.latitude 纬度
- position.coords.longitude 经度
- position.coords.accuracy 精度
- position.coords.altitude 海拔高度

sessionStorage,localStorage

window.sessionStorage

存储容量5mb左右
本质是存储在当前页面的内存中,其它页面和浏览器无法获取数据
生命周期为关闭当前页面,关闭页面,数据会自动清除

window.localStorage

存储容量20mb左右
不同浏览器不能共享数据,但是在同一个浏览器的不同窗口中可以共享数据
永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器的关闭而清除.如果想清除,必须手动清除

.setItem(key,value):设置数据,以键值对的方式存储
.getItem(key):通过指定的键获取对应的值内容
.removeItem(key):删除指定的键及对应的值内容
.clear():清空所有存储内容

应用缓存

<html lang="en" manifest="demo.appcache">

CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
#后面写注释

#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg

#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件

HTML 5

新增的标签

新增的表单属性:

新增的表单输入类型

新增的表单事件：

DOM扩展

网络接口

全屏接口

FileReader 读取文件内容

拖拽接口

dataTransfer

地理位置接口 (不常用)

sessionStorage,localStorage

应用缓存

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读