前端面试——HTML5 新特性总结

最新推荐文章于 2024-08-31 17:25:57 发布

coder-lxy

最新推荐文章于 2024-08-31 17:25:57 发布

阅读量409

点赞数 1

分类专栏：前端面试

本文链接：https://blog.csdn.net/qq_46178261/article/details/111634057

版权

前端面试专栏收录该内容

5 篇文章 1 订阅

订阅专栏

三 HTML5 新特性总结

1. 视频和音频

1.1 视频

今天，大多数的视频是通过插件(比如Flash) 来显示的，然而并非所有浏览器都拥有同样的插件。

HTML5规定了一种通过video元素来包含视频的标准方法。

视频格式

video元素支持三种视频格式：

Ogg
MPEG 4
WebM

在这里插入图片描述

使用方式

<video src="movie.ogg" controls="controls"></video>

<video> 标签的属性

在这里插入图片描述

<video>标签的方法、属性及事件

在这里插入图片描述

1.2 音频

同视频一样，现在还不存在在网页上播放音频的标准，HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

音频格式

在这里插入图片描述

使用方式

<audio src="song.ogg" controls="controls"></audio>

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

<audio> 标签的属性

在这里插入图片描述

2. 拖放

draggable 属性值设为true, 元素即可拖动

<img id="drag1" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true"
    ondragstart="drag(event)" />

拖动事件

在这里插入图片描述

ondragstart 事件调用drag() 方法，它规定了被拖动的数据； dataTransfer.setData() 方法设置被拖数据的数据类型和值：
```
function drag(ev) {
  ev.dataTransfer.setData("Text",ev.target.id);
}
```
ondragover 事件规定在何处放置被拖动的数据。
```
 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
```
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法

进行放置-ondrop

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

完整代码

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">
    #div1 {
      width: 198px;
      height: 66px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>
</head>

<body>

  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true"
    ondragstart="drag(event)" />

</body>

</html>

3. Canvas绘图

参考连接

3.1 什么是Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

3.2 创建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

3.3 通过JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

绘制矩形

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillStyle 方法将其染成红色
fillRect 方法规定了形状、位置和尺寸。参数(0, 0, 150 75) 表示：从左上角开始(0,0) 绘制150*75的矩形

绘制路径

使用路径绘制图形步骤：

创建路径起始点
调用绘制方法去绘制出路径
把路径封闭
一旦路径生成，通过描边或者填充路径区域来渲染图形

需要用到的方法：

beginPath()：新建一条路径，路径一旦创建成功，图形绘制命令被指向路径上生成路径
moveTo(x,y)：把画笔移动到指定的坐标(x,y)。相当于设置路径的起始点坐标。
lineTo(x,y)：绘制一条从当前位置到指定坐标(x, y)的直线
closePath()：闭合路径之后，图形绘制命令又重新指向上下文中
stroke()：通过线条来绘制图形轮廓
fill()：通过填充路径的内容区域生成实心的图形

4. SVG绘图

4.1 什么是SVG?

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

4.2 SVG的优势

相比于JPEG和GIF等其他图像格式，SVG优势在于：

可通过文本编辑器来创建和修改
可被搜索、索引、脚本化或压缩
可伸缩
图像可在任何的分辨率下被高质量地打印
可在图像质量不下降的情况下被放大

4.3 浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

4.4 在HTML中使用

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

5. Canvas vs SVG

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

二者比较

在这里插入图片描述

6. 地理定位

使用getCurrentPosition() 方法来获取用户的位置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="demo">点击这个按钮，获得您的坐标：</p>
  <button onclick="getLocation()">试一下</button>
  <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>
</body>

</html>

getCurrentPosition() 方法-返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性

7. Web 存储

7.1 在客户端存储数据

localStorage：没有时间限制的数据存储
sessionStorage：针对一个session的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据

7.2 localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

实例：

localStorage.lastname="Smith";
document.write(localStorage.lastname);

7.3 sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

实例

localStorage.lastname="Smith";
document.write(localStorage.lastname);

8. 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

8.1 什么是应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

实例

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

8.2 Cache Manifest 基础

如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST ：在此标题下列出的文件将在首次下载后进行缓存
NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：

一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*

FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html5/ /404.html

**注释：**第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

实例-完整的Manifest文件

CACHE MANIFEST
# 2020-10-31 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

9. WebWorker

web worker 是运行在后台的 JavaScript，不会影响页面的性能

什么是Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

浏览器支持

所有主流浏览器均支持 web worker，除了 Internet Explorer。

创建web worker 文件

var i=0;
function timedCount(){
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

postMessage() ：用于向HTML页面传回一段消息
web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
该脚本存储于 “demo_workers.js” 文件中

创建Web Worker对象

从HTML页面调用web worker 文件

if(typeof(w)=="undefined"){
    w=new Worker("demo_workers.js");
}

检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码

然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器：

w.onmessage=function(event){
  document.getElementById("result").innerHTML=event.data;
};

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

终止Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

11. WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket是HTML5中的协议，与http没有关系，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

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