40个常见的HTML5⾯试问题及答案
编辑注：的过程中，对的考察是⼀个⽐较⼤的分量的，很多⼈简历上也常常有精通，但是你真的对这些HTML5的东西精通吗？本⽂讲解了40个重要的HTML5题及答案，来看看有多少是你还没了解的，及时补充能量。
本⽂将列出40个重要的 5⾯试问题及答案，祝各位求职顺利。
⽬录
介绍
和SVG图形之间的区别是什么？
如何使⽤Canvas和SVG绘制矩形？
什么是选择器？
如何使⽤ID值应⽤CSS样式？
CSS的列布局有什么⽤？
请解释⼀下CSS盒⼦模型？
请解释CSS 3中的⼀些⽂字效果？
什么是 worker，为什么我们需要他们web worker？
如何添加和删除本地存储中的数据？
什么是本地存储的有效期？
本地存储和cookie之间的区别是什么？
会话存储和本地存储之间的区别是什么？
什么是WebSQL？
svg图形
WebSQL是HTML 5规范的⼀部分吗？
那么我们该如何使⽤WebSQL？
以及我们如何⽤HTML 5实现应⽤程序缓存？
应⽤程序缓存的回退页⾯是什么？
其他有关⾯试问题的⽂章参考
介绍
我是⼀个ASP.NET MVC开发⼈员。最近当我⼯作的时候，我发现很多问题都是围绕HTML 5和它的新功能展开的。所以，下⾯我将列出40个有助于你提⾼相关HTML 5知识的重要问题。
这些问题并不能保证你⼀定能到⼯作，但可以肯定的是，如果你想提升⾃⼰关于这个主题的素养，那么它们⼀定是有⽤的。
祝你求职成功。
SGML、HTML、XML和XHTML之间的关系？
SGML（标准通⽤标记语⾔）是⼀种指定⽂档标记的标准，是⼀种描述了⽂档标记应该如何的元语⾔。 HTML是描述使⽤SGML的标记语⾔。
通过SGML，每⼀个HTML页⾯都需要在相同的地⽅创建并附加⼀个DTD（⽂档类型定义）节点。所以，你总是可以在HTML页⾯的顶部发现DTD⽤于解析⽬的的“DOCTYPE”属性。
<!--!doctype-->
由于解析SGML是⼀种痛苦，所以创建了XML。 XML使⽤SGML。例如，在SGML，你必须拥有成对的开始和结束标签，但在XML中，你可以使⽤⾃动关闭的标签。
XHTML源⾃于使⽤HTML 4.0的XML。你可以参考XML DTD如以下所⽰的代码⽚段。
<!--!doctype--><!--!doctype-->
什么是HTML 5？
HTML 5是HTML的新标准，其主要⽬标是⽆需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形⽤户界⾯等。
HTML5是由万维⽹联盟（W3C）和Web Hypertext Application Technology Working Group （Web超⽂本应⽤技术⼯作组—WHATWG）合作创建的HTML新版本。
如果我不输⼊<!DOCTYPE HTML>，HTML 5能⼯作吗？
No，浏览器将⽆法识别HTML⽂件，并且HTML 5标签将⽆法正常⼯作。
哪些浏览器⽀持HTML 5？
⼏乎所有的浏览器都⽀持HTML 5，例如Safari，Chrome，⽕狐，Opera，IE等。
HTML 5的页⾯结构和HTML 4或早先的HTML有什么不同？
⼀个典型的Web页⾯有页眉（header），页脚（footer），导航（navigation），正⽂（central area）和侧栏（side bar）。现在如果是在HTML 4中，HTML部分中的上述这些专⽤名词需要使⽤DIV标签来描述。
但是，如果是在HTML 5，可以专门为这些区域创建特定的元素名，让HTML更具可读性。
以下是形成页⾯结构的HTML 5元素的更多细节。
<header>：表现HTML的标题数据。
<footer>：页⾯的页脚部分。
<nav>：页⾯中的导航元素。
<article>：正⽂内容。
<section>：⽤在正⽂中定义section或区段内容。
<aside>：表现页⾯侧边栏内容。
HTML 5中的DataList是什么？
HTML 5中的DataList控件元素有助于提供⾃动完成功能的⽂本框，如下图所⽰。
下⾯是DataList控件功能的HTML代码：
<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>
HTML 5中不同的新表单元素类型是什么？HTML 5推出了10个重要的新的表单元素：
1. Color.
2. Date
3. Datetime-local
4. Email
5. Time
6. Url
7. Range
8. Telephone
9. Number
10. Search
让我们⼀步⼀步来了解这些元素。
如果你想显⽰拾⾊器对话框。
<input type="color" name="favcolor">
如果你想显⽰⽇历对话框。
<input type="date" name="bday">
如果你想⽤本地时间显⽰⽇历。
<input type="datetime-local" name="bdaytime">
如果你想⽤电⼦邮件验证创建⼀个HTML⽂本，那么我们可以设置类型为“email”。<input type="email" name="email">
对于URL验证设置类型为“url”，如下⾯的HTML代码所⽰。
<input type="url" name="sitename">
如果你想⽤⽂本框显⽰号码范围，您可以将设置类型为number。
<input type="number" name="quantity" min="1" max="5">
如果你想显⽰范围调整控件，那么你可以使⽤range作为类型。
<input type="range" min="0" max="10" step="2" value="6">
让⽂本框作为搜索引擎框。
<input type="search" name="googleengine">
只需要输⼊时间。
<input type="time" name="usr_time">
想要⽂本框接受电话号码。
<input type="tel" name="mytel">
HTML 5中的输出元素是什么？
当你需要计算两个输⼊的结果并将结果放到⼀个标签⾥的时候，就需要输出元素了。⽐如你有两个⽂本框（参见下图），你想要让这些⽂本框数字相加，然后输出给标签。
下⾯就是如何使⽤HTML 5代码输出元素。
<form οnsubmit="return false"  öninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" />
</form>
为了简单起见，你也可以⽤“valueAsNumber”替换“parseInt”。为了更具可读性，你也可以在输出元素中使⽤“for”。
<output name="o" for="a b"></output>
SVG是什么？
SVG表⽰（scalable vector graphics）可缩放⽮量图形。这是⼀个基于⽂本的图形语⾔，它可以绘制使⽤⽂本、线、点等的图形，因此可以轻巧⼜快速地渲染。
能否使⽤HTML 5举个简单的SVG例⼦？
⽐⽅说，我们想要使⽤HTML 5 SVG显⽰下⾯简单的线条。
下⾯是HTML 5代码，你可以看到SVG标签封闭了多边形标签⽤来显⽰星星图形。
<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="/2000/svg">
<line y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
</line>
HTML 5中的Canvas画布是什么？
画布是⼀个可以在其上绘制图形的HTML区域。
访问画布区域
要在画布区域上绘制图形，我们⾸先需要获取上下⽂的引⽤部分。下⾯就是⽤于画布部分的代码。
var ElementById("mycanvas"); var Context("2d");
绘制图形
⼀旦你可以使⽤上下⽂对象，就可以开始上下⽂绘制。所以⾸先调⽤“move”⽅法，从⼀个点开始，使⽤线⽅法画线，然后敲击键盘应⽤结束。
<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Ca
nvas and SVG graphics? </a>
注： 从前⾯的两个问题中我们可以看到画布和SVG都可以在浏览器上绘制图形。所以在这个问题上⾯试官可能会要你回答什么时候⽤哪个。
SVG Canvas

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。