40个重要地HTML5面精彩试题及问题详解.docx

1、40个重要地HTML5面精彩试题及问题详解40个重要的HTML5面试题及答案容 介绍 SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？ 什么是HTML5？ 为什么HTML5里面我们不需要DTD（DocumentTypeDefinition文档类型定义）？ 如果我不放入 标签，HTML5还会工作么？ 哪些浏览器支持HTML5？ HTML5的页面结构同HTML4或者更前的HTML有什么区别？ HTML5中的datalist是什么？ HTML5中哪些是不同的新的表单元素类型？ HTML5中什么是输出元素？ 什么是SVG（ScalableV

2、ectorGraphics可缩放矢量图形）？ 我们能看到使用HTML5的SVG的简单例子么？ HTML5中canvas是什么？ 我们如何使用Canvas来画一条简单的线？ Canvas和SVG图形之间的区别是什么？ 如何使用Canvas和HTML5中的SVG去画一个矩形？ CSS（cascadingstylesheets级联样式表）中的选择器是什么？ 如何使用ID值来应用一个CSS样式？ CSS中使用列布局是什么？ 你能解释一下CSS的盒子模型么？ 你能解释一些CSS3中的文本效果么？ 什么是WebWorkers？为什么我们需要他们？ WebWorker线程的限制是什么？ 我们如何在JavaS

3、cript中创建一个worker线程？ 如何中止WebWorker? 为什么我们需要HTML5的服务发送事件？ HTML5中的本地存储概念是什么？ 我们如何从本地存储中添加和移除数据？ 本地存储的生命周期是什么？ 本地存储和cookies（储存在用户本地终端上的数据）之间的区别是什么？ 什么是事务存储？我们如何创建一个事务存储？ 本地存储和事务存储之间的区别是什么？ 什么是WebSQL？ WebSQL是HTML5的一个规吗？ 我们如何使用WebSQL？ HTML5中的应用缓存是什么？ HTML5中我们如何实现应用缓存？ 我们如何刷新浏览器的应用缓存？ 应用缓存中的回退是什么？ 应用缓存中的网络

4、是什么？介绍我是一个ASP.NETMVC的开发者，最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下40个重要的问题将帮助你复习HTML5相关的知识。这些问题不是你得到工作的高效解决方案，但是可以在你想快速复习相关主题的时候有所帮助。快乐地找工作。SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML

5、页面的头部发现“DOCTYPE”属性，用来定义用于解析目标DTD1现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。XHTML创建于XML，他被使用在HTML4.0中。你可以参考下面代码片段中展示的XMLDTD1总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML什么是HTML5？HTML5是最新的HTML标准，他的主要目标是提供所有容而不需要任何的像flash，silverlight等的额外插件，这些容来自动画，视频，富GUI

6、等HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的为什么HTML5里面我们不需要DTD（DocumentTypeDefinition文档类型定义）？HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参考DTD，对于HTML5，你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档如果我不放入，HTML5还会工作么？不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作哪些浏览器支持HTML5？几乎所有的浏览器Safari，Chrome，Firefox，Opera，IE都支持HTML5HTML5的页面结构同

7、HTML4或者更前的HTML有什么区别？一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些容，我们可能要使用DIV标签。但是在HTML5过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读以下是形成页面结构的HTML5元素的更多细节： ：代表HTML的头部数据 ：页面的脚部区域 ：页面导航元素 ：自包含的容 ：使用部article去定义区域或者把分组容放到区域里 ：代表页面的侧边栏容HTML5中的datalist是什么？HTML5中的Datalist元素有助于提供文本框自动完成特性，如下图所示：以下是DataList功

8、能的HTML代码：12345678HTML5中什么是不同的新的表单元素类型？这里有10个重要的新的表单元素在HTML5中被介绍1. Color2. Date3. Datetime-local4. Email5. Time6. Url7. Range8. Telephone9. Number10. Search让我们一步一步了解这10个元素如果你想显示颜色选择对话框1如果你想显示日历对话框1如果你想显示含有本地时间的日历1如果你想创建一个含有email校验的HTML文本框，我们可以设置类型为“email”1对于URL验证设置类型为”url”，如下图显示的HTML代码1如果你想用文本展示数字围，你

9、可以设置类型为“number”1如果你想显示围控制，你可以使用类型”range”1想让文本框作为搜索引擎1想只能输入时间1如果你想使用文本框接受1HTML5中什么是输出元素？当你需要计算两个输入的和值到一个标签中的时候你需要输出元素。例如你有两个文本框（如下图），你想将来自这两个输入框中的数字求和并放到标签中。下面是如何在HTML5中使用输出元素的代码12345 + =为了简单起见，你也可以使用“valueAsNumber”来代替“parseInt”。你同样能在output元素中使用“for”使其更加可读1什么是SVG（ScalableVectorGraphics可缩放矢量图形）？SVG（Sc

10、alableVectorGraphics可缩放矢量图形）表示可缩放矢量图形。他是基于文本的图形语言，使用文本，线条，点等来进行图像绘制，这使得他轻便，显示更加迅速我们能看到使用HTML5的SVG的简单例子么？比方说，我们希望使用HTML5SVG去显示以下简单的线条下面是HTML5代码123HTML5中canvas是什么？Canvas是HTML中你可以绘制图形的区域我们如何使用Canvas来画一条简单的线？ 定义Canvas区域 获取访问canvas上下文区域 绘制图形定义Canvas区域定义Canvas区域你需要使用下面的HTML代码，这定义了你能进行绘图的区域1获取画布区域的访问在画布上进行

