2023html5常见的新特性有哪些

html5常见的新特性：1、Canvas绘图；2、表单元素；3、语义化标签；4、媒体元素；5、地理定位；6、拖放API；7、WebWorker；8、WebStorage；9、WebSocket；10、SVG绘图。html5是最新的html标准，专门为承载丰富的 web 内容而设计的，并且无需额外插件，提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5是什么：

1、HTML5 是最新的 HTML 标准。

2、HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

3、HTML5 拥有新的语义、图形以及多媒体元素。

4、HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

5、HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5常见的新特性：

一、Canvas元素

Canvas元素用于在网页上绘制图形，有多重绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas通过js绘制2d图形，并逐像素进行渲染，且假若在图片完成后进行修改，整个场景就会重新绘制。

二、表单元素

（1）新增的表单元素

<datalist>：元素规定输入域的选项列表，使用<input>元素的list元素与<datalist>元素的id绑定；

<keygen>：提供一种检验用户的可靠方法，标签规定用于表单的密钥对生成器字段；

<output>：用于不用类型的输出，比如计算或脚本输出。

（2）新增的表单属性

placehoder属性：简短的提示在用户输入值前会显示在输入域上，既默认框提示；

required属性：是一个boolean属性，要求填写的输入域不为空；

pattern属性：描述了一个正则表达式用于验证<input>元素的值；

max/min属性：最大最小值；

step属性：为输入域规定合法的数字间隔；

height/width属性：用于image类型的<input>标签的图像高度和宽度；

autofocus属性：是一个boolean属性，在页面加载时自动获得焦点；

multiple属性：是一个boolean属性，规定<input>元素中选择多个值。

三、语义化标签

语义化标签既是使标签有自己的含义，语义化标签的优势：（1）使界面的代码结构清晰，方便代码的阅读和团队的合作开发；（2）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页；（3）有利于搜索引擎优化（SEO）。

四、媒体元素

播放音频文件的元素<audio>————<audio controls>

（1）control属性提供播放暂停和音量控件；

（2）<audio>和<audio/>之间插入浏览器不支持的<audio>元素的提示文本；

（3）允许使用多个<source>元素用来链接不同的音频文件，浏览器使用第一个支持的音频文件；

（4）支持三种音频格式文件：mp3、wax、ogg。

播放视屏文件的元素<video>

（1）control属性提供播放暂停和音量控件，也可以使用dom操作：play()和pause()；

（2）video元素提供了width和height控制视频的尺寸。如果设置了就会在页面加载时保留，没设置就不保留，页面根据原始视频改变。

五、地理定位

HTML5使用getCurrentPosition()方法来获取用户的位置，可以基于此实现计算位置距离。

六、拖放API

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

拖放的源对象(可能发生移动的)可以触发的事件——3个：

dragstart：拖动开始drag：拖动中dragend：拖动结束

整个拖动过程的组成：dragstart*1 + drag*n + dragend*1。

拖放的目标对象(不会发生移动)可以触发的事件——4个：

dragenter：拖动着进入dragover：拖动着悬停dragleave：拖动着离开drop：释放

整个拖动过程的组成1：dragenter*1 + dragover*n + dragleave*1；

整个拖动过程的组成2：dragenter*1 + dragover*n + drop*1。

七、Web Worker

当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。Web Worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时Web Worker在后台运行。

八、Web Storage

Web Storage是H5引入的一个帮助解决cookie存储本地缓存的重要功能。早些时候，本地存储使用的是cookies。但是Web存储需要更加的安全与快速，而且Web Storage中有5M容量，cookie只有4k。

九、Web Socket

WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。当你获取Web Socket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。

十、SVG绘图

SVG是指可伸缩的矢量图形，它是一种使用XML描述2D图形的语言。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

延伸阅读

常见的html5事件有哪些：

常见的html5事件有：1.一般事件；2.页面相关事件；3.表单相关事件；4.滚动字幕事件；5.编辑事件；6.触发的事件；7.外部事件。

1.一般事件

onClick：鼠标点击事件，多用在某个对象控制的范围内的鼠标点击；onDblClick：鼠标双击事件；onMouseDown：鼠标上的按钮被按下了；onMouseUp：鼠标按下后，松开时激发的事件；onMouseOver：当鼠标移动到某对象范围的上方时触发的事件；onMouseMove：鼠标移动时触发的事件；onMouseOut：当鼠标离开某对象范围时触发的事件；onKeyPress：当键盘上的某个键被按下并且释放时触发的事件；onKeyDown：当键盘上某个按键被按下时触发的事件；onKeyUp：当键盘上某个按键被按放开时触发的事件。

2.页面相关事件

onAbort：图片在下载时被用户中断；onBeforeUnload：当前页面的内容将要被改变时触发的事件；onError：捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误；onLoad：页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成；onMove：浏览器的窗口被移动时触发的事件；onResize：当浏览器的窗口大小被改变时触发的事件；onScroll：浏览器的滚动条位置发生变化时触发的事件；onStop：浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断；onUnload：当前页面将被改变时触发的事件。

3.表单相关事件

onBlur：当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]；onChange：当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]；onFocus：当某个元素获得焦点时触发的事件；onReset：当表单中RESET的属性被激发时触发的事件；onSubmit：一个表单被递交时触发的事件。

4.滚动字幕事件

onBounce： 在Marquee内的内容移动至Marquee显示范围之外时触发的事件；onFinish：当Marquee元素完成需要显示的内容后触发的事件；onStart：当Marquee元素开始显示内容时触发的事件。

5.编辑事件

onBeforeCopy HTML:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件；onBeforeCut：当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件。

6.触发的事件

onBeforeEditFocus：当前元素将要进入编辑状态；onBeforePaste：内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件；onBeforeUpdate：当浏览者粘贴系统剪贴板中的内容时通知目标对象；onContextMenu：当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu=”return false”就可禁止使用鼠标右键了]；onCopy：当页面当前的被选择内容被复制后触发的事件；onCut：当页面当前的被选择内容被剪切时触发的事件；onDrag：当某个对象被拖动时触发的事件 [活动事件]；onDragDrop：一个外部对象被鼠标拖进当前窗口或者帧；onDragEnd HTML:当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了；onDragEnter：当对象被鼠标拖动的对象进入其容器范围内时触发的事件；onDragLeave：当对象被鼠标拖动的对象离开其容器范围内时触发的事件；onDragOver：当某被拖动的对象在另一对象容器范围内拖动时触发的事件[活动事件]；onDragStart：当某对象将被拖动时触发的事件；onDrop：在一个拖动过程中，释放鼠标键时触发的事件；onLoseCapture：当元素失去鼠标移动所形成的选择焦点时触发的事件；onPaste：当内容被粘贴时触发的事件；onSelect：当文本内容被选择时的事件；onSelectStart HTML：当文本内容选择将开始发生时触发的事件。

7.外部事件

onAfterPrint：当文档被打印后触发的事件；onBeforePrint：当文档即将打印时触发的事件；onFilterChange：当某个对象的滤镜效果发生变化时触发的事件；onHelp：当浏览者按下F1或者浏览器的帮助选择时触发的事件；onPropertyChange：当对象的属性之一发生变化时触发的事件；onReadyStateChange：当对象的初始化属性值发生变化时触发的事件。

以上就是html5常见的新特性有哪些的详细内容，更多请关注zzsucai.com其它相关文章！