前端html5面试题,html5新特性面试题

　　前言

　　什么是HTML5:HTML5是HTML的下一代，将成为HTML、XHTML和HTML DOM的新标准。今天就来说说前端面试基本每次见面都会被问到的一个问题，就是html5的新特性。这是学习前端必须掌握的基础知识。

　　新增的元素

　　Html5增加了一些更好的语义标签元素。

　　结构元素

　　Article元素，它表示页面中与上下文无关的独立内容，比如博客中的一篇文章。side元素，表示文章内容和辅助信息以外的内容。Header元素，它表示内容块的标题或页面中的整个页面。hgroup元素用于组合页面中一个块或整个页面的标题。元素，它表示内容块的页脚或页面中的整个页面。图元素，它表示媒体内容及其标题的分组。Section元素，表示页面中的内容块，如章节。元素，它表示页面中的导航链接。其他元素

　　视频元素用于定义视频。音频元素，用于定义音频。Canvas元素，用于显示图形，没有行为，只提供一个画布。嵌入元素，用于插入各种多媒体。格式可以是Midi、Wav、AIFF、AU、MP3等。mark元素用于显示突出显示的文本。Progress元素，用于显示任何类型任务的进度。代表重量和度量的仪表元素在预定义的范围内定义度量。time元素用于显示日期或时间。Command元素，它表示一个命令按钮。Details元素，用于显示用户所需的和可用的详细信息。summary元素用于定义details元素的可见标题。Datalist元素，用于显示可选的数据列表，可以和input元素一起使用，形成输入值的下拉列表。Datagrid元素，也用于显示可选的数据列表，以树形列表的形式显示。key元素，表示生成的密钥。元素，它表示不同类型的输出。元素，它为媒体元素定义媒体资源。Menu元素，它表示菜单列表。Ruby元素，表示ruby注释，rt元素表示字符的解释或发音。Rp元素在ruby注释中用于定义不支持ruby元素的浏览器显示的内容。Wbr元素，表示软换行符。与br元素的区别在于，br元素表示此处必须换行，而wbr元素表示浏览器窗口或父元素的宽度足够宽。不换行，但是宽度不够的时候，这里主动换行。Bdi元素，它定义了文本的文本方向，并使其与周围文本的方向设置相分离。代表对话框或窗口的dialog元素。废除的元素

　　html5中已经废除了一些纯表现性的元素，只保留了一些浏览器支持的元素和一些会对可用性产生负面影响的元素。

　　纯表现元素

　　纯表现性元素是那些可以用css替代的元素。base、big、center、font、s、strike、tt和u等元素的功能纯粹是为了页面显示。html5主张在css样式表中统一处理页面显示功能，所以应该废除这些元素，用css样式代替。

　　对可用性产生负面影响的元素

　　至于frameset元素、frame元素和noframes元素，由于frame对网页可用性的负面影响，html5中只支持iframe框架，同时在html5中废除了frameset、frame和noframes三个元素。

　　只有部分浏览器支持的元素

　　applet、bgsound、blink、marquee等元素只有部分浏览器支持，尤其是bgsound元素和marquee元素只有IE支持，所以在html5中被废除。applet元素可以用embed元素或者object元素代替，bgsound元素可以用audio元素代替，marquee可以用javascript编程代替。

　　新增的API

　　Canvas API

　　上面提到的canvas元素可以为页面提供显示图形的画布。结合Canvas API，可以在这个画布上动态生成和显示各种图形、图表、图像和动画。Canvas本质上是一个位图画布，不可伸缩，绘制的对象不属于页面的DOM结构或者任何命名空间。不需要把每个图元都存储为一个对象，执行性能非常好。

　　使用Canvas API进行绘制，首先要获取Canvas元素的上下文，然后用这个上下文中封装的各种绘图函数进行绘制。

　　Canvas id=canvas 替代内容/canvas脚本var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；//获取上下文//设置纯色context.fillStyle= redcontext.strokeStyle= blue//实践表明，在不设置fillStyle的情况下，默认fillStyle为blackcontext.fillrect (0，0，100，100)；//实践表明，不设置strokeStyle时，默认strokeStyle为blackcontext.strokerect (120，0，100，100)；/scriptSVG

　　SVG是html5的另一个图形功能。这是一个标准的矢量图形，一种有自己的API的文件格式。Html引入了内联SVG，因此SVG元素可以直接出现在HTML标签中。

　　svg高度=100宽度=100圆cx=50 cy=50 r=50 //svg音频和视频

　　音视频元素的出现，让html5媒体应用有了新的选择，开发者不用插件就可以播放音视频。对于这两个元素，html5规范提供了一个通用的、完整的、可脚本化的API。

　　在html5的规范出来之前，在页面上播放视频的典型方式是使用Flash、QuickTime或Windows Media插件将音频和视频嵌入到html中。与这种方式相比，使用html5的媒体标签有两个好处。

