html5新特性总结

最新推荐文章于 2024-08-26 10:36:21 发布

completist00

最新推荐文章于 2024-08-26 10:36:21 发布

阅读量267

点赞数 2

分类专栏： HTML5 移动端前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_43623056/article/details/104998102

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

html5新特性

语义化标签
表单新特性
视频和音频
Canvas 与 SVG 绘图
地理定位
拖放API
WebWorker
WebStorage
WebSocket

语义化标签

html5语义标签，可以使开发者更方便清晰构建页面的布局,让标签有含义。

标签	描述
header	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档中的节
article	定义文章
aside	定义页面以外的内容
details	定义用户可以看到或者隐藏的额外细节
summary	标签包含details元素的标题
dialog	定义对话框
figure	定义自包含内容，如图表
main	定义文档主内容
mark	定义文档的主内容
time	定义日期/时间

表单新特性

html5修改一些新的input输入特性，改善更好的输入控制和验证

输入类型	描述
color	主要用于选取颜色
date	选取日期
datetime	选取日期(UTC时间)
datetime-local	选取日期（无时区）
month	选择一个月份
week	选择周和年
time	选择一个时间
email	包含e-mail地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码和字段
search	用于搜索域
range	一个范围内数字值的输入域

html5新增表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定元素中可选择多个值

视频和音频

音频：

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
  Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

视频：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <embed src="movie.swf" width="320" height="240" />
</video>

上例中使用了 4 中不同的视频格式。
HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。
如果均失败，则回退到 <embed> 元素。

<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。

Canvas 与 SVG 绘图

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

地理定位

HTML5 Geolocation API 中 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

拖放API

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取对象并拖入不同的位置。
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

WebWorker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

Web Worker 有以下几个使用注意点。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

WebStorage

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据（永久存储，除非手动清除）
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

两者存储方式之间相同点与区别：

a.生命周期：
localStorage的生命周期是永久的，关闭页面或浏览器之后数据也不会消失。除非主动删除数据，否则数据永远不会消失。
sessionStorage在关闭了浏览器窗口后就会被销毁。
b.存储大小：
localStorage和sessionStorage的存储数据大小一般都是：5MB
c.存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
d.存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
e.应用场景：
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
sessionStorage：敏感账号一次性登录。

WebStorage相比较于Cookie的优点：

存储空间更大：cookie为4KB，而WebStorage是5MB；
节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

WebSocket

WebSocket 是一种网络通信协议，WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

completist00

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5新特性总结

1.说下HTML5的新特性？HTML5新增了语义化标签、音频视频、地理定位、canvas、储存方式等新特性。(1).语义化的优点有哪些？让标签有含义；增强可读性；使页面结构清晰；便于团队开发和维护；优化搜索引擎。(2).H5储存的几种方式？本地储存WebSQL、indexddbH5离线缓存(3).本地储存的几种方式的区别？H4的储存方式：cookie 和 session 。...
复制链接

扫一扫

专栏目录