总结html5的新特性（面试必备）--百分百源码网

总结html5的新特性（面试必备）-

发布时间：08/01 来源：未知浏览：关键词：

HTML5想必大家都很熟知了,由于太多的媒体在计议这一技术。所以当我们在面试前端工作的时候，碰到html5相干的题目一点也不料外，想要顺利通过前端面试？下面这篇文章就来跟大家分享介绍了对于前端面试必备之html5新特性的相干材料，需要的伴侣可以参照下。 HTML5想必大家都很熟知了,由于太多的媒体在计议这一技术。所以当我们在面试前端工作的时候，碰到html5相干的题目一点也不料外，想要顺利通过前端面试？下面这篇文章就来跟大家分享介绍了对于前端面试必备之html5新特性的相干材料，需要的伴侣可以参照下。

前言

什么是HTML5:HTML5 是下一代的HTML,将成为 HTML、XHTML 以及 HTML DOM 的新规范。今天来谈谈前端面试中根本上每次一面的时候都会被问到的一个题目，那就是html5的新特性。这个是学习前端必需把握的根基见识。

新增的元素

html5新增了一些语义化更好的标签元素。

构造元素

article元素，表示页面中的一块与高低文不相干的独立内容，比方博客中的一篇文章。
aside元素，表示article内容以外的内容，辅助信息。
header元素，表示页面中一个内容区块或整个页面的页眉。
hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。
footer元素，表示页面中一个内容区块或整个页面的页足。
figure元素，表示媒介内容的分组，以及它们的标题。
section元素，表示页面中一个内容区块，比方章节。
nav元素，表示页面中的导航链接。

其他元素

video元素，用来定义视频。
audio元素，用来定义音频。
canvas元素，用来展现图形，该元素自身没有行为，仅供给一块画布。
embed元素，用来插入各种多媒体，格局可以是Midi、Wav、AIFF、AU、MP3等。
mark元素，用来展现高亮的文字。
progress元素，用来展现任何类型的任务的进度。
meter元素，表示度量衡，定义预定义范畴内的度量。
time元素，用来展现日期或者工夫。
command元素，表示下令按钮。
details元素，用来展现会员请求得到而且可以得到的细节信息。
summary元素，用来为details元素定义可见的标题。
datalist元素，用来展现可选的数据列表，与input元素配合运用，可以制作出输入值的下拉列表。
datagrid元素，也用来展现可选的数据列表，以树形列表的情势来显示。
keygen元素，表示生成密匙。
output元素，表示不一样类型的输出。
source元素，为媒介元素定义媒介资源。
menu元素，表示菜单列表。
ruby元素，表示ruby注释， rt元素表示字符的解释或发音。 rp元素在ruby注释中运用，以定义不支撑ruby元素的阅读器所显示的内容。
wbr元素，表示软换行。与br元素的区别是：br元素表示此处必需换行，而wbr元素的意思是阅读器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不足时，自动在此处进行换行。
bdi元素，定义文本的文本标的目的，使其离开其四周文本的标的目的设定。
dialog元素，表示对话框或窗口。

破除的元素

html5中破除了一些纯体现的元素，只要局部阅读器支撑的元素还有一些会对可用性发生负面影响的元素。

纯体现元素

纯体现的元素就是那些可以用css替换的元素。basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展现办事的，html5倡导把页面展现性功能放在css样式表中同一处置，所以将这些元素破除，用css样式进行替换。

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

关于frameset元素、frame元素与noframes元素，因为frame框架对网页可用性存在负面影响，在html5中已不支撑frame框架，只支撑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元素的高低文，然后用该高低文中封装的各种画图功能进行画图。


《script》
    var canvas = document.getElementById('canvas');
    var context =canvas.getContext("2d"); // 猎取高低文
    //设定纯色
    context.fillStyle = "red";
    context.strokeStyle = "blue";
    // 实践表白在不设定fillStyle下的默许fillStyle为black
    context.fillRect(0, 0, 100, 100);
    // 实践表白在不设定strokeStyle下的默许strokeStyle为black
    context.strokeRect(120, 0, 100, 100);
