敬的頭條編程愛(ài)好者們，這些HTML5面試問(wèn)題是學(xué)技巧專(zhuān)門(mén)整理的，讓您了解您在面試HTML5中可能遇到的問(wèn)題的性質(zhì)。根據(jù)我的經(jīng)驗(yàn)，訪(fǎng)問(wèn)者很少打算在面試中提出任何特定的問(wèn)題，通常問(wèn)題從一些基本概念開(kāi)始，后來(lái)他們繼續(xù)基于進(jìn)一步的討論和你的回答：

什么是HTML5？

HTML5是替代HTML 4.01，XHTML 1.0和XHTML 1.1的HTML標(biāo)準(zhǔn)的下一個(gè)主要版本。HTML5是在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)準(zhǔn)。

命名HTML5的一些新功能。哪些瀏覽器支持HTML5？HTML5向后兼容舊版瀏覽器？HTML標(biāo)簽是否區(qū)分大小寫(xiě)？HTML5中“section”標(biāo)簽的目的是什么？HTML5中“文章”標(biāo)簽的目的是什么？HTML5中的“替代”標(biāo)簽的目的是什么？HTML5中“標(biāo)頭”標(biāo)簽的目的是什么？HTML5中“footer”標(biāo)簽的目的是什么？HTML5中的“nav”標(biāo)簽的目的是什么？

該標(biāo)簽代表用于導(dǎo)航的文檔的一部分。

HTML5中的“對(duì)話(huà)”標(biāo)簽的目的是什么？

該標(biāo)簽可用于標(biāo)記會(huì)話(huà)。

HTML5中“figure”標(biāo)簽的目的是什么？

該標(biāo)簽可用于將標(biāo)題與某些嵌入式內(nèi)容（如圖形或視頻）相關(guān)聯(lián)。

HTML5中的自定義屬性是什么？

自定義數(shù)據(jù)屬性從數(shù)據(jù)開(kāi)始，并將根據(jù)您的要求進(jìn)行命名。以下是簡(jiǎn)單的例子 -

<div class="example" data-subject="physics" data-level="complex">
 ...</div>

以上將是完美有效的HTML5與兩個(gè)自定義屬性稱(chēng)為數(shù)據(jù)主題和數(shù)據(jù)級(jí)別。您將能夠以與獲取標(biāo)準(zhǔn)屬性相似的方式使用JavaScript API或CSS獲取這些屬性的值。

HTML5中“輸出”標(biāo)簽的目的是什么？

HTML5引入了一個(gè)新元素<output>，用于表示不同類(lèi)型輸出的結(jié)果，例如腳本輸出的輸出。

HTML5中“占位符”屬性的目的是什么？

HTML5引入了一個(gè)名為placeholder的新屬性。<input>和<textarea>元素上的此屬性為用戶(hù)提供了可在字段中輸入的內(nèi)容。占位符文本不能包含回車(chē)符或換行符。

HTML5中“autofocus”屬性的目的是什么？

這是一個(gè)簡(jiǎn)單的一步模式，在文檔加載時(shí)可以方便地在JavaScript中編程，自動(dòng)對(duì)焦一個(gè)特定的表單字段。

HTML5中“必需”屬性的目的是什么？

HTML5引入了一個(gè)稱(chēng)為required的新屬性，它將堅(jiān)持在輸入控件中具有一個(gè)值。

HTML5中的會(huì)話(huà)存儲(chǔ)是什么意思？

HTML5引入了sessionStorage屬性，這些屬性將由站點(diǎn)使用以將數(shù)據(jù)添加到會(huì)話(huà)存儲(chǔ)，并且它可以訪(fǎng)問(wèn)該窗口中同一站點(diǎn)的任何頁(yè)面，即會(huì)話(huà)，一旦您關(guān)閉窗口，會(huì)話(huà)將會(huì)丟失。

HTML5中的本地存儲(chǔ)是什么意思？

HTML5引入了localStorage屬性，該屬性將用于訪(fǎng)問(wèn)頁(yè)面的本地存儲(chǔ)區(qū)域，而不需要任何時(shí)間限制，并且每當(dāng)您使用該頁(yè)面時(shí)，本地存儲(chǔ)將可用。

