HTML5新增了那些新特新？

最新推荐文章于 2025-03-25 03:15:00 发布

**Crazy

最新推荐文章于 2025-03-25 03:15:00 发布

阅读量1.4k

点赞数

分类专栏： html&css 文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_52092151/article/details/122245844

版权

html&css 专栏收录该内容

1 篇文章

订阅专栏

什么是HTML5?

HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

< !DOCUTYPE html >；这是文件第一行代码声明！这样声明才可以使用HTML5的新特性

html5的新特性

1、语义化标签

新的特殊内容元素，比如：

article：定义页面内容以外的内容

aside：定义页面的侧边栏内容

footer：定义文档或节的页脚

header：规定文档或节的页眉

nav：定义导航链接

section：定义文档的节

为了在没有CSS的情况下，页面也能呈现出很好地内容结构（即使去掉css样式页面也能以一种清晰的结构展现。）

有利于SEO（搜索引擎优化）：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

1。更利于搜索引擎（爬虫）的抓取，识别（SEO的优化）和便于团队开发和维护(可维护性更高，因为结构清晰,so易于阅读)。
2。更有利于特殊终端的阅读(手机，个人助理等）。

2、表单新特性

新的表单控件，比如calendar、date、time、email、url、search

3、音频标签

很多的视频都是通过插件（比如flash）来实现的，但并不是所有的浏览器都拥有相同的插件，为了能让视频和音频在网页内播放成功，HTML5规定了一种通过video，audio来包含视频播放的标准。

video：支持的格式有ogg，MP3，webm

audio：支持的格式有ogg，Wav，mp3

该标签都包含多个source元素，source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

例：  <video width="320" height="240" controls="controls">
			<source src="movie.ogg" type="video/ogg">
			 <source src="movie.mp4" type="video/mp4">
		Your browser does not support the video tag.
		</video>

4、canvas画布标签

5、svg标签

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，SVG 用于定义用于网络的基于矢量的图形，SVG 使用 XML 格式定义图形，SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 的优势：

（1）SVG 图像可通过文本编辑器来创建和修改

（2）SVG 图像可被搜索、索引、脚本化或压缩

（3）SVG 是可伸缩的

（4）SVG 图像可在任何的分辨率下被高质量地打印

（5）SVG 可在图像质量不下降的情况下被放大

6、拖放api（draggable）

例：   <div draggable="true"></div>

（1）拖放是一种常见的特性，即抓取对象之后拖到另一个位置并释放

（2）在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

7、地理定位（Geolocation）

Geolocation API 用于获得用户的地理位置

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的

8、webworker

它是独立运行在后台的 JavaScript，与主线程区分开，内存会另开辟一个空间给他，不会影响页面的加载（性能）。

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，

起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage、onmessage。

9、Web 存储（WebStorage ）

其中包括localStorage和sessionStorage

localStorage：

存储的数据没有时间限制；存储键值对数据；大小5M左右

sessionStorage：

当用户关闭浏览器窗口后，数据会被删除；存储键值对数据；大小5M左右

sessionStorage和localStorage一样

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

10、webscoket

WebSocket是Html5定义的一个新协议，与传统的http协议不同，该协议可以实现服务器与客户端之间全双工通信。简单来说，首先需要在客户端和服务器端建立起一个连接，这部分需要http。连接一旦建立，客户端和服务器端就处于平等的地位，可以相互发送数据，不存在请求和响应的区别。

WebSocket的优点是实现了双向通信，缺点是服务器端的逻辑非常复杂。现在针对不同的后台语言有不同的插件可以使用。

很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔下，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。