web 前端开发之 html5 新特性~小帅搜公众号前端入门教程

Posted 2021-04-04 可爱皮皮酱

新增的元素

html5 新增了一些语义化更好的标签元素。

结构元素

article 元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
aside 元素，表示 article 内容之外的内容，辅助信息。
header 元素，表示页面中一个内容区块或整个页面的页眉。
hgroup 元素，用于对页面中一个区块或整个页面的标题进行组合。
footer 元素，表示页面中一个内容区块或整个页面的页脚。
figure 元素，表示媒介内容的分组，以及它们的标题。
section 元素，表示页面中一个内容区块，比如章节。
nav 元素，表示页面中的导航链接。
其他元素
video 元素，用来定义视频。
audio 元素，用来定义音频。
canvas 元素，用来展示图形，该元素本身没有行为，仅提供一块画布。
embed 元素，用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3 等。
mark 元素，用来展示高亮的文字。
progress 元素，用来展示任何类型的任务的进度。
meter 元素，表示度量衡，定义预定义范围内的度量。
time 元素，用来展示日期或者时间。
command 元素，表示命令按钮。
details 元素，用来展示用户要求得到并且可以得到的细节信息。
summary 元素，用来为 details 元素定义可见的标题。
datalist 元素，用来展示可选的数据列表，与 input 元素配合使用，可以制作出输入值的下拉列表。
datagrid 元素，也用来展示可选的数据列表，以树形列表的形式来显示。
keygen 元素，表示生成密匙。
output 元素，表示不同类型的输出。
source 元素，为媒介元素定义媒介资源。
menu 元素，表示菜单列表。
ruby 元素，表示 ruby 注释， rt 元素表示字符的解释或发音。rp 元素在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
wbr 元素，表示软换行。与 br 元素的区别是：br 元素表示此处必须换行，而 wbr 元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。
bdi 元素，定义文本的文本方向，使其脱离其周围文本的方向设置。
dialog 元素，表示对话框或窗口。

废除的元素
html5 中废除了一些纯表现的元素，只有部分浏览器支持的元素还有一些会对可用性产生负面影响的元素。

纯表现元素
纯表现的元素就是那些可以用 css 替代的元素。basefont、big、center、font、s、strike、tt、u 这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 css 样式表中统一处理，所以将这些元素废除，用 css 样式进行替代。

对可用性产生负面影响的元素
对于 frameset 元素、frame 元素与 noframes 元素，由于 frame 框架对网页可用性存在负面影响，在 html5 中已不支持 frame 框架，只支持 iframe 框架，html5 中同时将 frameset、frame 和 noframes 这三个元素废除。

只有部分浏览器支持的元素
对于 applet、bgsound、blink、marquee 等元素，由于只有部分浏览器支持，特别是 bgsound 元素以及 marquee 元素，只被 IE 支持，所以在 html5 中被废除。其中 applet 元素可由 embed 元素或 object 元素替代，bgsound 元素可由 audio 元素替代，marquee 可以由 javascript 编程的方式替代。

新增的 API
Canvas API
上文提到的 canvas 元素可以为页面提供一块画布来展示图形。结合 Canvas API，就可以在这块画布上动态生成和展示各种图形、图表、图像以及动画了。Canvas 本质上是位图画布，不可缩放，绘制出来的对象不属于页面 DOM 结构或者任何命名空间。不需要将每个图元当做对象存储，执行性能非常好。

利用 Canvas API 进行绘图，首先要获取 canvas 元素的上下文，然后用该上下文中封装的各种绘图功能进行绘图。

<canvas id="canvas">替代内容</canvas>
<script>
var canvas = document.getElementById('canvas');
var context =canvas.getContext("2d"); // 获取上下文
//设置纯色
context.fillStyle = "red";
context.strokeStyle = "blue";
// 实践表明在不设置fillStyle下的默认fillStyle为black
context.fillRect(0, 0, 100, 100);
// 实践表明在不设置strokeStyle下的默认strokeStyle为black
context.strokeRect(120, 0, 100, 100);
</script>

