web前端最新最全面试题总结（HTML5)

h5新增的内容和api

• 简化的文档类型和字符集
• 富有语义化的新结构元素
• 新增的内联元素
• 支持动态页面
• 全新的表单设计
• 强大的绘图功能和多媒体功能
• 打造桌面应用的一系列新功能
• 获取地理位置信息
• 支持多线程
• history对象

cookies，sessionStorage 和 localStorage 的区别

相同点：都存储在客户端
不同点：

1.存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。
• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

1. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

HTML5 为什么只需要写 ？

HTML5不基于 SGML(标准通用标记语言)，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

你知道多少种Doctype文档类型？

• 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
• HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
• XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
• Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
• （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

简述一下你对HTML语义化的理解？

答：用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML 和HTML5？

答：

​ (Q1)

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素，比如 article、footer、header、nav、section;

(6)表单控件，calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

(Q2)

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim，

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

HTML与XHTML——二者有什么区别

区别：

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使“--”

8.图片必须有说明文字

说几条XHTML规范的内容(至少3条)

1. 所有的标记都必须有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的xml标记都必须合理嵌套
4. 所有的属性值都必须用引号“”括起来
5. 所有的<和&特殊符号用编码表示
6. 给所有属性赋一个值

HTML5中的DataList是什么？

定义选项列表，与input元素配合使用，来定义input可能的值。datalist及其选项不会被显示出来，他仅仅是合法的输入值列表

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
datalist>

SVG是什么?

svg（Scalable Vector Graphics,可伸缩矢量图形）由万维网联盟（W3C）推出的基于xxxxim编码的开放式图形、图像标准。他虽然是一种二维矢量图形格式，但其中包含矢量图形、光栅图像及文本等。

• SVG 是代码，通过浏览器的解析而渲染成一种图形；
• 可缩放矢量图形是基于可扩展标记语言（XML），以描述二维矢量图形的一种图形格式，由万维网联盟（

World Wide Web Consortium，W3C）指定，是一个开放标准；

• 矢量图与像素图的不同就在于，矢量图是由数学表达式定义的，矢量图不适合表现色彩丰富的照片，更加适合展示简单的几何图案；

你熟悉SVG样式的书写吗？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

HTML5canvas是什么?

Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。

能用Canvas做些什么？

1. 游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但Ohad认为大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
4. 模拟器：Ohad认为，无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
5. 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
6. 字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。
7. 图形编辑器：Ohad预测，图形编辑器将能够100%基于Web实现。
8. 其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力，运用HTML5技术创造更多价值。

HTML5应用程序缓存及原理Application Cache

原理

在用户没有因特网链接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件.

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

什么是Application Cache

HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。

Application Cache带来的三个优势是：

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响

离线存储技术

HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景；传统还有离线存储技术为Cookie。

经过实践我们认为localstorage应该存储一些非关键性ajax数据，做锦上添花的事情；

Application Cache用于存储静态资源，仍然是干锦上添花的事情；

而cookie只能保存一小段文本（4096字节）；所以不能存储大数据，这是cookie与上述缓存技术的差异之一，而因为HTTP是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个标识字符串，而这个任务就是cookie完成的，这一段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。

所以Application Cache的应用场景不一样，所以使用也不一致。

Application Cache简介

Application Cache的使用要做两方面的工作：

① 服务器端需要维护一个manifest清单

② 浏览器上只需要一个简单的设置即可

如何区分HTML和HTML5？

1. 在文档类型声明上

2. 在结构语义上

**HTML: **没有体现结构语义化的标签，通常都是这样来命名的

，这样表示网站的头部。
HTML5: 在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。

HTML5常见的兼容性问题？

1.让老式浏览器支持HTML5

2.让老式浏览器兼容css3

对web标准化(或网站重构)知道哪些相关的知识,简述几条你知道的Web标准?

网页主要有三部分组成：结构（Structrue）、表现（presentation）和行为（Behavior）。对应的网站标准也分为三方面：

• 结构化标准语言，主要包括XHTML和XML；
• 表现标准主要包括css
• 行为标准主要包括对象模型（如W3C DOM）、ECMAScript等

web标准以及w3c标准

标签闭合，标签小写，不乱嵌套，使用外链形式的css和js，结构层，表现层，行为层分离

data-属性的作用是什么？

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
• 属性值可以是任意字符串

如果把HTML5看作做一个开放平台，那它的构建模块有哪些？

,

,

,

等。

iframe有那些优缺点？

iframe的优点：

1. iframe能够原封不动的把嵌入的网页展现出来。

2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2. iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3. 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4. 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5. iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。 分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

Canvas 和 SVG 的区别:

SVG 　　　　

SVG 是一种使用 XML 描述 2D 图形的语言。 　　　　

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 　　　　

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 　　　　

特点： 　　　　	　　

    不依赖分辨率 　　　　	　　

    支持事件处理器 　　　　	　　

    最适合带有大型渲染区域的应用程序（比如谷歌地图） 　　　　　　	

    复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 　　　　	　　

    不适合游戏应用 　　

Canvas 　　　　

Canvas 通过 JavaScript 来绘制 2D 图形。 　　　　

Canvas 是逐像素进行渲染的。 　　　　

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 　　　　

特点： 　　　    　　

    依赖分辨率 　　　　	　　

    不支持事件处理器 　　　　　　	

    弱的文本渲染能力 　　　　　　	

    能够以 .png 或 .jpg 格式保存结果图像 　　　　	　　

    最适合图像密集型的游戏，其中的许多对象会被频繁重绘