《script》

SVG

SVG是html5的另一项图形功能，它是一种规范的矢量图形，是一种文件格局，有本人的API。html5引入了内联SVG，使得SVG元素可以直接涌现在html标志中。

音频和视频

audio和video元素的涌现让html5的媒体利用多了新选中，开发人员无须运用插件就能播放音频和视频。关于这两个元素，html5标准供给了通用、完备、可足本化控制的API。
html5标准出来以前，在页面中播放视频的典型方式是运用Flash、QuickTime或者Windows Media插件往html中嵌入音频视频，相对这种方式，运用html5的媒体标签有两大益处。

作为阅读器原生支撑的功能，新的audio和video元素无需安装。
媒体元素想Web页面供给了通用、集成和可足本化控制的API。

阅读器支撑性检测

阅读器检测可否支撑audio元素或者video元素最简略的方式是用足本动态新建它，然后检测特定函数可否存在。

var hasVideo = !!(document.createElement('video').canPlayType);

Geolocation API

html5的Geolocation API（地理定位API），可以要求会员同享他们的位置。运用办法非常简略，要是会员赞成，阅读器就会返回位置信息，该位置信息是通过支撑html5地理定位功能的底层设施（如条记本电脑或手机）供给给阅读器的。位置信息由纬度、经度坐标和一些其他元数据组成。

位置信息从何而来

Geolocation API不指定设施运用哪种底层技术来定位利用程序的会员。相反，它只是用于检索位置信息的API，并且通过该API检索到的数据只拥有某种程度的正确性，并不克不及保障设施返回的位置是精准的。设施可以运用以下数据源：

IP地址
三维坐标
GPS
从RFID、WiFi和蓝牙到WiFi的MAC地址
GSM或CDMA手机的ID
会员自定义数据

运用办法

// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
    var latitude = position.coords.latitude;     // 纬度
    var longitude = position.coords.longitude;   // 经度
    var accuracy = position.coords.accuracy;     // 正确度
    var timestamp = position.coords.timestamp;   // 工夫戳
}
// 差错处置函数
function handleLocationEror(error) {
    ....
}
// 反复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再承受位置更新
navigator.geolocation.clearWatch(watchId);

Communication API

跨文档新闻通报

出于平安方面的考虑，运转在统一阅读器中的框架、标签页、窗口间的通讯不断都挨到了严厉的限定。然而，实际中存在一些合理的让不一样站点的内容能在阅读器内进行交互的需求。这种情景下，要是阅读器内部能供给直接的通讯机制，就能更好地组织这些利用。

html5中引入了一种新功能，跨文档新闻通讯，可以确保iframe、标签页、窗口间平安地进行跨源通讯。postMessage API为发送新闻的规范方式，发送新闻非常简略：

window.postMessage('Hello, world', 'http://www.example.com/');

接收新闻时，仅需在页面中添加一个事件处置函数。当某个新闻抵达时，通过检查新闻的来源来决议可否对这条新闻进行处置。

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
        // 处置新闻
        processMessage(e.data);
        break;
    default: 
        // 新闻来源没法辨认
        // 新闻被忽略
    }
}

新闻事件是一个具有data(数据)和origin(源)属性的DOM事件。data属性是发送方通报的现实新闻，而origin属性是发送来源。

XMLHttpRequest Level2

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

跨源XMLHttpRequest
进度事件

跨源XMLHttpRequest

已往，XMLHttpRequest仅限于同源通讯，XMLHttpRequest Level2通过CORS实现了跨源XMLHttpRequest。跨源HTTP要求包括一个Origin头部，它为办事器供给HTTP要求的源信息。

WebSockets API

WebSockets是html5中最强大的通讯功能，它定义了一个全双工通讯信道，仅通过Web上的一个Socket即可进行通讯。

WebSockets握手

为了创立WebSockets通讯，客户端和办事器在初始握手时，将HTTP协定升级到WebSocket协定。一旦连贯创立成功，就可以在全双工模式下在客户端和办事器之间来回通报WebSocket新闻。

WebSockets接口

