敬的头条编程爱好者们，这些HTML5面试问题是学技巧专门整理的，让您了解您在面试HTML5中可能遇到的问题的性质。根据我的经验，访问者很少打算在面试中提出任何特定的问题，通常问题从一些基本概念开始，后来他们继续基于进一步的讨论和你的回答：

什么是HTML5？

HTML5是替代HTML 4.01，XHTML 1.0和XHTML 1.1的HTML标准的下一个主要版本。HTML5是在万维网上构建和呈现内容的标准。

命名HTML5的一些新功能。哪些浏览器支持HTML5？HTML5向后兼容旧版浏览器？HTML标签是否区分大小写？HTML5中“section”标签的目的是什么？HTML5中“文章”标签的目的是什么？HTML5中的“替代”标签的目的是什么？HTML5中“标头”标签的目的是什么？HTML5中“footer”标签的目的是什么？HTML5中的“nav”标签的目的是什么？

该标签代表用于导航的文档的一部分。

HTML5中的“对话”标签的目的是什么？

该标签可用于标记会话。

HTML5中“figure”标签的目的是什么？

该标签可用于将标题与某些嵌入式内容（如图形或视频）相关联。

HTML5中的自定义属性是什么？

自定义数据属性从数据开始，并将根据您的要求进行命名。以下是简单的例子 -

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

以上将是完美有效的HTML5与两个自定义属性称为数据主题和数据级别。您将能够以与获取标准属性相似的方式使用JavaScript API或CSS获取这些属性的值。

HTML5中“输出”标签的目的是什么？

HTML5引入了一个新元素<output>，用于表示不同类型输出的结果，例如脚本输出的输出。

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

HTML5引入了一个名为placeholder的新属性。<input>和<textarea>元素上的此属性为用户提供了可在字段中输入的内容。占位符文本不能包含回车符或换行符。

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

这是一个简单的一步模式，在文档加载时可以方便地在JavaScript中编程，自动对焦一个特定的表单字段。

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

HTML5引入了一个称为required的新属性，它将坚持在输入控件中具有一个值。

HTML5中的会话存储是什么意思？

HTML5引入了sessionStorage属性，这些属性将由站点使用以将数据添加到会话存储，并且它可以访问该窗口中同一站点的任何页面，即会话，一旦您关闭窗口，会话将会丢失。

HTML5中的本地存储是什么意思？

HTML5引入了localStorage属性，该属性将用于访问页面的本地存储区域，而不需要任何时间限制，并且每当您使用该页面时，本地存储将可用。

HTML5中“canvas”标签的目的是什么？

HTML5元素<canvas>为您提供了使用JavaScript绘制图形的简单而强大的方法。它可以用于绘制图形，制作照片作品或做简单（而不是那么简单）的动画。

HTML5中“音频”标签的目的是什么？

HTML5支持用于将声音内容嵌入到HTML或XHTML文档中的<audio>标签。目前的HTML5草案规范没有指定音频标签中应支持的音频格式。但是最常用的音频格式是ogg，mp3和wav。

您可以使用<source>标签来指定媒体以及媒体类型和许多其他属性。音频元素允许多个源元素和浏览器将使用第一个识别的格式。

HTML5中的“视频”标签的目的是什么？

HTML5支持用于将视频文件嵌入到HTML或XHTML文档中的<video>标签。目前的HTML5草案规范没有指定浏览器在视频标签中应该支持哪些视频格式。但最常用的视频格式是 -

• Ogg -Ogg文件与Thedora视频编解码器和Vorbis音频编解码器。

• mpeg4 -具有H.264视频编解码器和AAC音频编解码器的MPEG4文件。

您可以使用<source>标签来指定媒体以及媒体类型和许多其他属性。音频元素允许多个源元素和浏览器将使用第一个识别的格式。

什么是HTML中的Geolocation API？

HTML5 Geolocation API可让您与自己喜欢的网站分享您的位置。Javascript可以捕获您的纬度和经度，并且可以发送到后端Web服务器，并且可以通过查找本地业务或在地图上显示您的位置来进行奇特的位置感知。

今天，大多数浏览器和移动设备支持Geolocation API。地理位置API使用全局导航对象的新属性，即。可以创建的地理位置对象如下：

var geolocation=navigator.geolocation;

地理位置对象是允许小部件检索有关设备地理位置的信息的服务对象。

HTML5的geolocation对象的getCurrentPosition（）方法的目的是什么？

该方法检索用户的当前地理位置。

HTML5的geolocation对象的watchPosition（）方法的目的是什么？

此方法检索有关设备当前地理位置的定期更新。

HTML5的geolocation对象的clearPosition（）方法的目的是什么？

此方法将取消正在进行的watchPosition调用。

今天的分享就到这里，希望对大家有所帮助，感谢关注学技巧的每一位老铁们，祝大家代码写的越来越好。

着移动互联网时代的到来，HTML5流行风盛行，HTML5开发工程师在人才市场中变得非常吃香。而20129年的今天，招聘网站上的HTML5开发工程师职位数量依旧庞大。那么求职者们怎样才能成功的面试上HTML5开发工程师岗位呢？除了要有一份精美的简历，还得做好充足的面试准备，其中最重要的是需要了解一些用人企业常问的HTML5面试题和套路。那下来千锋武汉HTML5培训小编就给小伙伴们分享六个面试题，都是用人企业爱问的，你一定要仔细看哦！

