40 个重要的 HTML 5 面试问题及答案

• 在此处下载HTML5面试问题PDF

目录

引言

Canvas和SVG图形之间有什么区别？

如何使用HTML 5的Canvas和SVG绘制矩形？

CSS中的选择器是什么？

如何使用ID值应用CSS样式？

CSS列布局有什么作用？

你能解释一下CSS盒子模型吗？

你能解释一下CSS 3中的一些文本效果吗？

什么是Web Workers？我们为什么需要它们？

如何向本地存储添加和删除数据？

本地存储的生命周期是多久？

本地存储和Cookie之间有什么区别？

会话存储和本地存储之间有什么区别？

什么是WebSQL？

WebSQL是HTML 5规范的一部分吗？

那么我们该如何使用WebSQL？

那么我们如何在HTML 5中实现应用程序缓存？

应用程序缓存中的回退（fallback）是什么意思？

其他面试问题文章参考

介绍

我是一名ASP.NET MVC开发人员，最近在找工作时，被问了很多与HTML 5及其新功能相关的问题。因此，以下是40个重要的面试问题，可以帮助您回顾HTML 5的知识。

这些问题并不是获得工作的“灵丹妙药”，但它们在您想要快速复习主题时很有帮助。

祝您求职顺利。

来源： -www.questpond.com

SGML、HTML、XML和XHTML之间有什么关系？

SGML（Standard Generalized Markup Language - 标准通用标记语言）是一种定义文档标记如何指定的标准。它仅仅是一种元语言，描述了文档标记应该是什么样的。HTML是一种使用SGML描述的标记语言。

因此，他们通过SGML创建了DTD，HTML会引用并需要遵循它。所以您总会在HTML页面顶部找到“DOCTYPE”属性，它定义了用于解析目的的DTD。

 <!--!doctype-->

解析SGML很麻烦，所以他们创建了XML来改善这一点。XML使用了SGML。例如，在SGML中您必须开始和结束标签，但在XML中您可以拥有自动关闭的标签（“）。

XHTML是根据HTML 4.0使用的XML创建的。所以，例如，在SGML派生的HTML中，“
”不是有效的，但在XHTML中它是有效的。您可以参考如下代码片段中所示的XML DTD。

 <!--!doctype--><!--!doctype-->

什么是HTML 5？

HTML 5是HTML的新标准，其主要目标是在无需任何额外插件（如Flash、Silverlight等）的情况下提供一切。它拥有动画、视频、丰富的GUI等一切功能。
HTML5是万维网联盟（W3C）和Web超文本应用技术工作组（WHATWG）合作的成果。

如果我不写 <! DOCTYPE html> ，HTML 5还能工作吗？

不，浏览器将无法识别它是一个HTML文档，并且HTML 5标签将无法正常工作。

哪些浏览器支持HTML 5？

几乎所有浏览器，即Safari、Chrome、Firefox、Opera、Internet Explorer都支持HTML 5。

HTML 5的页面结构与HTML 4或之前的HTML有什么不同？

一个典型的网页包含头部、底部、导航、中央区域和侧边栏。现在，如果我们想用HTML 4为HTML的各个部分命名来表示相同的内容，我们可能会使用DIV标签。
但在HTML 5中，通过创建这些部分的元素名称，使HTML更具可读性，从而使事情变得更清晰。

以下是构成页面结构的HTML 5元素的更多详细信息。

• <header>：表示HTML的头部数据。
• <footer>：页面的底部部分。
• <nav>：页面中的导航元素。
• <article>：自包含的内容。
• <section>：在article中使用，用于定义部分或将内容分组到部分中。

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. 颜色。
2. 日期
3. 日期时间-本地
4. 电子邮件
5. 时间
6. Url
7. Range
8. 电话
9. 数字
10. 搜索

让我们一步一步地理解这些元素。

如果您想显示颜色选择器对话框。

<input type="color" name="favcolor">  

如果您想显示日历对话框。

<input type="date" name="bday">  

如果您想显示带有本地时间的日历。

<input type="datetime-local" name="bdaytime">  

如果我们想创建一个带有电子邮件验证的HTML文本，我们可以将type设置为“email”。

<input type="email" name="email"> 

对于URL验证，请将type设置为“url”，如以下HTML代码所示。

<input type="url" name="sitename">  

对于URL验证，请将type设置为“url”，如以下HTML代码所示。

如果您想显示带有数字范围的文本框，可以将type设置为number。

<input type="number" name="quantity" min="1" max="5">  

如果您想显示一个范围控件，可以使用type as 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中的output元素是什么？

当您需要将两个输入的计算结果汇总到一个标签中时，就需要output元素。例如，您有两个文本框（参见下图），并且您想将这些文本框中的数字相加并将它们发送到一个标签。

以下是如何使用HTML 5的output元素的代码。

