1. 了解HTML5
- HTML5属于上一代HTML5的新迭代语言，设计HTML5的最主要的目的就是为了在移动设备上支持多媒体．例如：
video标签和audio标签以及canvas绘图．
２. 新特性
- 新的语义标签，例如：
header,footer,nav,section,slide标签等
但是有的浏览器并不识别新的语义标签，需要做兼容性处理．目前最好的解决兼容性的方案是引入html5.js库，并通过条件判断来判断用户的浏览器是否支持新的标签（如下所示）
<!--[if lte IE 8]>
<script src="xxx/html5.min.js"></script>
<![endif]-->
以上代码只有IE浏览器才能识别，当浏览器小于等于IE8时，才会请求html5.min.js
- 多媒体标签，例如：
audio和video,代码示例如下
<video src="xxx/demo.mp4" controls autoplay loop></video>
controls: 显示播放按钮和滚动条
autoplay: 页面加载后自动播放
loop: 自动循环播放
audio标签的具体用法和video相同
- 新的表单元素和属性
<form action="http://www.baidu.com">
<!-- 点击账号时input会获取焦点 -->
<label for="account">账号:</label>
<input type="text" id="account">
</form>
简单示例,更多用法参考MDN
- HTML5提供的API
- 获取dom元素及类名和自定义属性
获取dom元素:
document.querySelector('css选择器'),只能选择一个元素
document.querySelectorAll('css选择器'),可以选择所有符合的元素
操作样式:
dom元素.classList.add('类名'),给元素添加类样式
dom元素.classList.remove('类名'),给元素移除类样式
dom元素.classList.contains('类名'),检测元素是否含有该样式
dom元素.classList.toggle('active'),切换类样式,如果元素有active样式就删除该active样式,没有就添加.
自定义属性:
data-test, 规定, 以data-为开头的属性为自定义属性.注意:属性名为test而不是data-test.
dom元素.dataset,获取元素的自定义属性,以对象的形式返回.注意,如果自定义属性名为data-test-active,则返回的对象的对应的属性名为testActive(驼峰命名法).
dom元素.dataset.自定义属性名 = 自定义属性值, 给元素设置自定义属性.
自定义属性常用于tab切换,给属性的值设置为切换的元素的id,从而达到联动效果.
- 文件操作
一个小例子如下:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="file" >
</body>
</html>
js
let input = document.querySelector('input')
// 当用户上传文件时会触发onchange事件
input.onchange = function(){
//获取上传的文件
let file = this.files[0]
//创建读取器
let reader = new FileReader()
//开始读取,可以设置读取文件的格式,这里是文本
reader.readAsText(file)
//读取成功,获取结果,异步操作
reader.onload = function() {
//读取成功时触发onload事件,reader.result就是文件的内容
console.log(reader.result)
}
}
读取器实例 reader = new FileReader() 中提供了三个接口可以设置读取文件的格式,分别为:
readAsBinaryString---将文件读取为二进制编码,readAsText---将文件读取为文本,readAsDataURL---将文件读取为dataURl(url地址类型)
文件读取时还提供了一些事件,例如:
reader.onabort, 中断时触发
reader.onerror, 出错时触发
reader.onload, 读取成功时触发
reader.onloadend, 读取完成时触发, 无论成功与失败.
reader.onloadstart, 读取开始时触发.
reader.onprogress, 读取中触发
- 获取网络状态和地理位置
window.navigator.onLine, 返回一个布尔值, true代表联网状态
window.ononline, 网络状态事件, 联网时触发
window.onoffline, 网络状态事件, 断网时触发
window.navigator.geolocation.getCurrentPosition(success,error), 只能获取一次当前的地理位置信息, 获取成功时调success回调函数, 失败调error. 每个回调函数都有一个参数msg, 代表的是位置信息,msg.coords.latitude---经度, msg.coords.longitude---纬度.
window.navigator.geolocation.watchPosition(success,error), 实时获取当前位置
- 本地存储
随着互联网的快速发展, 基于网页的应用越来越普遍, 同时也变得越来越复杂, 为了满足各种需求, 会经常在本地存储大量数据, 传统的方式我们以
document.cookie来进行存储, 但是由于其存储大小只有4k左右, 并且解析也相当复杂, 给开发带来了很多不便, HTML5提出了解决方案, 使用sessionStorage和localStorage来存储数据.
window.localStorage: 永久存储, 多窗口共享, 容量大约为20M左右.
window.sessionStorage: 临时存储(生命周期为关闭当前浏览器窗口), 同一窗口共享, 容量为5M左右.
localStorage:
window.localStorage.setItem(key,value) //设置存储内容
window.localStorage.getItem(key) //获取内容
window.localStorage.removeItem(key) //删除内容
window.localStorage.clear() //清空存储内容
sessionStorage用法和localStorage用法相同.
- canvas绘图
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
canvas{
border: 1px solid blue;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
注意, 默认的绘图区域的大小为300*150, 而且不能用
css的方式来设置绘图区域的大小, 只能通过canvas标签的width和height来设置大小
js:
// 获取canvas元素
let canvas = document.querySelector('canvas')
// 获取绘图工具上下文
let ctx = canvas.getContext('2d')
// 落笔,起点, 坐标原点在画布的左上角
ctx.moveTo(100,100)
// 连线,终点
ctx.lineTo(300,100)
// 描边, 不设置连线的样式会使用默认颜色连线
// 设置描边颜色
ctx.strokeStyle = "red"
// 每次调用stroke, 浏览器都会再次绘制连线
ctx.stroke()
// 开启新的图层, z轴
ctx.beginPath()
ctx.moveTo(100,200)
// 设置连线宽度
ctx.lineWidth = '10'
ctx.lineTo(300,200)
ctx.strokeStyle = "green"
ctx.stroke()
演示:
还有很多连线的属性, 例如:
ctx.lineJoin, 线的连接方式, 值有miter(默认值), round(圆弧), bevel(斜角)ctx.lineCap, 线的端点样式, 值有: round(圆角), square(方形直角)
例子:画一个正方形
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
ctx.strokeStyle = "red"
ctx.moveTo(100,100)
ctx.lineTo(300,100)
ctx.lineTo(300,300)
ctx.lineTo(100,300)
// 闭合路径
ctx.closePath()
ctx.stroke()
例子: 线性渐变
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 创建线性渐变方案, 参数为起点和终点坐标
let lgd = ctx.createLinearGradient(100,100,300,300)
// 设置渐变范围颜色
lgd.addColorStop(0,'green')
lgd.addColorStop(0.6,'pink')
lgd.addColorStop(0.8,'yellow')
lgd.addColorStop(1,'purple')
// 设置描边颜色为渐变方案
ctx.strokeStyle = lgd
ctx.lineWidth = "10"
ctx.moveTo(100,100)
ctx.lineTo(300,300)
// 描边
ctx.stroke()
演示:
例子: 径向渐变
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 创建线性渐变方案, 参数为起点和终点坐标
let rgd = ctx.createRadialGradient(200,200,200,200,200,0)
rgd.addColorStop(0,'pink')
rgd.addColorStop(0.5,'white')
rgd.addColorStop(1,'pink')
ctx.fillStyle = rgd
ctx.fillRect(0,0,400,400)
演示:
更多
API请参考 MDN
