web前端基础面试题HTML5 篇（二）（含答案）-CFANZ编程社区

今天我们整理的是前端面试题—HTML5篇

1、HTML5有哪些新特性？移除了哪些元素？

HTML5的新特性如下：

(1) 拖放（ Drag and drop）APIl
(2) 语义化更好的内容标签（ header、nav、 footer、 aside、 article、 section）
(3) 音频、视频（ audio、 video）API
(4) 画布（ Canvas）API
(5) 地理（ Geolocation）APl
(6) 本地离线存储（ localStorage），即长期存储数据，浏览器关闭后数据不丢失。
(7) 会话存储（ sessionStorage），即数据在浏览器关闭后自动删除
(8) 表单控件包括 calendar、date、time、 email、url、 search。
(9) 新的技术包括 webwork、 websocket、 Geolocation

移除的元素如下：

(1) 纯表现的元素，包括 basefont,big、 center、font、s, strike,t、u
(2) 对可用性产生负面影响的元素，包括 frame、 frameset、 Noframes

2.如何在HTML5页面中嵌入音频？

HTML5包含了嵌入音频文件的标准方式，支持的格式包括MP3、Wav和Ogg等，嵌入方式如下。

<audio controls>
<source src="icketang.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>

3.如何在HTML5页面中嵌入视频？

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

<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.HTML5 canvas 元素有什么作用？

用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML5 上进行图形操作
代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var canvas=document.getElementById('canvas'); //首先通过id找到canvas
    var ctx=canvas.getContext('2d');  //然后，创建 context 对象：
    ctx.fillStyle='#FF0000';  //填充颜色
    ctx.fillRect(0,0,200,200);  //定义了矩形当前的填充方式。
</script>
</body>
</html>

5.HTML5 标准提供了哪些新的API？

canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。
媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)
离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存
文档编辑，应该是更好的支持对文档的编辑。
拖动，可以将文件拖动到某些区域上传
跨文档请求，websocket，一种更加高效的通讯方式
历史管理，可以通过js管理和插入历史记录
MIME头自定义
客户端数据存储，localstoage sessionstoage
地理位置共享
本地数据库
索引数据库

6.Canvas 与 SVG 的比较：

SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
Svg支持事件处理器，canvas不支持事件处理器
在 SVG 中，每个被绘制的图形均被视为对象，而canvas能够以 .png 或 .jpg 格式保存结果图像
如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

7.HTML5 新的表单元素：

<datalist>
<keygen>
<output>

8.本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过 POST 或者 GET 的通道发送到服务器；每个域 5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用 Javascript 代码移除

9.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

10.新的HTML5 文档类型和字符集是？

文档类型：<!doctype html>
字符集： < meta charset=“UTF-8” >

11.语义化的理解？

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

12.HTML5中的应用缓存是什么？

HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。
应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要

13.如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localstorge、 cookies等数据存储，可以实现标签页之间的通信

14.请描述一下 sessionStorage和 localStorage的区别。

sessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毀。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而 localstorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。

15.请你谈谈 cookie的特点。

ookie虽然为持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有以下局限性。

（1）每个特定的域名下最多生成20个 cookie。
（2）IE6或更低版本最多有20个 cookie。
（3）IE7和之后的版本最多可以有50个 cookie。
（4） Firefox最多可以有50个 cookie。
（5） Chrome和 Safari没有做硬性限制。

优点如下：

（1）通过良好的编程，控制保存在 cookie中的 session对象的大小。
（2）通过加密和安全传输技术（SSL），降低 cookie被破解的可能性。
（3）只在 cookie中存放不敏感数据，即使被盗也不会有重大损失。
（4）控制 cookie的生命周期，使之不会永远有效。数据偷盗者很可能得到一个过期的 cookie。

缺点如下：

（1）“ cookie”的数量和长度有限制。每个 domain最多只能有20条 cookie，每个cookie的长度不能超过4KB，否则会被截掉。
（2）安全性问题。如果 cookie被别人拦截了，就可以取得所有的 session信息。即使加密也于事无补，因为拦截者并不需要知道 cookie的意义，他只要原样转发 cookie就可以达到目的。
（3）有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果把这个计数器保存在客户端，那么它起不到任何作用