除了对WebSockets协定定义外，该标准还同时定义了用于JavaScript利用程序的WebSocket接口。WebSockets接口的运用很简略。要连贯长途主机，只需要创建一个WebSocket实例，供给但愿连贯的对端URL。

Forms API

新表单元素

tel元素，表示电话号码。
email元素，表示电子邮件地址文本框。
url元素，表示网页的url。
search元素，用于搜寻引擎，比方在站点顶部显示的搜寻框。
range元素，特定值范畴内的数值选中器，典型的显示方式是滑动条。
number元素，只包括数值的字段。

将来的表单元素

color元素，色彩选中器，基于调色盘或者取色板进行选中。
datetime元素，显示完备的日期和工夫，包含时区。
datetime-local，显示日期和工夫。
time元素，不含时区的工夫选中器和指挥器。
date元素，日期选中器。
week元素，某年中的周选中器。
month元素，某年中的月选中器。

新的表单特性和函数

placeholder

当会员还没输入值的时候，输入型控件可以通过placeholder特性向会员显示描述性注明或者提醒信息。

autocomplete

阅读器通过autocomplete特机能够知晓可否应当保留输入值以备未来运用。

autofocus

通过autofocus特性可以指定某个表单元素获得输入焦点，每个页面上只允许涌现一个autofocus特性，要是设定了多个，则相当于未指定此行为。

spellcheck

可对带有文本内容的输入控件和textarea空间控制spellcheck属性。设定完后，会扣问阅读器可否应当给出拼写检查效果反应。spellcheck属性需要赋值。

list特性和datalist元素

通过组合运用list特性和datalist元素，开发人员能够为某个输入型控件结构一张选值列表。

min和max

通过设定min和max特性，可以将range输入框的数值输入范畴限制在最低值和最高值之间。可以只设定一个，也可以两个都设定，也可以都不设定。

step

关于输入型控件，设定其step特机能够指定输入值递增或者递减的粒度。

required

一旦为某输入型控件设定了required特性，那么此项必填，不然没法提交表单。

拖放API

draggable属性

要是网页元素的draggable元素为true，这个元素就是可以拖动的。

Draggable p

拖放事件

拖动历程会触发许多事件，主要有下面这些：

dragstart：网页元素开端拖动时触发。
drag：被拖动的元素在拖动历程中延续触发。
dragenter：被拖动的元素进入指标元素时触发，应在指标元素监听该事件。
dragleave：被拖动的元素脱离指标元素时触发，应在指标元素监听该事件。
dragover：被拖动元素停顿在指标元素之中时延续触发，应在指标元素监听该事件。
drap：被拖动元素或从文件系统选择的文件，拖放降下时触发。
dragend：网页元素拖动完毕时触发。

draggableElement.addEventListener('dragstart', function(e) {
    console.log('拖动开端！');
});

dataTransfer对象

拖动历程中，回调函数承受的事件参数，有一个dataTransfer属性，指向一个对象，包括与拖动相干的各种信息。

draggableElement.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text', 'Hello World!');
});

dataTransfer对象的属性有：

dropEffect：拖放的操纵类型，决议了阅读器怎样显示鼠标外形，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操纵，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默许值，等同于all，即允许一切操纵）。
files：包括一个FileList对象，表示拖放所波及的文件，主要用于处置从文件系统拖入阅读器的文件。
types：贮存在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 Workers中施行的足本不克不及拜访该页面的window对象，也就是Web Workers不克不及直接拜访Web页面和DOM API。虽然Web Workers不会致使阅读器UI休止相应，但是依然会耗损CPU周期，致使系统反馈速度变慢。

Web Storage API

Web Storage是html5引入的一个非常重要的功能，可以在客户端当地存储数据，相似html4的cookie，但可实现功能要比cookie强大的多。

sessionStorage

sessionStorage将数据保留在session中，阅读器关闭数据就消散。

localStorage

localStorage则不断将数据保留在客户端当地，除非手动删除，不然不断保留。

无论是sessionStorage，还是localStorage，可运用的API雷同，常用的有如下几个（以localStorage为例）：