前端面试题——HTML5部分

此篇收录HTML5的关键知识点， 也是常见的面试题

HTML5是什么 HTML5新增了哪些内容 Web Storage是什么cookies SessionStorage localstorage区别 SVG和Canvas 区别 Web Worker 和Web socket 是什么 如何实现浏览器内多个标签页之间的通信 HTML5新标签的浏览器兼容问题 HTML5的离线储存怎么使用 工作原理 HTML5的form如何关闭自动完成功能

HTML5是什么

最新的HTML标准 添加了新的标签和语法的特征，也删除了一些原标签 它的设计目的主要是为了在移动设备上支持多媒体 在一定程度上替代flash 能实现多媒体，简单3D，数据库，通信等更大更广层次的应用 建立了一些规则： 新特性基于HTML、CSS、DOM、JS 减少对外部插件的需要 更优秀的错误处理 更多取代脚本的标记 独立于设备

HTML5新增了哪些内容

新的语义化标签，article、footer、header、nav、section 用于媒介回放的 video 和 audio 元素 用于绘画的 canvas 元素，矢量图形svg元素 新的表单控件，比如 calendar、date、time、email、url、search 本地存储Web Storage Web worker 地理定位、拖放 …..

Web Storage是什么?cookies、 SessionStorage、 localstorage区别?

Web Storage可以在客户端本地存储数据，类似HTML4的cookie，但比cookie强大的多。Web Storage分为两种 SessionStorage、 localstorage

cookie —— 用来识别用户

Cookie数据是简单的web站点放置在你的硬盘上的“键-值”对的文本

缺点，弊端：

数量与容量限制(容量为4kb，限制的数量每个浏览器都有所不同) 用户配置可能为禁用 潜在的安全风险 Cookie 可能会被篡改 默认情况都会随着Http请求在客户端与服务器端来回，浪费带宽

localStorage ——没有时间限制的数据存储

sessionStorage ——针对一个 session 的数据存储

“与Cookie相比，Web Storage存在不少的优势：

1. 存储空间更大：能提供5MB的存储空间(不同浏览器的提供的空间不同)，Cookie仅4KB

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域(包括子域)有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

SVG和Canvas 区别?

Canvas

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

SVG

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

Web Worker 和Web socket 是什么?

Web Worker——运行在后台的 JavaScript

作用：

通过Web Worker可以生成多个线程同时运行，并保证页面对用户的及时响应，完全不会影响用户的正常操作

Web socket ——HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。

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

localstorge、cookies等本地存储方式;

WebSocket

多个标签页通信主要是利用了 localStorage 的增删改事件监听

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，

我们通过监听事件，控制它的值来进行页面信息通信;

页面A发送事件

function sendMsg(text) {

window.localStorage.setItem('msg',text);

}

页面B接收事件

window.addEventListener('storage', function (evt) {

if(evt.key==='msg')

console.log(evt.newValue);

});

需要注意的是重复设置相同的键值不会再次触发事件

HTML5新标签的浏览器兼容问题?

大部分浏览器已经支持某些HTML5技术，IE6，IE7，IE8和Firefox 2等老式浏览器中却不能识别和正常使用。 具体的解决方法：

HTML5的离线储存怎么使用， 工作原理?

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

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

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

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

原理和环境

HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

就像cookie一样，html5的离线存储也需要服务器环境。

HTML5的form如何关闭自动完成功能?

自动完成功能

输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以。

为何要关闭

但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

关闭输入框的自动完成功能有3种方法：

1、在IE的Internet选项菜单里的内容–自动完成里面设置

2、设置Form的autocomplete为”on”或者”off”来开启或者关闭自动完成功能

< form name = "form1" autocomplete = "off" >

3、设置输入框的autocomplete为”on”或者”off”来开启或者关闭该输入框的自动完成功能

< input type = "text" autocomplete = "off" name = "txtOn1" >