11、绘图我们首先需要获取上下文区域的关联，下面是获取画布区域的代码。12var c=document.getElementById(mycanvas);var ctx=c.getContext(2d);绘制图形现在一旦你获取了访问上下文，我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始，使用线条方法绘制线条然后使用stroke方法结束。123ctx.moveTo(10,10);ctx.lineTo(200,100);ctx.stroke();以下是完整的代码123456789101112function DrawMe()var c=document.getElementByI

12、d(mycanvas);var ctx=c.getContext(2d);ctx.moveTo(10,10);ctx.lineTo(200,100);ctx.stroke();你可以得到以下输出Canvas和SVG图形的区别是什么？Note：-如果你看了之前的两个的问题，Canvas和SVG都可以在浏览器上绘制图形。因此在这个问题中，面试官想知道你在什么时候选用哪种方式。SVGCanvas这个就好像绘制和记忆，换句话说任何使用SVG绘制的形状都能被记忆和操作，浏览器可以再次显示Canvas就像绘制和忘记，一旦绘制完成你不能访问像素和操作它SVG对于创建图形例如CAD软件是良好的，一旦东西绘制，

13、用户就想去操作它Canvas在绘制和忘却的场景例如动画和游戏是良好的因为为了之后的操作，需要记录坐标，所以比较缓慢因为没有记住以后事情的意向，所以更快我们可以用绘制对象的相关事件处理我们不能使用绘制对象的相关事件处理，因为我们没有他们的参考分辨率无关分辨率相关如何使用Canvas和HTML5中的SVG去画一个矩形？HTML5使用SVG绘制矩形的代码123HTML5使用Canvas绘制矩形的代码1234var c=document.getElementById(mycanvas);var ctx=c.getContext(2d);ctx.rect(20,20,150,100);ctx.strok

14、e();CSS（cascading style sheets级联样式表）中的选择器是什么？选择器在你想应用一个样式的时候，帮助你去选择元素。举例，下面是简单的被命名为”instro”的样式，他适用于HTML元素显示红色背景12345.introbackground-color:red;应用上面的”intro”样式给div，我们可以使用”class”选择器，如下图所示1234My name is Shivprasad koirala.I write interview questions.如何使用ID值来应用一个CSS样式？假设，你有一个HTML段落标签，使用id是”mytext”，就和下面的片

15、段中显示的那样1This is HTML interview questions.你可以使用”#”选择器和”id”的名字创建一种样式，并把CSS值应用到段落标签中，因此应用样式到”mytext”元素，我们可以使用”#mytext”，如下所示123456#mytextbackground-color:yellow;迅速修订一些重要的选择器设置所有段落标签背景色为黄色1234div p background-color:yellow;设置所有div部的段落标签为黄色背景1234div p background-color:yellow;设置所有div之后的段落标签为黄色背景1234div+p ba

16、ckground-color:yellow;设置所有含有“target”属性的变为黄色背景1234567atarget background-color:yellow;ASP.NET interview questionsc# interview questions.NET interview questions with answers当控制得到焦点的时候设置所有的元素为黄色背景1234input:focus background-color:yellow;根据相关连接操作设置超样式1234a:link color:green;a:visited color:green;a:hover co

17、lor:red;a:active color:yellow;CSS中使用列布局是什么？CSS列布局帮助你分割文本变为列，例如考虑下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，这里HTML5的列布局就有所帮助了为了实现列布局我们需要指定以下容 我们需要把text划分为多少列指定列数我们需要使用column-count，对于Chrome和firefox分别需要”webkit”和“moz-column”123-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */co

18、lumn-count:3; 两列之间我们想要多少差距123-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:20px;你想在这些列之间画一条线么？如果是，那么多厚呢？123-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:6px outset #ff00ff;以

19、下是完整代码12345678910111213141516.magazine-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:20px;-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-ru

20、le:4px outset #ff00ff; /* Safari and Chrome */column-rule:6px outset #ff00ff;你可以使用class属性来应用样式到文本123Your text goes here which you want to divide in to 3 columns.你能解释一下CSS的盒子模型么？CSS和模型是围绕在HTML元素周围的定义Border(边界)，padding(边距)和margin(外边距)的矩形空间Border(边界)：定义了元素包含的最大区域，我们能够使边界可见，不可见，定义高度和宽度等；Padding(边距)：定义了边

21、界和部元素的间距Margin：定义了边界和任何相邻元素的间距例如以下是简单的CSS代码定义了盒子的边界，边距和外边距值123456.box width: 200px;border: 10px solid #99c;padding: 20px;margin: 50px;现在如果我们应用了以上的CSS到一个如下显示的DIV标签，你输出将会和下面图形中显示的那样。我已经创建两个测试“Sometext”和“Someothertext”，因此我们能看到多少margin(外边距)的属性功能1234Some textSome other text你能解释一些CSS3中的文本效果么？这里面试官期待你回答两个C

22、ss的文本效果，以下是两种需要注意的效果阴影文本效果1234.specialtexttext-shadow: 5px 5px 5px #FF0000;文字包装效果1234.breakwordword-wrap:break-word;什么是Web Workers？为什么我们需要他们？考虑以下会执行上百万次的繁重的循环代码1234567function SomeHeavyFunction()for (i = 0; i 10000000000000; i+)x = i + x;比方说上面的循环代码在HTML按钮点击以后执行，现在这个方法执行是同步的，换句话说这个浏览器必须等到循环完成才能操作1input type=button onclick=SomeHeavy