1.HTML5简介

2019-03-12 本文已影响4人冰冰啦

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>

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()

演示:

canvas.png
还有很多连线的属性, 例如:
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()

演示:

lineGradient.png

例子: 径向渐变

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)

演示:

1.png

更多API请参考 MDN

1.HTML5简介

1. 了解HTML5

２. 新特性

猜你喜欢

热点阅读