时间：2023-09-09 02:24:01 | 来源：网站运营
时间：2023-09-09 02:24:01 来源：网站运营
40个常见的HTML5 面试问题及答案：编辑注：前端开发面试的过程中，对HTML5的考察是一个比较大的分量的，很多人简历上也常常有精通HTML5，但是你真的对这些HTML5的东西精通吗？本文讲解了40个重要的HTML5面试题及答案，来看看有多少是你还没了解的，及时补充能量。
在线咨询
<!--!doctype-->由于解析SGML是一种痛苦，所以创建了XML。 XML使用SGML。例如，在SGML，你必须拥有成对的开始和结束标签，但在XML中，你可以使用自动关闭的标签。 <!--!doctype--><!--!doctype--><input list="Country"><datalist id="Country"><option value="India"><option value="Italy"><option value="Iran"><option value="Israel"><option value="Indonesia"></datalist><input type="color" name="favcolor"><input type="date" name="bday"><input type="datetime-local" name="bdaytime"><input type="email" name="email"><input type="url" name="sitename"><input type="number" name="quantity" min="1" max="5"><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"><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”。为了更具可读性，你也可以在输出元素中使用“for”。<output name="o" for="a b"></output><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>var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");绘制图形<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>注： 从前面的两个问题中我们可以看到画布和SVG都可以在浏览器上绘制图形。所以在这个问题上面试官可能会要你回答什么时候用哪个。<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>使用画布绘制矩形的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><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><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;}用“target”设置所有的属性为黄色背景。a[target]{ background-color:yellow;}<a href="http://www.questpond.com">ASP.NET interview questions</a><a href="http://www.questpond.com" target="_blank">c# interview questions</a><a href="http://www.questpond.org" target="_top">.NET interview questions with answers</a>当控件获得焦点的时候，设置所有元素为黄色背景。input:focus{ background-color:yellow;}根据链接操作设置超链接。a:link {color:green;}a:visited {color:green;}a:hover {color:red;}a:active {color:yellow;}-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-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:6px outset #ff00ff;下面是完整代码。<style>.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-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:6px outset #ff00ff;}</style>然后，你可以通过使用class属性应用样式到文本。<div class="magazine">Your text goes here which you want to divide in to 3 columns.</div>.box { width: 200px; border: 10px solid #99c; padding: 20px; margin: 50px;}现在，如果我们应用上述CSS代码到DIV标记，如下所示，那么你的输出将会如下图所示。我创建了两个文本，“Some text”和“Some other text”，这样我们可以看到margin属性函数是怎么样的。<div align="middle" class="box">Some text</div>Some other text.specialtext{text-shadow: 5px 5px 5px #FF0000;}<style>.breakword{word-wrap:break-word;}</style>function SomeHeavyFunction(){for (i = 0; i < 10000000000000; i++){x = i + x;}}假设上述for循环代码在一个HTML按钮点击上执行。现在，这种方法执行是同步的。换句话说，完整的浏览器会一直等，直到循环完成。<input type="button" onclick="SomeHeavyFunction();" />这会进一步导致浏览器冻结，并出现如下图所示的错误信息而无法响应。localStorage.setItem(“Key001”,”India”);要检索本地存储的数据，我们需要使用“getItem”来提供键名。var country = localStorage.getItem(“Key001”);你还可以使用下面的代码存储JavaScript对象到本地存储。var country = {};country.name = “India”;country.code = “I001”;localStorage.setItem(“I001”, country);var country1 = localStorage.getItem(“I001”);如果你想用JSON格式存储，那么可以使用“JSON.stringify”函数，如下面所示的代码。localStorage.setItem(“I001”,JSON.stringify(country));var db=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);要执行SQL，我们需要使用“transaction”函数，并调用“executeSql”函数执行SQL。db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)');tx.executeSql('INSERT INTO tblcust (id, customername) VALUES(1, "shiv")');tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (2, "raju")');}如果你执行“select”查询，那么你将得到的数据是“results”集合，这个数据集合可以循环和显示在HTML界面中。db.transaction(function (tx) { tx.executeSql('SELECT * FROM tblcust', [], function (tx, results) { for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#customer).innerHTML += msg;} }, null);});Response.ContentType = "text/cache-manifest";Response.Write("CACHE MANIFEST /n");Response.Write("# 2012-02-21 v1.0.0 /n");Response.Write("CACHE : /n");Response.Write("Login.aspx /n");Response.Flush();Response.End();在创建了缓存清单文件之后，接下来的事情就是提供清单文件在HTML页面中的链接，如下所示。<html manifest="cache.aspx">上述文件第一次运行时，它会被增加到浏览器应用程序缓存中，万一服务器宕机的话，页面就可以由应用程序缓存提供服务。<a name="WhatisfallbackinApplicati>FALLBACK:/home/ /homeoffline.html </a></pre><h2><a name=" whatisfallbackinapplicati=""></a>MVC面试问题及答案：http://www.codeproject.com/Articles/556995/MVC-interview-questions-with-answers关键词：试问,答案