　　作为浏览器本身支持的功能，不需要安装新的音频和视频元素。Media element为网页提供了通用的、集成的和可脚本化的API。video src= video . webm controls object data= video player . swf type= application/x-shock wave-flash param name= movie value= video . swf //object您的浏览器不支持HTML5视频。/视频浏览器支持性检测

　　检查浏览器是否支持音频元素或视频元素的最简单方法是用脚本动态创建它，然后检查特定的函数是否存在。

　　var hasVideo=！(document.createElement(video )。canPlayType)；Geolocation API

　　html5的地理定位API可以请求用户共享他们的位置。方法很简单。如果用户同意，浏览器将返回位置信息，这些信息通过支持html5地理定位的底层设备(如笔记本电脑或手机)提供给浏览器。位置信息由纬度、经度坐标和一些其他元数据组成。

　　位置信息从何而来

　　地理定位API没有指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是一个检索位置信息的API，通过这个API检索到的数据只是一定程度上的准确，并不能保证设备返回的位置的准确性。设备可以使用以下数据源：

　　ip地址

　　三维坐标

　　全球（卫星）定位系统

　　从RFID，WiFi和蓝牙到WiFi的MAC地址，GSM或CDMA手机的ID自定义数据使用方法

　　//更新navigator . geolocation . getcurrentposition(update location，handlelocationeror)一次；函数update location(position){ var latitude=position . coords . latitude；//latitude var longitude=position . coords . longitude；//经度var accuracy=position . coords . accuracy；//accuracy var timestamp=position . coords . timestamp；//timestamp }//错误处理函数function handlelocationer(error){.}//重复更新navigator . geolocation . watch position(update location，handlelocationer)；//不再接受位置更新navigator . geolocation . clear watch(watch id)；Communication API

　　跨文档消息传递

　　出于安全原因，在同一浏览器中运行的框架、选项卡和窗口之间的通信受到严格限制。然而，在现实中，不同站点的内容在浏览器中进行交互有一些合理的要求。在这种情况下，如果浏览器能够提供直接的通信机制，这些应用程序可以更好地组织起来。

　　Html5引入了一个新的功能，跨文档消息通信，可以保证iframe、tab和窗口之间的安全跨源通信。PostMessage API是发送消息的标准方式。发送消息非常简单：

