時間：2023-09-09 02:24:01 | 來源：網(wǎng)站運營
時間：2023-09-09 02:24:01 來源：網(wǎng)站運營
40個常見的HTML5 面試問題及答案：編輯注：前端開發(fā)面試的過程中，對HTML5的考察是一個比較大的分量的，很多人簡歷上也常常有精通HTML5，但是你真的對這些HTML5的東西精通嗎？本文講解了40個重要的HTML5面試題及答案，來看看有多少是你還沒了解的，及時補充能量。
在線咨詢
<!--!doctype-->由于解析SGML是一種痛苦，所以創(chuàng)建了XML。 XML使用SGML。例如，在SGML，你必須擁有成對的開始和結(jié)束標(biāo)簽，但在XML中，你可以使用自動關(guān)閉的標(biāo)簽。 <!--!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>要應(yīng)用上面的“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”名稱的“#”選擇器創(chuàng)建一個樣式，并應(yīng)用CSS值到段落標(biāo)記。為了應(yīng)用樣式到“mytext”元素，我們可以使用“#mytext”，如下面的CSS代碼所示。<style>#mytext{background-color:yellow;}</style>一些重要選擇器的快速修測。P,h1{ background-color:yellow;}將所有在div標(biāo)簽內(nèi)的段落標(biāo)記設(shè)置為黃色背景。div p{ background-color:yellow;}設(shè)置div標(biāo)簽后面的所有段落標(biāo)記為黃色背景。div+p{ background-color:yellow;}用“target”設(shè)置所有的屬性為黃色背景。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>當(dāng)控件獲得焦點的時候，設(shè)置所有元素為黃色背景。input:focus{ background-color:yellow;}根據(jù)鏈接操作設(shè)置超鏈接。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屬性應(yīng)用樣式到文本。<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;}現(xiàn)在，如果我們應(yīng)用上述CSS代碼到DIV標(biāo)記，如下所示，那么你的輸出將會如下圖所示。我創(chuàng)建了兩個文本，“Some text”和“Some other text”，這樣我們可以看到margin屬性函數(shù)是怎么樣的。<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;}}假設(shè)上述for循環(huán)代碼在一個HTML按鈕點擊上執(zhí)行?，F(xiàn)在，這種方法執(zhí)行是同步的。換句話說，完整的瀏覽器會一直等，直到循環(huán)完成。<input type="button" onclick="SomeHeavyFunction();" />這會進一步導(dǎo)致瀏覽器凍結(jié)，并出現(xiàn)如下圖所示的錯誤信息而無法響應(yīng)。localStorage.setItem(“Key001”,”India”);要檢索本地存儲的數(shù)據(jù)，我們需要使用“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”函數(shù)，如下面所示的代碼。localStorage.setItem(“I001”,JSON.stringify(country));var db=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);要執(zhí)行SQL，我們需要使用“transaction”函數(shù)，并調(diào)用“executeSql”函數(shù)執(zhí)行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")');}如果你執(zhí)行“select”查詢，那么你將得到的數(shù)據(jù)是“results”集合，這個數(shù)據(jù)集合可以循環(huán)和顯示在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();在創(chuàng)建了緩存清單文件之后，接下來的事情就是提供清單文件在HTML頁面中的鏈接，如下所示。<html manifest="cache.aspx">上述文件第一次運行時，它會被增加到瀏覽器應(yīng)用程序緩存中，萬一服務(wù)器宕機的話，頁面就可以由應(yīng)用程序緩存提供服務(wù)。<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關(guān)鍵詞：試問,答案
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