HTML5中“canvas”標(biāo)簽的目的是什么？

HTML5元素<canvas>為您提供了使用JavaScript繪制圖形的簡(jiǎn)單而強(qiáng)大的方法。它可以用于繪制圖形，制作照片作品或做簡(jiǎn)單（而不是那么簡(jiǎn)單）的動(dòng)畫(huà)。

HTML5中“音頻”標(biāo)簽的目的是什么？

HTML5支持用于將聲音內(nèi)容嵌入到HTML或XHTML文檔中的<audio>標(biāo)簽。目前的HTML5草案規(guī)范沒(méi)有指定音頻標(biāo)簽中應(yīng)支持的音頻格式。但是最常用的音頻格式是ogg，mp3和wav。

您可以使用<source>標(biāo)簽來(lái)指定媒體以及媒體類(lèi)型和許多其他屬性。音頻元素允許多個(gè)源元素和瀏覽器將使用第一個(gè)識(shí)別的格式。

HTML5中的“視頻”標(biāo)簽的目的是什么？

HTML5支持用于將視頻文件嵌入到HTML或XHTML文檔中的<video>標(biāo)簽。目前的HTML5草案規(guī)范沒(méi)有指定瀏覽器在視頻標(biāo)簽中應(yīng)該支持哪些視頻格式。但最常用的視頻格式是 -

• Ogg -Ogg文件與Thedora視頻編解碼器和Vorbis音頻編解碼器。

• mpeg4 -具有H.264視頻編解碼器和AAC音頻編解碼器的MPEG4文件。

您可以使用<source>標(biāo)簽來(lái)指定媒體以及媒體類(lèi)型和許多其他屬性。音頻元素允許多個(gè)源元素和瀏覽器將使用第一個(gè)識(shí)別的格式。

什么是HTML中的Geolocation API？

HTML5 Geolocation API可讓您與自己喜歡的網(wǎng)站分享您的位置。Javascript可以捕獲您的緯度和經(jīng)度，并且可以發(fā)送到后端Web服務(wù)器，并且可以通過(guò)查找本地業(yè)務(wù)或在地圖上顯示您的位置來(lái)進(jìn)行奇特的位置感知。

今天，大多數(shù)瀏覽器和移動(dòng)設(shè)備支持Geolocation API。地理位置API使用全局導(dǎo)航對(duì)象的新屬性，即。可以創(chuàng)建的地理位置對(duì)象如下：

var geolocation=navigator.geolocation;

地理位置對(duì)象是允許小部件檢索有關(guān)設(shè)備地理位置的信息的服務(wù)對(duì)象。

HTML5的geolocation對(duì)象的getCurrentPosition（）方法的目的是什么？

該方法檢索用戶(hù)的當(dāng)前地理位置。

HTML5的geolocation對(duì)象的watchPosition（）方法的目的是什么？

此方法檢索有關(guān)設(shè)備當(dāng)前地理位置的定期更新。

HTML5的geolocation對(duì)象的clearPosition（）方法的目的是什么？

此方法將取消正在進(jìn)行的watchPosition調(diào)用。

今天的分享就到這里，希望對(duì)大家有所幫助，感謝關(guān)注學(xué)技巧的每一位老鐵們，祝大家代碼寫(xiě)的越來(lái)越好。

著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，HTML5流行風(fēng)盛行，HTML5開(kāi)發(fā)工程師在人才市場(chǎng)中變得非常吃香。而20129年的今天，招聘網(wǎng)站上的HTML5開(kāi)發(fā)工程師職位數(shù)量依舊龐大。那么求職者們?cè)鯓硬拍艹晒Φ拿嬖嚿螲TML5開(kāi)發(fā)工程師崗位呢？除了要有一份精美的簡(jiǎn)歷，還得做好充足的面試準(zhǔn)備，其中最重要的是需要了解一些用人企業(yè)常問(wèn)的HTML5面試題和套路。那下來(lái)千鋒武漢HTML5培訓(xùn)小編就給小伙伴們分享六個(gè)面試題，都是用人企業(yè)愛(ài)問(wèn)的，你一定要仔細(xì)看哦！

