html5 面试题目汇总
2016-01-12 16:56
656 查看
1， 什么是HTML5？ HTML5的页面结构同HTML4或者更前的HTML有什么区别？
HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等
HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的
一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
以下是形成页面结构的HTML5元素的更多细节：
<header>：代表HTML的头部数据
<footer>：页面的脚部区域
<nav>：页面导航元素
<article>：自包含的内容
<section>：使用内部article去定义区域或者把分组内容放到区域里
<aside>：代表页面的侧边栏内容
2， 新的 HTML5 文档类型和字符集是？
3， HTML5 中如何嵌入视频？
和音频类似，HTML5支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：
4， HTML5 Canvas 元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在
HTML上进行图形操作，
5， CSS（cascadingstyle sheets级联样式表）中的选择器是什么？如何使用ID值来应用一个CSS样式？
选择器在你想应用一个样式的时候，帮助你去选择元素。举例，下面是简单的被命名为”instro”的样式，他适用于HTML元素显示红色背景
应用上面的”intro”样式给div，我们可以使用”class”选择器，如下图所示
假设，你有一个HTML段落标签，使用id是”mytext”，就和下面的片段中显示的那样
你可以使用”#”选择器和”id”的名字创建一种样式，并把CSS值应用到段落标签中，因此应用样式到”mytext”元素，我们可以使用”#mytext”，如下所示
6， 浅谈HTML5 存储类型，cookies， sessionStorage 与localStorage区别与联系？
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
7， HTML5 应用程序缓存和浏览器缓存有什么区别？nginx 怎么开启缓存？
应用程序缓存是
HTML5的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：
与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。
location ~.*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
8， 什么是Web Worker？我们如何在JavaScript中创建一个worker线程？
创建一个worker线程，我们需要通过Javascript文件名创建worker对象
var worker = newWorker("MyHeavyProcess.js");
我们需要使用“PostMessage”发送信息给worker对象，下面是相同的代码。
worker.postMessage();
9， 作用范围
什么会被打印在控制台上？
回答
上面的代码会打印 5。
这个问题的诀窍是，这里有两个变量声明，但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反，b 变成了全局变量。
这 个问题的另一个诀窍是，它没有使用严格模式 (‘use strict';)。如果启用了严格模式，代码就会引发ReferenceError的错误：B没有定义（b is not defined）。请记住，严格模式，则需要明确指定，才能实现全局变量声明。比如，你应该写：
10， 声明提升（Hoisting）
执行这段代码，输出什么结果。
1:function test() {
2: console.log(a);
3: console.log(foo());
4: var a = 1;
5: function foo() {
6: return 2;
7: }
8: }
9:
10: test();
回答
这段代码的结果是 undefined 和 2。
原因是，变量和函数的声明都被提前了（移到了函数的顶部），但变量不分配任何值。因此，在打印变量的时候，它在函数中存在（它被声明了），但它仍然是undefined 。表示换句话说，上面的代码等同于以下内容：
1:function test() {
2: var a;
3: function foo() {
4: return 2;
5: }
6:
7: console.log(a);
8: console.log(foo());
9:
10:
a = 1;
11: }
12:
13: test();
11， this在JavaScript中如何工作的
下面的代码会输出什么结果？给出你的答案。
1:var fullname =
'John Doe';
2:var obj = {
3: fullname: 'Colin Ihrig',
4: prop: {
5: fullname: 'Aurelio De Rosa',
6: getFullname:function() {
7: returnthis.fullname;
8: }
9: }
10: };
11:
12: console.log(obj.prop.getFullname());
13:
14:var test =obj.prop.getFullname;
15:
16: console.log(test());
回答
答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。
在 第一个 console.log()调用中，getFullname()被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的 fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设 置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。
12， call()和apply()
现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。
回答
该问题可以通过强制使用 call() 或者 apply()改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果：
1: console.log(test.call(obj.prop));
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
13， 浅谈JQuery， Bootstarp, AngularJS?
HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等
HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的
一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
以下是形成页面结构的HTML5元素的更多细节：
<header>：代表HTML的头部数据
<footer>：页面的脚部区域
<nav>：页面导航元素
<article>：自包含的内容
<section>：使用内部article去定义区域或者把分组内容放到区域里
<aside>：代表页面的侧边栏内容
2， 新的 HTML5 文档类型和字符集是？
| HTML5 文档类型很简单： | <!doctype html> |
| HTML5 使用 UTF-8 编码示例： | <meta charset=”UTF-8″> |
和音频类似，HTML5支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：
| 1 2 3 4 | <video width=”450″ height=”340″ controls> <source src=”jamshed.mp4″ type=”video/mp4″> Your browser does’nt support video embedding feature. </video> |
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在
HTML上进行图形操作，
| 1 2 | <canvas id=”canvas1″ width=”300″ height=”100″> </canvas> |
选择器在你想应用一个样式的时候，帮助你去选择元素。举例，下面是简单的被命名为”instro”的样式，他适用于HTML元素显示红色背景
| 1 2 3 4 5 | <style> .intro{ background-color:red; } </style> |
| 1 2 3 4 | <div class="intro"> <p>My name is Shivprasad koirala.</p> <p>I write interview questions.</p> </div> |
| 1 | <p id="mytext">This is HTML interview questions.</p> |
| 1 2 3 4 5 6 | <style> #mytext { background-color:yellow; } </style> |
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
7， HTML5 应用程序缓存和浏览器缓存有什么区别？nginx 怎么开启缓存？
应用程序缓存是
HTML5的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：
| 1 2 3 4 | <!doctype html> <html manifest=”example.appcache”> ….. </html> |
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。
location ~.*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
8， 什么是Web Worker？我们如何在JavaScript中创建一个worker线程？
创建一个worker线程，我们需要通过Javascript文件名创建worker对象
var worker = newWorker("MyHeavyProcess.js");
我们需要使用“PostMessage”发送信息给worker对象，下面是相同的代码。
worker.postMessage();
9， 作用范围
1: (function() {2: var a = b = 5;
3: })();
4:
5: console.log(b);
什么会被打印在控制台上？
回答
上面的代码会打印 5。
这个问题的诀窍是，这里有两个变量声明，但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反，b 变成了全局变量。
这 个问题的另一个诀窍是，它没有使用严格模式 (‘use strict';)。如果启用了严格模式，代码就会引发ReferenceError的错误：B没有定义（b is not defined）。请记住，严格模式，则需要明确指定，才能实现全局变量声明。比如，你应该写：
1: (function() {2: 'use strict';
3: var a = window.b = 5;
4: })();
5:
6: console.log(b);
10， 声明提升（Hoisting）
执行这段代码，输出什么结果。
1:function test() {
2: console.log(a);
3: console.log(foo());
4: var a = 1;
5: function foo() {
6: return 2;
7: }
8: }
9:
10: test();
回答
这段代码的结果是 undefined 和 2。
原因是，变量和函数的声明都被提前了（移到了函数的顶部），但变量不分配任何值。因此，在打印变量的时候，它在函数中存在（它被声明了），但它仍然是undefined 。表示换句话说，上面的代码等同于以下内容：
1:function test() {
2: var a;
3: function foo() {
4: return 2;
5: }
6:
7: console.log(a);
8: console.log(foo());
9:
10:
a = 1;
11: }
12:
13: test();
11， this在JavaScript中如何工作的
下面的代码会输出什么结果？给出你的答案。
1:var fullname =
'John Doe';
2:var obj = {
3: fullname: 'Colin Ihrig',
4: prop: {
5: fullname: 'Aurelio De Rosa',
6: getFullname:function() {
7: returnthis.fullname;
8: }
9: }
10: };
11:
12: console.log(obj.prop.getFullname());
13:
14:var test =obj.prop.getFullname;
15:
16: console.log(test());
回答
答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。
在 第一个 console.log()调用中，getFullname()被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的 fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设 置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。
12， call()和apply()
现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。
回答
该问题可以通过强制使用 call() 或者 apply()改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果：
1: console.log(test.call(obj.prop));
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
13， 浅谈JQuery， Bootstarp, AngularJS?
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5图片上传与预览实现
- 你必须知道的28个HTML5特征、窍门和技术
- 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
- h5里viewport设置
- html5的页面缓存和本地数据存储支持
- 使用HTML5 API(AudioContext)实现可视化频谱效果
- HTML5 input 常用属性
- 传奇创世h5开发案例：那些年走过的路想想都发怵
- HTML5填充颜色的fillStyle测试
- 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5
- HTML5标签元素下的下划线动画
- html5响应式
- html5 Canvas画图3：1px线条模糊问题
- H5 摇一摇
- HTML5新增标签
- HTML5的学习（二）HTML5标签
- HTML5新增属性
- HTML5 History API 实现无刷新跳转
- Web大前端时代之：HTML5+CSS3入门系列
- html5常用属性总结