HTML

html5新增特性有哪些

1.新增了语义化标签

不常用的标签看一看环节

1.datalist

<label for="qupup"></label>
  <input list="quan" name="qupup" id="qupup" />
  <datalist id="quan">
    <option value="小全">
    <option value="upup">
  </datalist>

2.progress

<progress value="20" max="100">50%</progress>

3.meter

 <meter value="40" max="100">111</meter>

4.detail summary

 <!--open 默认打开-->
    <details>  
      <summary>小全UPUP</summary>  
      <p>看什么看不该看的别看</p>  
    </details>

5.time

 <!--datetime 提供的是机器可读的值 肉眼看不出来啥东西-->
    <p>The event will take place on <time datetime="2023-07-19T10:00:00">July 19th at 10:00 AM</time>.</p>
    <p>The event will take place in <time datetime="P3D">3 days</time>.</p>

 <mark>真的吗</mark>111

2.新增了音频（audio）和视频(video）标签
在html中可以使用audio标签来嵌入音频内容，标签可以包含一个或多个音频资源。资源使用src或者元素去指定 浏览器会挑选合适的去使用

<audio controls>  
  <source src="audio.ogg" type="audio/ogg">  
  <source src="audio.mp3" type="audio/mpeg">  
  您的浏览器不支持音频元素。  
</audio>

音频标签有许多属性，这些属性可以控制音频的播放，音量，循环等
1.autoplay:此属性允许音频在也加载完成后自动播放，需要注意的是，不是所有的浏览器都支持此属性。
2.controls：此属性用于显示音频控制栏，包括播放，暂停和音量控制等
3.loop：此属性允许音频循环播放
4.muted：此属性用于静音音频
5.preload 此属性用于预加载音频 可选值有 auto, metadata 和none （是否在页面加载时就开始下周载）
6.src 此属性用于指定音频文件的url地址
7.volume 此属性用于设置音频的音量，取值范围0-1

在html中使用video标签来嵌入视频内容

<video width="320" height="240" controls>  
  <source src="movie.mp4" type="video/mp4">  
  <source src="movie.ogg" type="video/ogg">  
  您的浏览器不支持视频标签。  
</video>

视频标签的常用属性同音频标签
（在谷歌浏览器下需要静音才能实现视频的自动播放）
3.新增了canvas和svg绘图
canvas 是一个画布,提供了一个可执行js脚本的区域，用于绘制图像，渲染动画和实现交互效果。canvas元素通过使用js api 可以在浏览器上绘制任意形状，大小和颜色的图像，适应各种需求。canvas具有灵活性，高性能，跨平台等优点。

html 中的svg是一种基于xml的矢量图形标准，用于在web页面上绘制二维图像。svg是矢量图形标准，因此在不同的社保和分辨率下效果显示较好，而不会像位图图像那样出现失真或者模糊的情况。同时,svh也支持交互和动画效果，可以创建具有高度交互性的web页面

canvas和svg的区别
1.矢量与像素：canvas是像素图，二svg是矢量图。这意味着canvas上的图像是通过像素进行绘制的，放大后会失真。相反svg是矢量图形可以无损的进行放大缩小
2.渲染方式: canvas使用的是像素渲染的方式，这意味着它适合于绘制复杂的，由像素构成的图像。而svg则使用的是矢量渲染的方式，更适合绘制由数学函数定义的图像.
3.交互性 canvas的交互性交弱，通常需要通过Js来处理用户的输入。而svg则提供了更多的交互性，可以直接在svg元素上添加事件处理器
4.文件大小：由于canvass使用的是像素渲染的方式，所以在同样的显示效果下,canvas需要更多的存储空间.svg一般都比较小
5.可编辑性 :canvas通过Js进行绘制，一旦绘制完成就很难直接编辑，而svg的图像是xml格式的,可以直接编辑和修改

4.新增了地理定位
Geoloaction （地理定位）是一种用于定位用户位置的技术。通过使用html5地理定位api。开发人可以在网站或应用程序中获取用户的地理位置信息，例如经度和维度坐标。

 //此种方式获取 会弹框询问是否允许
        function getgeolocation(){
            if(navigator.geolocation){
                //返回设备的位置
                navigator.geolocation.getCurrentPosition((position)=>{
                  let lat=  position.coords.latitude
                  let lon=position.coords.longitude
                  console.log(lat,lon)

                })
            }
        }
        getgeolocation()

5.新增了拖拽API
html5引入了拖放(Drag and Drop) api，使得开发人员可以创建更丰富和交互性强的web应用程序。拖放api允许用户拖动元素病将其放置到目标位置。适用于，拖拽上传，列表排序 创建自定义画布等功能。
1.draggable属性：用于设置元素是否可以被拖动。将其设置为true，则元素可被拖动。
2.ondragstart 事件：当拖动操作开始触发。开发人员可以定义改时间处理程序一定制拖拽行为。
3.ondragover事件:当元素在正在被拖动病悬浮在目标上方的时候触发。该时候处理程序用于控制拖动的行为。例如允许放置或禁止放置
4.ondrop事件:当元素被放置到目标位置时触发。开发热源可以定义该事件的处理程序以处理房主操作的结果。
5.draggable属性：返回元素是否可以被拖动的状态，或设置该属性值
6.draggable 方法:使元素开始拖动或结束拖动。
7.DataTransfer 对象：在拖放的操作中用于存储和传输数据。可以使用setData（）方法设置要传输的数据类型和值。使用getData方法获取传输的数据

6.新增了多线程技术web Worker
html5通过 web worker API实现了多线程的技术. web worker允许js焦恩创建多个线程，以充分利用多喝cpu的计算能力。这些子进程在后台进行，不会影响页面的性能和响应用户的交互。
使用web worker，可以将耗时的计算任务交给后台进程处理，而不会阻塞主进程，从而提高了页面的响应速度。子线程不能直接操作dom，但可以通过发生和接收消息与主线程进行通信
1.worker ：用于创建新的线程。可以调用worker（）构造函数并传入一个脚本url来创建一个新的worker对象。
2.postMessage：用于向worker发送消息，可以将任意数据作为参数传递给postMessage（）方法，数据将别序列化传递给worker。
3.onmessage：是worker对象的一个事件处理程序，用来接收来自主线程的消息。在主线程中向worker发生消息时，消息将被传递给onmessage事件处理程序
4.onerror 是worker对象的一个事件处理程序，用于处理worker中发生的错误。当worker只能怪发生错误时，错误被传递给onerror事件除了程序。
优点：
1.能够在后台运行，不会阻塞主进程，提高了页面的响应速度
2.可以利用多核CPU的计算能力，提高程序执行效率
3.可以与主线程进行通信，方便数据的传递和处理

7.新增了即时通讯web socket
web socket 案例传送门

–未完待续–