首先，千锋武汉HTML5培训小编先向各位简单的介绍下面试流程。大公司的面试流程分为笔试—项目经理面谈—总监面谈—机试—HR面谈五大部分。笔试题目不会太难，都是些基础题目，且js部分占的比例较多，主要是企业想了解你的前端基础如何；面谈过程都会比较轻松，对方的面试官会在与你聊天的过程中，问你一些相关的技术问题，这个稍后下面着重介绍；机试给你一个页面，然后让你在电脑上用代码写出来；最后才是HR与你谈薪资待遇。

那么，用人企业的项目经理和技术总监一般会问哪些的问题呢？项目经理重基础，问得会比较细，而总监注重架构，全局观。下面千锋武汉HTML5培训小编奉上六个经典的面试问题，都是些基础题，大家仔细看。

问题一：浏览器是怎么对HTML5的离线存储资源进行管理和加载的？

答：浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线情况下，浏览器就直接使用离线存储的资源。

问题二：JS中有哪些数据类型呢？

答：JS中有5种数据类型：Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型object，object本质是一组无序的名值对组成的。

问题三：IE浏览器css浮动与兼容性问题

答：浮动之后，需要清除浮动才不会产生问题。现在主流方法是在浮动元素的父级添加一个class，内容为：

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

.clear{zoom:1;}//这个是为了兼容IE

然后父级添加一个class=“clear”即可

问题四：js放在html的不同位置有什么区别吗？

答：如果使用window.函数，将js代码放在其中，则放在哪里都是一样的，因为都是在body加载完再执行的，如果不使用window.函数,放在head中的话，代码不会被执行，这是因为html执行顺序，确切的说是js的执行顺序，HTML从上运行到 的时候进入test.js文件。前面的不会运行，也就是被function包起来的不会被运行，这个时候就执行最后一句。去页面中取元素。但是这个时候，HTML页面并没有加载完。所以找不到元素，就会报错。

问题五：移动html5开发流行的框架有哪些？

答：1、jQueryMobile，jQueryMobile是jQuery在手机上和平板设备上的版本。jQueryMobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQueryMobile开发团队说：能开发这个项目，非常兴奋。移动web太需要一个跨浏览器的框架，让开发人员开发出真正的移动web网站。

2、jQTouch，jQTouch是一个jQuery的插件，主要用于手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的Java库。支持包括iPhone、Android等手机。

问题六：ajax和jsonp的区别是？

答：实现方法完全不一样。ajax的核心是通过获取非本页内容，而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。

以上千锋武汉HTML5培训小编分享的这六条均是第一轮面试时项目经理会问的HTML5开发工程师技术问题。相信这些面试题目都不难，那就请你一定记住它，祝大家面试成功。如您对文中题目的回答有更好答案，请在下方留言，或是遇到过其他的面试题目，也请您留言与大家分享。

如果你想要成为企业需要的Web前端工程师，就应该早做准备，来千锋武汉Web前端培训，申请两周免费试听，亲身感受讲师的授课水平。

千锋武汉Web前端培训课程结合时下流行技术，加入大数据可视化内容，同时深化了PHP+MySQL开发内容，精准匹配企业线下及未来需求，学员可接触HTML5开发、微信开发、微信支付、小程序开发、Web网站开发、Web管理系统开发等项目，能够积累更多开发经验，学员毕业之后可以无缝对接真实工作需求。关注“武汉千锋”微信公众号，小千会定期为大家分享最新Web前端发展趋势。

、响应式设计

在HTML5真的要来改变移动开发平台之前，必须要迈出极为重要的一步，那就是“响应式设计”，也就是屏幕可以由相对应的内容而自动的去调整大小。然而响应式设计也是一件特别不容易去做到的事情，因为在当今的社会，各式各样设备的出现实在让诸多开发者眼花缭乱，手足无措。

如果你想要做好响应式的设计理念，那么就必须洞悉内容与屏幕之间的不同反馈关系，响应式设计是需要完全的离开“流”，这一过程还在不断的继续着，而HTML5技术会让它最终成为可能。

二、Canvas 标记

Canvas 标记很多年前就被当作一个新的 HTML 标记成员加入到了 HTML5 标准中。在此之前，人们要想实现动态的网页应用，只能借助于第三方的插件，比如 Flash 或 Java，而引入了 Canvas 标记后，人们直接打通了通往神奇的动态应用网页的大门。本教程内容只覆盖了一小部分、但却是非常重要的 canvas 标记的应用功能图像显示和处理。

图像来源

最常见的在 canvas 上画图的方法是使用 Javascript Image 对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式(png，jpg，gif 等)基本上都没有问题。

图片可以从 DOM 中已经加载的元素中抓取，也可以按需即时创建。

// 抓取页面上已有的图片。

myImage=new Image ();

myImage.src=‘image.png’;

大多数支持 canvas 标记的浏览器的当前版本中，当图片还没有加载完成时，如果你要去画它，结果是什么事情都不会发生。也就是说，如果你想画一个图片，你需要等它完全加载。你可以使用图片对象的 onload 函数来进行判断。

// Create an image.

myImage=new Image ();

myImage.onload=function () {

// Draw image.

myImage.src=‘image.png’;

三、Html5新标签解释及用法

HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准

它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签，但有一定含义，例如 <nav>（网站导航块）和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如 <audio> 和 <video> 标记。

一些过时的 HTML 4 标记将取消，其中包括纯粹用作显示效果的标记，如 <font> 和 <center>，因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为（via）。

下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5:<article></article>

HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>

HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio> 标签定义声音，比如音乐或其他音频流。

HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

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

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

以上是广州中星信息负责Html5培训的老师提供，谢谢！