H5新增特性

别问，问就是菜鸡

已于 2022-09-01 13:57:58 修改

阅读量434

点赞数

分类专栏： js 文章标签： html5

于 2022-09-01 08:51:10 首次发布

本文链接：https://blog.csdn.net/qq_48637533/article/details/126596709

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5的语义化标签、表单控件、音频视频处理、本地存储机制如localStorage和sessionStorage，以及canvas画布的使用。此外，还深入讲解了src与href的区别，媒体元素的控制方法，以及拖拽事件的实现和跨文档数据传输。最后，提到了WebSocket实时通信和地理位置API的应用。

摘要由CSDN通过智能技术生成

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);
})