0
点赞
收藏
分享

微信扫一扫

ubuntu 网卡突然失效,ifconfig找不到enp1s0

紫荆峰 2024-01-21 阅读 9

HTML

html5新增特性有哪些

1.新增了语义化标签

标签用法
header定义文档或区块的页眉,通常包含标题,导航和其他有关信息
nav定义导航链接的容器,用于包裹网站的导航部分
section定义文档的一个独立节或区块,用于组织相关的内容
articloe定义一个独立的,完整的,可以独自分发或独立阴天的内容块,如博客文章
aside定义页面或区块的侧边栏或附属信息,通常用于显示相关的内容或广告
main定义文档的主要内容,一个页面只能包含一个main元素
footer定义文档或区块的页脚,通常包括版权信息,联系方式等内容
figure定义文档中的图像,图表,照片等单独的独立内容块
figcaption用于figure标签的标题或说明,描述与之相关的内容
video用于嵌入视频内容,支持通过多种格式进行视频播放(mp4,webm)
audio用于嵌入音频内容,支持通过多种格式进行音频播放(mp3.wav)
canvas提供了一个画布,用于使用js绘制图像,动画等内容
datalist定义输入字段(如input)的选项列表 可用于自动完成和提示用户输入
progress表示任务的进度,用于展示加载,上传等操作的进度条
meter表示度量或测量标准,用于显示范围或分数值
details定义可以展开或折叠的详细信息,通常和summary标签一起使用
summary用于details元素的摘要或标题,点击可展开或折叠详细信息
time定义日期或时间值,可以标记具体的时间点或时间范围
mark用于突出显示文本中改的一部分,通常以黄色或其他醒目颜色进行标记
output用于显示计算结果或脚本输出的容器

不常用的标签看一看环节
在这里插入图片描述

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 案例传送门

–未完待续–

举报

相关推荐

0 条评论