首先，千鋒武漢HTML5培訓(xùn)小編先向各位簡(jiǎn)單的介紹下面試流程。大公司的面試流程分為筆試—項(xiàng)目經(jīng)理面談—總監(jiān)面談—機(jī)試—HR面談五大部分。筆試題目不會(huì)太難，都是些基礎(chǔ)題目，且js部分占的比例較多，主要是企業(yè)想了解你的前端基礎(chǔ)如何；面談過(guò)程都會(huì)比較輕松，對(duì)方的面試官會(huì)在與你聊天的過(guò)程中，問(wèn)你一些相關(guān)的技術(shù)問(wèn)題，這個(gè)稍后下面著重介紹；機(jī)試給你一個(gè)頁(yè)面，然后讓你在電腦上用代碼寫(xiě)出來(lái)；最后才是HR與你談薪資待遇。

那么，用人企業(yè)的項(xiàng)目經(jīng)理和技術(shù)總監(jiān)一般會(huì)問(wèn)哪些的問(wèn)題呢？項(xiàng)目經(jīng)理重基礎(chǔ)，問(wèn)得會(huì)比較細(xì)，而總監(jiān)注重架構(gòu)，全局觀(guān)。下面千鋒武漢HTML5培訓(xùn)小編奉上六個(gè)經(jīng)典的面試問(wèn)題，都是些基礎(chǔ)題，大家仔細(xì)看。

問(wèn)題一：瀏覽器是怎么對(duì)HTML5的離線(xiàn)存儲(chǔ)資源進(jìn)行管理和加載的？

答：瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪(fǎng)問(wèn)app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線(xiàn)存儲(chǔ)。如果已經(jīng)訪(fǎng)問(wèn)過(guò)app并且資源已經(jīng)離線(xiàn)存儲(chǔ)了，那么瀏覽器就會(huì)使用離線(xiàn)的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線(xiàn)存儲(chǔ)。離線(xiàn)情況下，瀏覽器就直接使用離線(xiàn)存儲(chǔ)的資源。

問(wèn)題二：JS中有哪些數(shù)據(jù)類(lèi)型呢？

答：JS中有5種數(shù)據(jù)類(lèi)型：Undefined、Null、Boolean、Number和String。還有一種復(fù)雜的數(shù)據(jù)類(lèi)型object，object本質(zhì)是一組無(wú)序的名值對(duì)組成的。

問(wèn)題三：IE瀏覽器css浮動(dòng)與兼容性問(wèn)題

答：浮動(dòng)之后，需要清除浮動(dòng)才不會(huì)產(chǎn)生問(wèn)題。現(xiàn)在主流方法是在浮動(dòng)元素的父級(jí)添加一個(gè)class，內(nèi)容為：

.clear:after{content:'';display:block;clear:both;}

.clear{zoom:1;}//這個(gè)是為了兼容IE

然后父級(jí)添加一個(gè)class=“clear”即可

問(wèn)題四：js放在html的不同位置有什么區(qū)別嗎？

答：如果使用window.函數(shù)，將js代碼放在其中，則放在哪里都是一樣的，因?yàn)槎际窃赽ody加載完再執(zhí)行的，如果不使用window.函數(shù),放在head中的話(huà)，代碼不會(huì)被執(zhí)行，這是因?yàn)閔tml執(zhí)行順序，確切的說(shuō)是js的執(zhí)行順序，HTML從上運(yùn)行到 的時(shí)候進(jìn)入test.js文件。前面的不會(huì)運(yùn)行，也就是被function包起來(lái)的不會(huì)被運(yùn)行，這個(gè)時(shí)候就執(zhí)行最后一句。去頁(yè)面中取元素。但是這個(gè)時(shí)候，HTML頁(yè)面并沒(méi)有加載完。所以找不到元素，就會(huì)報(bào)錯(cuò)。

問(wèn)題五：移動(dòng)html5開(kāi)發(fā)流行的框架有哪些？

