html5有哪些新特性

128 阅读2分钟

html给我们带来了很多的新的api,这些api已经被我们广泛使用,现在我们就来看看具体有哪些新特性

语义化标签

  • HTML5 引入了许多新的语义化标签,如<header><nav><article><section><aside><footer>等。这些标签使得网页的结构更加清晰。
  • 那么关于语义化的标签的好处,我之前已经讲过,此处就不再重复

多媒体支持增强

  • 音频( <audio> )和视频( <video> )标签:在 HTML5 之前,要在网页上播放音频和视频需要借助第三方插件(如 Flash)。HTML5 的<audio><video>标签改变了这一情况

画布( <canvas> )元素

  • <canvas>标签提供了一个可以使用 JavaScript 在网页上绘制图形的区域。例如,可以绘制简单的几何图形、复杂的图表,甚至实现简单的游戏。

本地存储

  • Local Storage:它允许网页在用户的浏览器中存储数据,这些数据在浏览器关闭后仍然保留。例如,可以用它来存储用户的偏好设置、登录凭证(在一定安全措施下)等
  • Session Storage:与 Local Storage 类似,但数据在浏览器会话结束(即关闭浏览器窗口)时就会被删除。它适用于存储临时数据,比如购物车中的商品信息,只要用户不关闭浏览器窗口,这些信息就会一直存在

表单增强

  • HTML5 对表单进行了多种增强。例如,新增了一些输入类型,如emailurlnumberdate等。
  • 这些新特性使得表单的开发更加方便,同时也提高了用户输入数据的准确性

Web Workers

  • Web Workers 允许在后台线程中执行 JavaScript 代码,而不会阻塞主线程。这对于处理复杂的计算任务或长时间运行的任务非常有用。

跨文档消息传递

  • 允许不同源(域名、端口、协议)的文档之间安全地交换信息。这在处理多个网页(例如,一个网页嵌入在另一个网页的 iframe 中)之间的交互时非常有用

地理定位(Geolocation API)

  • 允许网页获取用户的地理位置信息。用户在访问支持地理定位的网页时,浏览器会询问是否允许该网页获取其位置。
  • 先如今很多网页的业务功能都是基于定位的,比如外卖类网站

拖放(Drag and Drop API)

  • 使网页元素能够被拖放,增强了用户与网页之间的交互性。

Web 存储 - IndexedDB

  • IndexedDB 是一种在浏览器中存储大量结构化数据的机制,它比 Local Storage 和 Session Storage 更适合存储复杂的数据结构,如对象数组等。
  • 其实它就是一个本地数据库,功能非常的强大

WebSocket

  • websocket 相比大家一点不会陌生,如今他应用于非常的场景