　　window.postMessage(Hello，world ， http://www . example . com/)；当您收到消息时，您只需要向页面添加一个事件处理程序。当消息到达时，检查消息的来源以决定是否处理该消息。

　　window . addevent listener( message ，messageHandler，true)；消息处理器(e){ switch(e . origin){ case friend . example . com ://process message(e . data)；打破；默认：//消息源不可识别//消息被忽略}}消息事件是具有data(数据)和origin(源)属性的DOM事件。数据属性是发送方传递的实际消息，而源属性是发送源。

　　XMLHttpRequest Level2

　　XMLHttpRequest API使Ajax技术成为可能。作为XMLHttpRequest的改进版本，XMLHttpRequest Level2在功能上有了很大的提升。两个主要方面：

　　跨源XMLHttpRequest进度事件跨源XMLHttpRequest

　　以前XMLHttpRequest仅限于同源通信，XMLHttpRequest Level2通过CORS实现跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头，它为服务器提供HTTP请求的源信息。

　　WebSockets API

　　WebSockets是html5中最强大的通信功能。它定义了一个全双工通信通道，Web上只有一个套接字可以通信。

　　WebSockets握手

　　为了建立WebSockets通信，客户端和服务器在初始握手期间将HTTP协议升级为WebSockets协议。一旦成功建立连接，就可以在客户端和服务器之间以全双工模式来回发送WebSocket消息。

　　WebSockets接口

　　除了WebSockets协议的定义之外，该规范还为JavaScript应用程序定义了一个WebSocket接口。WebSockets接口使用起来非常简单。要连接到远程主机，您只需要创建一个新的WebSocket实例，并提供您想要连接到的相反的URL。

　　Forms API

　　新表单元素

　　表示电话号码的Tel元素。Email元素，它表示电子邮件地址文本框。元素，它表示网页的Url。搜索元素，用于搜索引擎，如显示在网站顶部的搜索框。Range元素是特定值范围内的数字选择器，通常显示在滑动条中。数字元素，仅包含数值的字段。未来的表单元素

　　颜色元素，颜色选择器，基于调色板或调色板。Datetime元素，它显示完整的日期和时间，包括时区。Datetime-local，显示日期和时间。时间元素，一个没有时区的时间选择器和指示器。日期元素，日期选择器。Week元素，某一年的周选择器。月元素，某一年的月份选择器。新的表单特性和函数

　　placeholder

　　当用户没有输入值时，输入控件可以通过占位符功能向用户显示描述性说明或提示信息。

　　输入name= name placeholder= First and last name autocomplete

　　浏览器可以通过自动完成功能知道是否应该保存输入值以备将来使用。

　　autofocus

　　您可以指定一个表单元素来通过自动聚焦特性获得输入焦点。每页只允许一个自动对焦功能。如果设置了多个功能，则等同于不指定此行为。

　　spellcheck

　　您可以使用文本内容和文本区域空间控制输入控件的拼写检查属性。设置完成后，浏览器会被询问是否应该给出拼写检查结果的反馈。需要分配拼写检查属性。

　　list特性和datalist元素

　　通过将列表功能与datalist元素相结合，开发人员可以为输入控件构造一个值列表。

　　datalist id=contactList 选项值=a@qq.com/option选项值= b @ QQ . com /option/datalist input type= email id= contat cs list= contact list min和max

　　通过设置最小和最大特性，可以将范围输入框的数值输入范围限制在最小值和最大值之间。您可以只设置一个、两个或都不设置。

　　step

　　对于输入控件，设置其step属性可以指定增加或减少输入值的粒度。

　　required

　　一旦为输入控件设置了required属性，该项就是必需的，否则表单无法提交。

　　拖放API

　　draggable属性

　　如果网页元素的draggable元素为true，则可以拖动该元素。

　　div draggable=true 可拖动Div/div拖放事件

　　拖动过程会触发许多事件，主要有以下几种：

　　Dragstart:当网页元素开始拖动时触发。拖动：被拖动的元素在拖动过程中不断被触发。Dragenter:当被拖动的元素进入目标元素时触发，目标元素应该监听该事件。Dragleave:当被拖动的元素离开目标元素时触发。目标元素应该侦听此事件。Dragover:被拖动的元素停留在目标元素中时被连续触发，目标元素应该监听这个事件。Drap:被拖动的元素或从文件系统中选择的文件在被放下时被触发。Dragend:网页元素拖动结束时触发。dragle lement . addevent listener( dragstart ，function(e){ console . log( drag start！);});dataTransfer对象

　　在拖动过程中，回调函数接受的事件参数有一个dataTransfer属性，它指向一个对象，包含与拖动相关的各种信息。

　　draggableelement . addevent listener( dragstart ，function(event){ event . data transfer . setdata( text ， Hello World！);});dataTransfer对象的属性有：

　　DropEffect:拖放操作的类型决定了浏览器如何显示鼠标形状。可能的值有复制、移动、链接和无。有效允许：指定允许的操作。可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和initialized(默认值等于all，即允许所有操作)。Files:包含一个FileList对象，该对象代表拖放操作中涉及的文件。主要用于处理从文件系统拖到浏览器中的文件。类型：存储在DataTransfer对象中的数据类型。dataTransfer对象的方法有：

　　SetData(format，Data):在dataTransfer对象上存储数据。第一个参数format用于指定存储的数据类型，如text、url、text/html等。GetData(format):从dataTransfer对象获取数据。ClearData(format):清除dataTransfer对象中存储的数据。如果指定了format参数，则只清除该格式的数据，否则将清除所有数据。SetDragImage(imgElement，x，y):指定拖动过程中显示的图像。默认情况下，许多浏览器显示拖动元素的半透明版本。参数imgElement必须是图像元素，而不是图像的路径。参数x和y表示图像相对于鼠标的位置。Web Workers API

　　Javascript是单线程的。所以持久的计算会阻塞UI线程，导致无法填写文本框、点击按钮等。并且在大多数浏览器中，除非返回控件，否则无法打开新选项卡。解决这个问题的方法是Web Workers，它可以让Web应用具有后台处理能力，并且很好的支持多线程。

　　但是在Web worker中执行的脚本不能访问页面的window对象，也就是Web worker不能直接访问网页和DOM API。Web Workers虽然不会导致浏览器UI停止响应，但还是会消耗CPU周期，导致系统响应速度慢。

　　Web Storage API

　　Web存储是html5引入的一个非常重要的功能。它可以在客户端本地存储数据，类似于html4 cookies，但其可实现的功能比cookie强大得多。

　　sessionStorage

　　SessionStorage将数据保存在会话中，当浏览器关闭时，数据会消失。

　　localStorage

　　除非手动删除，否则本地始终将数据保存在客户端本地。

　　无论是sessionStorage还是localStorage，可以使用的API都是一样的，常用的有以下几种(以localStorage为例):

　　保存数据：localStorage.setItem(key，value)；读取数据：local storage . getitem(key)；删除单个数据：local storage . remove item(key)；删除所有数据：local storage . clear()；获取一个索引的键：local storage . key(index)；总结

　　这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助。有问题可以留言交流。谢谢你的支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。