h5 语义化的作用:
1、使页面内容结构化、便于浏览器、搜索引擎解析
2、即使没有css样式也以一种文档格式显示,并且容易阅读
3、有利于搜索引擎优化
4、便于阅读、维护和理解
h5的新增特性
1、语义化标签:header article footer section nav
2、表单控件:number date time email url search
3、音频和视频:audio video
4、本地离线存储:localStorage sessionStorage cookies
5、画布:canvas
src与href的区别(面试)
href是超文本引用,它是指向资源的位置,建立与目标文件的联系,不需要下载任何东西;
src目的是把资源下载到页面中;
h5 新增语义化特性
自定义数据属性 data-xxx
即自定义设置的属性,title等属性是人家有的属性,当这些属性不满足我们的需求时,可以自定义属性
格式:
data-xxx;
例
<a data-add = 'handadd'>
获取自定义属性 dataset
格式:
element.dataset.xxx(设置时data后面名称),可以获得该属性的值,
注意自定义的属性都会存放在dataset当中,dataset存储的是一个map数据结构
例:a.dataset.add
媒体元素
video 视频
格式:
<video src='视频地址' width='一般不建议与高度同时设置' height='' constrols(进度条) autoplay(自动播放) loop(循环播放) muted(静音播放) poster='封面地址'(当视频不播放时会显示)></video>
方法
play播放 :video.play()
pause暂停 : video.pause()
paused切换,检测是否是暂停状态 : video.paused()
volume控制音量 : video.volume+=0.1(域值是0-1)
当在静音的状态时+音量会报错,
当音量+到大于1时也会报错,所以需要判断。video.volume>0.9:video.volume
因为它采用的是科学浮点数的算法。
currentTime当前播放秒数 : video.currentTime+=10(单位为秒,类似于快进)
playbackRate倍速播放: video.playbackRate=3(大于1快倍速播放,<1慢速播放)
audio 音频播放
画布 canvas
格式:
<canvas width='' height=''></canvas>
方法
获得画笔
context = canvas.getContext('2d') //固定写法 一定要写
fillstyle 实心填充
context.fillstyle = 'red' // 给画笔填充红色
fillRect 绘制填充,实心的图形
context.fillRect = (x起始位置,y气质位置,宽,高)
strokeStyle 轮廓图形填充样式
context.strkeStyle = 'red' 画笔颜色
strokeRect 绘制轮廓图形
context.strokeRect = (x起始位置,y气质位置,宽,高)
线宽 lineWidth
格式:context.lineWidth = 8
clearRect 清除画布区域
context.clearRect(x,y,width,height)000
beginPath 开始路径
closePath() 结束路径
arc 绘制圆
参数:x,y,半径,开始弧度,结束弧度,布尔值(顺时针false,逆时针true)
格式:
context.arc(100,100,100,0,Math.PI,false);
context.fill()//绘制实心圆
线性渐变 createLinearGradient
格式:
// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置
var g=context.createLinearGradient(0,0,400,400)
// 添加渐变色
g.addColorStop(0,'red')
g.addColorStop(0.5,'cyan')
g.addColorStop(1,'yellow');
// 将渐变色给到填充样式
context.fillStyle=g;
context.fillRect(0,0,400,400);
径向渐变 createRadialGradient 同心圆渐变
// 声明一个渐变对象 前三个参数小圆心x轴开始位置 y轴开始位置 半径 后三个参数大圆心x轴开始位置 y轴开始位置 半径
var g=context.createRadialGradient(200,200,50,200,200,200)
// 添加渐变色
g.addColorStop(0,'red')
g.addColorStop(0.5,'cyan')
g.addColorStop(1,'yellow');
// 将渐变色给到填充样式
context.fillStyle=g;
context.fillRect(0,0,400,400)
绘制线段
需要开始路径与结束路径
context.beginPath()
//开始的点
context.moveTo(0,0)
//移动到的点
context.lineTo(100,100)
//画笔的颜色
context.strokeStyle = 'red'
//绘制线段
context.stroke()
//结束路径,如果需要绘制的线段闭合,放在画笔颜色前。
context.closePath()
绘制图片
img = new Image() //获得一个img标签
igm.src = '图片路径'
//绘制图片
context.drawImage(img/vedio, 绘制的x轴,绘制的y轴,宽,高)
注意!!可能会出现img加载完就画会出现问题,所以最好加上,img.onload方法
绘制视频与 请求动画帧 requestAnimationFrame
前提:页面中要存在一个视频
function draw(){
context.drawImage(vedio, 绘制的x轴,绘制的y轴,宽,高)
//请求动画帧,可以使画布的视频随着video的播放而播放
requestAnimationFrame(draw)
}
draw()
绘制文本 fillText / strokeText
格式:context.fillText('文本内容',绘制的x点,绘制的y点)
strokeText 同
前端/web存储
查看cookie等存储
谷歌:右键检查 ---》Application---->Storage
火狐:右键检查--》存储
分为cookie与WebStroge ,webStroage分为sessionStroage与localStorage
Cookie
引入
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>
cookie的设置与获取与移除
设置:Cookies.set('属性名','属性值',{expires:cookie存储的天数})
获取:Cookies.get('属性名')
移除:Cookies.remove('属性名')
特点
1.产生于服务器端 保存于客户端
2.面向服务器的,同一服务器/作用域的cookie时共享的,---》即ip地址一样都是共享的。例:我们用本地file打开,那么就算我们用的是不同的文件打开,我们的cookie依然是共享的,用file于127.0.0.1打开就共享不同的cookie
3.有大小限制4kb
webStroage
会话存储 sessionStorage
针对于选项卡的存储:当选项卡关闭或浏览器关闭,即会话存储失效
设置获取于移除
设置:sessionStorage.setItem('属性名','属性值'):注意属性值可以是任何类型的数据
获取:seesionStorage.getItem('属性名')
移除:sessionStorage.removeItem('属性名') / sessionStorage.clear() 全部清除
特点
1.与cookie一样,同服务器服务器共享,
2.选项卡关闭,那么会话存储失效
3.存储数据可以达到5M甚至更大
本地存储 localStorage
设置获取与移除
设置:localStorage.setItem('属性名','属性值')
获取:localStorage.getItem('属性名')
移除:localStorage.removeItem('属性名') / localStorage.clear() 全部清除
特点
1.将数据存储到本地磁盘,即使选项卡关闭或浏览器关闭依旧存在,要手动删除
2.传输数据可以达到5M甚至更大
拖拽事件
可以实现把元素节点进行拖拽到某个放置元素里, 进行一个数据的传输
设置元素可拖拽 :设置属性 draggable = 'true'
以下事件在拖拽的时候会一直触发,最好设置节流与防抖事件。
放置事件
放置事件是给放置元素用的,
注意当前的放置元素默认是不让元素放置的,要将放置元素设置为可放置,event.preventDefault()
dragenter 进入放置元素
elemnt.ondragenter = function(){}
drageover 正在放置元素内移动
elemnt.ondrageover = function(){}
drop 将拖动元素放在放置元素内
elemnt.ondrop = funtion(){}
拖动事件
拖动事件是给拖动元素使用的
dragstart 开始拖动
elemnt.ondragStart = function(){}
drag 正在拖动
elemnt.ondrag = function(){}
dragend 拖动结束
elemnt.ondragend = function(){}
数据传输
设置传输数据
event.dataTransfer.setData('属性名',’属性值‘)
获取传输的数据
event.dataTransfer.getData('属性名')
拖拽事件总结
1.分清楚拖放元素,
2.取消放置元素默认行为,设置成允许放置
3.给拖拽元素绑定拖拽事件,给放置元素设置放置事件
4.通过传输id,将节点追加到放置元素中,append
5.拖拽事件的事件流 开始拖拽dragstart --> 正在拖动 drag --> 拖动到放置元素dragenter --> 放置 drop --> 拖拽结束 dragend
6.注意在拖进去再拖出来时,如果是父子元素的关系,需要进行禁止事件冒泡,否则无法实现
跨文档数据传输
普通传输
一般通过a标签进行跳转,且参数会被拼接到地址栏里面,通过location.search可以查看我们拼接的参数,
例:?name=zhangsan&age=12
跨文档传输
window.open(path)打开另一个页面
返回值是返回的是我们打开的窗口的对象
var win = window.open('./b.html')
window.postMessage() 发送数据
参数: window.postMessage(要发送的数据, 发送到的地址(注意不能使用file协议获取))
例: win .postMessage('hello','http://127.0.0.1')
接受数据 window.onmessage
格式:
window.onmessage = function(event){ var data = event.data ;//接受的数据 var ip = event.origin//页面的来源 }
总结
1.给a页面打开b窗口 var win = window.open(‘./b.html’)
2.在a页面设置发送的数据 win .postMessage(‘hello’,‘http://127.0.0.1’) ip
3.b页面接受数据 window.onmessage
使用内联框架 进行跨文档传输
步骤
1.<iframe src = './b.html' frameborder = '0'></iframe> 在a页面进行
2. 获取内联框架 win =document.querySelector('iframe').contentWindow; // 这个窗口的是b页面的信息
3. 发送数据 window.postMessage(要发送的数据, 发送到的地址)
websocket
是一个ws协议,需要服务器的支持,允许服务器主动向客户端推送数据,(即全双工通信协议)http是不会允许主动推送的。它的连接是实时的,长连接,需要服务器的支持ws协议才可以。
连接步骤
创建websocket 对象
var socket = new WebSocket('ws:ip地址')
监听服务器的消息推送
scoket.onmessage = function (event) {
console.log(event.data);
}
监听服务器与webscoket连接成功事件
scoket.onopen= function(){}
给服务器发送数据
scoket.send(数据)
连接关闭监听
scoket.close = function(){
}
手动关闭连接
setTimeout(() => {
scoket.close()
}, 5000);
5秒以后关闭,它不会自动关闭(但不建议)
地理位置
它也是百度地图/高德地图通过浏览器定位的实现原理。获取地理位置的api。
window.navigator.geolocation.getCurrentPosition(position=>{
console.log(position);
})