<form onsubmit="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”，以简化操作。您还可以使用output元素中的“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="http://www.w3.org/2000/svg">
<line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
</line>

HTML 5中的canvas是什么？

Canvas是一个HTML区域，您可以在其上绘制图形。

</canvas>

获取对canvas区域的访问权限

要在canvas区域上绘制，我们首先需要获取context部分的引用。以下是canvas部分的.代码。

<a a="" below="" body="" c="document.getElementById("mycanvas");" canvas="" complete="" ctx="c.getC>So how can we draw a simple line on Canvas? </a></h2>

<ul>
	<li>Define the Canvas area.</li>
	<li>Get access to canvas context area.</li>
	<li>Draw the graphic.</li>
</ul>

<p><strong>Define the canvas area </strong></p>

<p>So to define canvas area you need to use the below HTML code. This defines the area on which you can draw.</p>

<pre>


<canvas height=">

var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d"); </a>

绘制图形

现在，一旦您获得了context对象的访问权限，我们就可以开始在context上绘制了。所以，首先调用“move”方法并从一个点开始，使用line方法绘制线条，然后对其应用stroke（描边）。

<a a="" below="" body="" c="document.getElementById("mycanvas");" canvas="" complete="" ctx="c.getC>So how can we draw a simple line on Canvas? </a></h2>

<ul>
	<li>Define the Canvas area.</li>
	<li>Get access to canvas context area.</li>
	<li>Draw the graphic.</li>
</ul>

<p><strong>Define the canvas area </strong></p>

<p>So to define canvas area you need to use the below HTML code. This defines the area on which you can draw.</p>

<pre>


<canvas height=">
</a><a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>

注意： - 如果您看到前两个问题，canvas和SVG都可以绘制图形。所以在这个问题中，面试官希望知道您何时会使用哪一个。

SVG	画布
这就像“绘制然后记住”。换句话说，使用SVG绘制的任何形状都可以被记住并进行操作，然后浏览器可以重新渲染它。	Canvas就像“绘制然后忘记”。一旦绘制完成，您就无法访问该像素并对其进行操作。
SVG适用于创建图形，如CAD软件，一旦绘制完成，用户就希望对其进行操作。	Canvas适用于“绘制然后忘记”的场景，如动画和游戏。
这很慢，因为它需要记住坐标以供以后操作。	这很快，因为没有以后记住东西的意图。
我们可以将事件处理程序与绘图对象关联。	在这里，我们无法将事件处理程序与绘图对象关联，因为我们没有它们的引用。
与分辨率无关。	与分辨率相关。

如何使用HTML 5的Canvas和SVG绘制矩形？

使用SVG的HTML 5代码矩形代码。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect style="fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0, 0);" height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
</rect>

使用canvas的HTML 5矩形代码。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle fill="red" stroke-width="2" stroke="black" r="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" cx="[object SVGAnimatedLength]">

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

<!DOCTYPE html>
<html>
<body  önload="DrawMe();">
<svg height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
<circle id="circle1" cx="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" r="[object SVGAnimatedLength]" style="stroke: none; fill: rgb(255, 0, 0);">

</body>
<script>

 var timerFunction = setInterval(DrawMe, 20);
alert("ddd");

function DrawMe()
{
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) 
{
            newX = 20;
}
        circle.setAttribute("cx", newX);

}
</script>
</html></circle>

CSS中的选择器是什么？

选择器有助于选择要应用样式的元素。例如，下面是一个简单的样式，称为“intro”，它为HTML元素的背景应用红色。

<style>
.intro
{
background-color:red;
}
</style> 

要将上述“intro”样式应用于div，我们可以使用“class”选择器，如以下图片所示。

<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div> 

如何使用ID值应用CSS样式？

所以，假设您有一个ID为“mytext”的HTML段落标签，如以下代码片段所示。

<p id="mytext">This is HTML interview questions.</p> 

您可以使用“#”选择器和“id”名称创建样式，并将CSS值应用于段落标签。所以，要将样式应用于“mytext”元素，我们可以使用“#mytext”，如以下CSS代码所示。

<style>
#mytext
{
background-color:yellow;
}
</style> 

快速回顾一些重要的选择器。

将所有段落标签的背景颜色设置为黄色。

P,h1
{ 
background-color:yellow;
} 

将div标签内的所有段落标签设置为黄色背景。

div p
{ 
background-color:yellow;
} 

将所有div标签之后的段落标签设置为黄色背景。

div+p
{ 
background-color:yellow;
} 

如需进一步阅读，请观看以下面试准备视频和分步视频系列。

• Angular 面试题及答案
• Angular 教程面向初学者 | 分步学习 Angular
• ASP.NET MVC 面试题及答案
• C# 面试题及答案
• 逐步学习Azure。
• 逐步学习MVC 5
• MVC Core 分步教程
• SQL Server 分步教程
• ASP.NET 中的Session & Viewstate。