答：1、jQueryMobile，jQueryMobile是jQuery在手機(jī)上和平板設(shè)備上的版本。jQueryMobile不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。jQueryMobile開(kāi)發(fā)團(tuán)隊(duì)說(shuō)：能開(kāi)發(fā)這個(gè)項(xiàng)目，非常興奮。移動(dòng)web太需要一個(gè)跨瀏覽器的框架，讓開(kāi)發(fā)人員開(kāi)發(fā)出真正的移動(dòng)web網(wǎng)站。

2、jQTouch，jQTouch是一個(gè)jQuery的插件，主要用于手機(jī)上的Webkit瀏覽器上實(shí)現(xiàn)一些包括動(dòng)畫(huà)、列表導(dǎo)航、默認(rèn)應(yīng)用樣式等各種常見(jiàn)UI效果的Java庫(kù)。支持包括iPhone、Android等手機(jī)。

問(wèn)題六：ajax和jsonp的區(qū)別是？

答：實(shí)現(xiàn)方法完全不一樣。ajax的核心是通過(guò)獲取非本頁(yè)內(nèi)容，而jsonp的核心則是動(dòng)態(tài)添加標(biāo)簽來(lái)調(diào)用服務(wù)器提供的js腳本。

以上千鋒武漢HTML5培訓(xùn)小編分享的這六條均是第一輪面試時(shí)項(xiàng)目經(jīng)理會(huì)問(wèn)的HTML5開(kāi)發(fā)工程師技術(shù)問(wèn)題。相信這些面試題目都不難，那就請(qǐng)你一定記住它，祝大家面試成功。如您對(duì)文中題目的回答有更好答案，請(qǐng)?jiān)谙路搅粞裕蚴怯龅竭^(guò)其他的面試題目，也請(qǐng)您留言與大家分享。

如果你想要成為企業(yè)需要的Web前端工程師，就應(yīng)該早做準(zhǔn)備，來(lái)千鋒武漢Web前端培訓(xùn)，申請(qǐng)兩周免費(fèi)試聽(tīng)，親身感受講師的授課水平。

千鋒武漢Web前端培訓(xùn)課程結(jié)合時(shí)下流行技術(shù)，加入大數(shù)據(jù)可視化內(nèi)容，同時(shí)深化了PHP+MySQL開(kāi)發(fā)內(nèi)容，精準(zhǔn)匹配企業(yè)線(xiàn)下及未來(lái)需求，學(xué)員可接觸HTML5開(kāi)發(fā)、微信開(kāi)發(fā)、微信支付、小程序開(kāi)發(fā)、Web網(wǎng)站開(kāi)發(fā)、Web管理系統(tǒng)開(kāi)發(fā)等項(xiàng)目，能夠積累更多開(kāi)發(fā)經(jīng)驗(yàn)，學(xué)員畢業(yè)之后可以無(wú)縫對(duì)接真實(shí)工作需求。關(guān)注“武漢千鋒”微信公眾號(hào)，小千會(huì)定期為大家分享最新Web前端發(fā)展趨勢(shì)。

、響應(yīng)式設(shè)計(jì)

在HTML5真的要來(lái)改變移動(dòng)開(kāi)發(fā)平臺(tái)之前，必須要邁出極為重要的一步，那就是“響應(yīng)式設(shè)計(jì)”，也就是屏幕可以由相對(duì)應(yīng)的內(nèi)容而自動(dòng)的去調(diào)整大小。然而響應(yīng)式設(shè)計(jì)也是一件特別不容易去做到的事情，因?yàn)樵诋?dāng)今的社會(huì)，各式各樣設(shè)備的出現(xiàn)實(shí)在讓諸多開(kāi)發(fā)者眼花繚亂，手足無(wú)措。

如果你想要做好響應(yīng)式的設(shè)計(jì)理念，那么就必須洞悉內(nèi)容與屏幕之間的不同反饋關(guān)系，響應(yīng)式設(shè)計(jì)是需要完全的離開(kāi)“流”，這一過(guò)程還在不斷的繼續(xù)著，而HTML5技術(shù)會(huì)讓它最終成為可能。

二、Canvas 標(biāo)記