SVG
SVG 是 html5 的另一项图形功能，它是一种标准的矢量图形，是一种文件格式，有自己的 API。html5 引入了内联 SVG，使得 SVG 元素可以直接出现在 html 标记中。

<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

音频和视频
audio 和 video 元素的出现让 html5 的媒体应用多了新选择，开发人员不必使用插件就能播放音频和视频。对于这两个元素，html5 规范提供了通用、完整、可脚本化控制的 API。html5 规范出来之前，在页面中播放视频的典型方式是使用 Flash、QuickTime 或者 Windows Media 插件往 html 中嵌入音频视频，相对这种方式，使用 html5 的媒体标签有两大好处。

作为浏览器原生支持的功能，新的 audio 和 video 元素无需安装。
媒体元素想 Web 页面提供了通用、集成和可脚本化控制的 API。

<video src="video.webm" controls>
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf" />
</object>
Your browser does not support HTML5 video.
</video>

浏览器支持性检测
浏览器检测是否支持 audio 元素或者 video 元素最简单的方式是用脚本动态创建它，然后检测特定函数是否存在。

var hasVideo = !!(document.createElement('video').canPlayType);

Geolocation API
html5 的 Geolocation API（地理定位 API），可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持 html5 地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。

位置信息从何而来
Geolocation API 不指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是用于检索位置信息的 API，而且通过该 API 检索到的数据只具有某种程度的准确性，并不能保证设备返回的位置是精确的。设备可以使用下列数据源：

// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
var accuracy = position.coords.accuracy; // 准确度
var timestamp = position.coords.timestamp; // 时间戳
}
// 错误处理函数
function handleLocationEror(error) {
....
}
// 重复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);
Communication API

跨文档消息传递
出于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信一直都受到了严格的限制。然而，现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。这种情形下，如果浏览器内部能提供直接的通信机制，就能更好地组织这些应用。html5 中引入了一种新功能，跨文档消息通信，可以确保 iframe、标签页、窗口间安全地进行跨源通信。postMessage API 为发送消息的标准方式，发送消息非常简单：

window.postMessage('Hello, world', 'http://www.example.com/');

接收消息时，仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
switch(e.origin) {
case "friend.example.com":
// 处理消息
processMessage(e.data);
break;
default:
// 消息来源无法识别
// 消息被忽略
}
}

消息事件是一个拥有 data (数据) 和 origin (源) 属性的 DOM 事件。data 属性是发送方传递的实际消息，而 origin 属性是发送来源。

XMLHttpRequest Level2
XMLHttpRequest API 使得 Ajax 技术成为可能，作为 XMLHttpRequest 的改进版，XMLHttpRequest Level2 在功能上有了很大的改进。主要两个方面：

跨源 XMLHttpRequest
进度事件
跨源 XMLHttpRequest
过去，XMLHttpRequest 仅限于同源通信，XMLHttpRequest Level2 通过 CORS 实现了跨源 XMLHttpRequest。跨源 HTTP 请求包含一个 Origin 头部，它为服务器提供 HTTP 请求的源信息。

WebSockets API
WebSockets 是 html5 中最强大的通信功能，它定义了一个全双工通信信道，仅通过 Web 上的一个 Socket 即可进行通信。

WebSockets 握手
为了建立 WebSockets 通信，客户端和服务器在初始握手时，将 HTTP 协议升级到 WebSocket 协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传递 WebSocket 消息。

WebSockets 接口
除了对 WebSockets 协议定义外，该规范还同时定义了用于 JavaScript 应用程序的 WebSocket 接口。WebSockets 接口的使用很简单。要连接远程主机，只需要新建一个 WebSocket 实例，提供希望连接的对端 URL。

<input name="name" placeholder="First and last name">

autocomplete
浏览器通过 autocomplete 特性能够知晓是否应该保存输入值以备将来使用。

