html5新增特性

2023-12-18 05:45:14

对于这行代码，要写在html页面的最前端：

<!DOCTYPE html>

为什么要写在前面？

这是声明，是html5的新特性

对于html4来说，它有三种声明格式，而html5只需要统一声明，用来告诉浏览器文档使用哪一种HTML或者XHYML规范的。

语义化标签

新增<header>,<nav>,<section>,<article>,<aside>,<footer>标签

更好的描述和组织网页内容，使搜索引擎和浏览器可以更好的理解和处理页面结构，爬虫可以爬取更多有效信息。

增强型表单

新的表单类型
  • 邮箱验证——<input type="email">
  • 数值输入——<input type="number" min="9" max="12">
  • 文件导入——<input type="file" id="myFile" multiple>
  • 颜色选择——<input type="color">
  • 图片按钮——<input type="image" src="#" width=750 alt="">
  • 搜索框——<input type="search">
  • 手机号输入——<input type="tel">
  • 选择日期——<input type="date">，<input type="datetime-local">
  • 网址输入框——<input type="url">
新的表单属性
  • placeholder——文本占位符，提示信息
  • required——这个属性的值为bool，默认是true，输入不能为空
  • autofocus——自动聚焦到需要填写的textarea
  • autocomplete——属性有两个值，应该是on（默认），另一个是off。提示已经写过的信息（要和name="username"一起用，不然不生效）
  • min，max——限定输入的最少字数和最多字数，以字符个数计数

视频和音频

audio，video audio 和 video标签都很容易输出音频或视频流，提供便利的获取文件信息的API

Canvas绘图

提供一个通过JavaScript和HTML的canvas元素来绘制图形的方式。可以用于动画，数据可视化，图片编辑等

SVG绘图

用xml描述2d图形的语言，xml用来传输和存储数据

SVG比canvas绘图好用，SVG不容易失帧，更稳定。它比较容易编辑，只需要从描述中移除元素就可以了

地理位置

可以识别定位，并且与别人共享地理信息

获取地理位置：通过ip地址；电脑上的位置信息定位

拖放API

这只元素为可拖放，默认属性是false

<img draggable = "true">

设置了之后用setData()或者ondragstart

WebStorage

HTML4中用cookie，在用户端保存用户数据。但是他的存储内存不大，而且是携带在http请求头中，造成资源浪费，操作cookie麻烦。

在HTML5用WebStorage在客户端本地保存用户数据

WebWorker

js是单线程执行模式，所有任务只能在一个线程上执行，一次只做一件事情。

现在的计算机大多数是多核的，不能发挥CPU计算的价值。

而WebWorker为js创造了多线程环境，js在主线执行，new一个子线程在后台执行，worker完成计算的任务给主线程，主线程中的代码执行会导致浏览器响应阻塞，而子线程代码执行不会。主线程和子线程两者互补干扰，独立执行。

主流浏览器对WebWorker兼容性不高

WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

文章来源:https://blog.csdn.net/m0_73172034/article/details/135050315
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。