Canvas 標(biāo)記很多年前就被當(dāng)作一個(gè)新的 HTML 標(biāo)記成員加入到了 HTML5 標(biāo)準(zhǔn)中。在此之前，人們要想實(shí)現(xiàn)動(dòng)態(tài)的網(wǎng)頁(yè)應(yīng)用，只能借助于第三方的插件，比如 Flash 或 Java，而引入了 Canvas 標(biāo)記后，人們直接打通了通往神奇的動(dòng)態(tài)應(yīng)用網(wǎng)頁(yè)的大門(mén)。本教程內(nèi)容只覆蓋了一小部分、但卻是非常重要的 canvas 標(biāo)記的應(yīng)用功能圖像顯示和處理。

圖像來(lái)源

最常見(jiàn)的在 canvas 上畫(huà)圖的方法是使用 Javascript Image 對(duì)象。所支持的來(lái)源圖片格式依賴(lài)于瀏覽器的支持，然而，一些典型的圖片格式(png，jpg，gif 等)基本上都沒(méi)有問(wèn)題。

圖片可以從 DOM 中已經(jīng)加載的元素中抓取，也可以按需即時(shí)創(chuàng)建。

// 抓取頁(yè)面上已有的圖片。

myImage=new Image ();

myImage.src=‘image.png’;

大多數(shù)支持 canvas 標(biāo)記的瀏覽器的當(dāng)前版本中，當(dāng)圖片還沒(méi)有加載完成時(shí)，如果你要去畫(huà)它，結(jié)果是什么事情都不會(huì)發(fā)生。也就是說(shuō)，如果你想畫(huà)一個(gè)圖片，你需要等它完全加載。你可以使用圖片對(duì)象的 onload 函數(shù)來(lái)進(jìn)行判斷。

// Create an image.

myImage=new Image ();

myImage.onload=function () {

// Draw image.

myImage.src=‘image.png’;

三、Html5新標(biāo)簽解釋及用法

HTML 5 是一個(gè)新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，目標(biāo)在于取代現(xiàn)有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標(biāo)準(zhǔn)

它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 與 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和屬性，反映典型的現(xiàn)代用法網(wǎng)站。其中有些是技術(shù)上類(lèi)似 <div> 和 <span> 標(biāo)簽，但有一定含義，例如 <nav>（網(wǎng)站導(dǎo)航塊）和 <footer>。這種標(biāo)簽將有利于搜索引擎的索引整理、小屏幕裝置和視障人士使用。同時(shí)為其他瀏覽要素提供了新的功能，通過(guò)一個(gè)標(biāo)準(zhǔn)接口，如 <audio> 和 <video> 標(biāo)記。

一些過(guò)時(shí)的 HTML 4 標(biāo)記將取消，其中包括純粹用作顯示效果的標(biāo)記，如 <font> 和 <center>，因?yàn)樗鼈円呀?jīng)被 CSS 取代。還有一些透過(guò) DOM 的網(wǎng)絡(luò)行為（via）。

下面我們來(lái)看一下HTML 5提供的一些新的標(biāo)簽用法以及和HTML 4的區(qū)別。

<article>標(biāo)簽定義外部的內(nèi)容。比如來(lái)自一個(gè)外部的新聞提供者的一篇新的文章，或者來(lái)自 blog 的文本，或者是來(lái)自論壇的文本。亦或是來(lái)自其他外部源內(nèi)容。

HTML5:<article></article>

HTML4:<div></div>

<aside>標(biāo)簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。

HTML5:<aside>Aside 的內(nèi)容是獨(dú)立的內(nèi)容，但應(yīng)與文檔內(nèi)容相關(guān)。</aside>

HTML4:<div>Aside 的內(nèi)容是獨(dú)立的內(nèi)容，但應(yīng)與文檔內(nèi)容相關(guān)。</div>

<audio> 標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。

HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>

HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶(hù)端矢量圖形而設(shè)計(jì)的。它自己沒(méi)有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶(hù)端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫(huà)布上。

以上是廣州中星信息負(fù)責(zé)Html5培訓(xùn)的老師提供，謝謝！