autofocus
通过 autofocus 特性可以指定某个表单元素获得输入焦点，每个页面上只允许出现一个 autofocus 特性，如果设置了多个，则相当于未指定此行为。

spellcheck
可对带有文本内容的输入控件和 textarea 空间控制 spellcheck 属性。设置完后，会询问浏览器是否应该给出拼写检查结果反馈。spellcheck 属性需要赋值。

list 特性和 datalist 元素
通过组合使用 list 特性和 datalist 元素，开发人员能够为某个输入型控件构造一张选值列表。

<datalist id="contactList">
<option value="[e-mail]"></option>
<option value="[e-mail]"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">

min 和 max
通过设置 min 和 max 特性，可以将 range 输入框的数值输入范围限定在最低值和最高值之间。可以只设置一个，也可以两个都设置，也可以都不设置。

step
对于输入型控件，设置其 step 特性能够指定输入值递增或者递减的粒度。

required
一旦为某输入型控件设置了 required 特性，那么此项必填，否则无法提交表单。

拖放 API
draggable 属性
如果网页元素的 draggable 元素为 true，这个元素就是可以拖动的。

<div draggable="true">Draggable Div</div>

拖放事件
拖动过程会触发很多事件，主要有下面这些：

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。

draggableElement.addEventListener('dragstart', function(e) {
console.log (' 拖动开始！');
});
dataTransfer 对象
拖动过程中，回调函数接受的事件参数，有一个 dataTransfer 属性，指向一个对象，包含与拖动相关的各种信息。

draggableElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Hello World!');
});

dataTransfer 对象的属性有：

dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为 copy、move、link 和 none。
effectAllowed：指定所允许的操作，可能的值为 copy、move、link、copyLink、copyMove、linkMove、all、none 和 uninitialized（默认值，等同于 all，即允许一切操作）。
files：包含一个 FileList 对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在 DataTransfer 对象的数据的类型。
dataTransfer 对象的方法有：

setData (format, data)：在 dataTransfer 对象上储存数据。第一个参数 format 用来指定储存的数据类型，比如 text、url、text/html 等。
getData (format)：从 dataTransfer 对象取出数据。
clearData (format)：清除 dataTransfer 对象所储存的数据。如果指定了 format 参数，则只清除该格式的数据，否则清除所有数据。
setDragImage (imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数 imgElement 必须是一个图像元素，而不是指向图像的路径，参数 x 和 y 表示图像相对于鼠标的位置。
Web Workers API
Javascript 是单线程的。因此，持续时间较长的计算，回阻塞 UI 线程，进而导致无法在文本框中填入文本，单击按钮等，并且在大多数浏览器中，除非控制权返回，否则无法打开新的标签页。该问题的解决方案是 Web Workers，可以让 Web 应用程序具备后台处理能力，对多线程的支持性非常好。

但是在 Web Workers 中执行的脚本不能访问该页面的 window 对象，也就是 Web Workers 不能直接访问 Web 页面和 DOM API。虽然 Web Workers 不会导致浏览器 UI 停止响应，但是仍然会消耗 CPU 周期，导致系统反应速度变慢。

Web Storage API
Web Storage 是 html5 引入的一个非常重要的功能，可以在客户端本地存储数据，类似 html4 的 cookie，但可实现功能要比 cookie 强大的多。

sessionStorage
sessionStorage 将数据保存在 session 中，浏览器关闭数据就消失。

localStorage
localStorage 则一直将数据保存在客户端本地，除非手动删除，否则一直保存。不管是 sessionStorage，还是 localStorage，可使用的 API 相同，常用的有如下几个（以 localStorage 为例）：

保存数据：localStorage.setItem (key,value);
读取数据：localStorage.getItem (key);
删除单个数据：localStorage.removeItem (key);
删除所有数据：localStorage.clear ();
得到某个索引的 key：localStorage.key (index);

扫描二维码

获取更多精彩

小帅搜