htm5的新特性（转）

转载自：http://hyuhan.com/2017/07/06/...今天来说说前端面试基本每次都会问的一个问题，那就是html5的新特性。这是学习前端必须掌握的基础知识。新添加的元素HTML5添加了一些语义更好的标签元素。结构元素article元素表示页面中与上下文无关的一段独立的内容，比如博客中的一篇文章。aside元素表示文章内容以外的内容，辅助信息。header元素表示页面中一个内容块或整个页面的标题。hgroup元素用于对页面中的块或整个页面的标题进行分组。footer元素表示页面中的一个内容块或整个页面的页脚。figure元素表示一组媒体内容及其标题。section元素表示页面中的一个内容块，例如章节。nav元素表示页面中的导航链接。其他元素video元素，用于定义视频。audio元素用于定义音频。canvas元素用于显示图形。元素本身没有行为，只提供画布。embed元素用于插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。mark元素用于显示高亮文本。progress元素用于显示任何类型任务的进度。meter元素表示一个度量，它定义了一个预定义范围内的度量。时间元素用于显示日期或时间。命令元素表示命令按钮。details元素用于显示用户请求并可以获得的详细信息。summary元素用于定义details元素的可见标题。datalist元素用于显示可选的数据列表。它可以与输入元素结合使用来创建输入值的下拉列表。datagrid元素还用于显示一个可选的数据列表，该列表以树列表的形式显示。keygen元素表示生成密钥。output元素表示不同类型的输出。源元素定义媒体元素的媒体资源。menu元素代表一个菜单列表。ruby元素代表ruby注释，rt元素代表字符的解释或发音。rp元素在ruby??注释中用于定义不支持ruby??元素的浏览器显示的内容。wbr元素表示软换行符。与br元素的区别在于：br元素是指这里必须换行，而wbr元素是指浏览器窗口或者父元素的宽度足够宽。不缠绕，宽度不够的时候，主动在这里缠绕。bdi元素定义文本的文本方向远离其周围文本的方向设置。dialog元素代表一个对话框或窗口。DeprecatedElements一些纯粹的表现元素在html5中被废除了，一些元素只被一些浏览器支持，还有一些会对可用性产生负面影响的元素。纯表示元素纯表示元素是那些可以用CSS替换的元素。basefont,big,center,font,s,strike,tt,u等元素纯粹是为了页面显示。HTML5提倡将页面显示功能编辑在CSS样式表中，因此这些元素被Deprecated并替换为CSS样式。对可用性有负面影响的元素对于frameset元素、frame元素和noframes元素，由于frame框架对网页可用性有负面影响，html5不再支持frame框架，只支持iframe框架，frameset、frame和noframes在html5中也支持了，这三个元素被废除了。只有部分浏览器支持的元素对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持，尤其是bgsound元素和marquee元素只有IE才支持，所以在html5中被废除了。applet元素可以用embed元素或object元素代替，bgsound元素可以用audio元素代替，marquee可以用javascript编程代替。新增的APICanvasAPI上面提到的canvas元素可以为页面提供一个画布来显示图形。结合canvasAPI，可以在这个canvas上动态生成和展示各种图形、图表、图像和动画。Canvas本质上是位图画布，不能缩放，绘制的对象不属于页面DOM结构，不属于任何命名空间。无需将每个图元存储为一个对象，执行性能非常好。通过CanvasAPI绘制图形就是更新画布像素。使用CanvasAPI进行绘图，首先要获取canvas元素的context，然后使用context中封装的各种绘图函数来禁止绘图。替代内容SVGSVG是html5的另一个图形功能，它是一种标准的矢量图，一种文件格式，有自己的API.HTML5引入了内联SVG，使SVG元素可以直接出现在HTML标记中。音视频音视频元素的出现让HTML5媒体应用有了更多选择，开发者无需再使用插件-ins播放音频和视频。对于这两个元素，heml5规范提供了一个通用的、完整的、可编写脚本的控制API。在html5规范出来之前，在页面播放视频的典型方式是使用Flash、QuickTime或WindowsMedia插件将音视频嵌入到html中。与这种方法相比，使用html5媒体标签有两个优点。作为本机浏览器支持，新的音频和视频元素无需安装。媒体元素为网页提供了一个通用的、集成的和可编写脚本的控制API。YourbrowserdoesnotsupportHTML5video.BrowserSupportDetection浏览器检测是否支持音频元素或视频元素的最简单方法是用脚本动态创建它，然后检测特定的时候功能存在。varhasVideo=!!(document.createElement('video').canPlayType);GeolocationAPIhtml5的GeolocationAPI（地理定位API），可以请求用户分享他们的位置。使用方法非常简单。如果用户同意，浏览器将返回位置信息，该信息通过支持html5地理定位的底层设备（如笔记本电脑或手机）提供给浏览器。位置信息由经纬度坐标和一些其他元数据组成。位置信息从何而来？GeolocationAPI不指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是一个用于检索位置信息的API，通过该API检索的数据仅具有一定的准确性，并且不能保证设备返回的位置是准确的。设备可以使用以下数据源：IP地址、三维坐标、GPS、MAC地址从RFID、WiFi和蓝牙到WiFi、GSM或CDMA手机ID、用户自定义数据使用方式//更新一次navigator.geolocation.getCurrentPosition(updateLocation,handleLocationEror);函数更新位置（位置）{varlatitude=position.coords.latitude;//纬度varlongitude=position.coords.longitude;//经度varaccuracy=position.coords.accuracy;//精度vartimestamp=position.coords.时间戳；//timestamp}//错误处理函数functionhandleLocationEror(error){....}//重复更新navigator.geolocation.watchPosition(updateLocation,handleLocationEror);//不再接受位置更新navigator.geolocation.clearWatch(watchId);通信API跨文档消息传递出于安全原因，在同一浏览器中运行的框架、选项卡和窗口之间的通信一直受到严格限制。然而，在现实中，来自不同站点的内容需要能够在浏览器中进行交互。在这种情况下，如果能够在浏览器内部提供直接通信机制，就可以更好地组织这些应用程序。html5引入了一个新的功能，跨文档消息通信，可以保证iframe、tab页、windows之间的安全跨域通信。postMessageAPI是发送消息的标准方式。发送消息非常简单：window.postMessage('Hello,world','http://www.example.com/');接收消息时，只需要在页面中添加一个事件处理器即可。当消息到达时，通过检查消息的来源来决定是否处理该消息。window.addEventListener("message",messageHandler,true);functionmessageHandler(e){switch(e.origin){case"friend.example.com"://处理消息processMessage(e.data);break;default://消息来源不被识别//消息被忽略}}message事件是一个DOM事件，具有data和origin属性。data属性是发送者传递的实际消息，origin属性是发送消息的来源。XMLHttpRequestLevel2XMLHttpRequestAPI使Ajax技术成为可能。XMLHttpRequestLevel2作为XMLHttpRequest的改进版，在功能上有了很大的提升。主要有两个方面：Cross-originXMLHttpRequestprogresseventsCross-originXMLHttpRequest过去，XMLHttpRequest仅限于同源通信，XMLHttpRequestLevel2通过CORS实现了跨域XMLHttpRequest。跨域HTTP请求包含Origin标头，它为服务器提供有关HTTP请求来源的信息。WebSocketsAPIWebSockets是html5中最强大的通信功能，它定义了一个全双工的通信通道，可以在Web上只通过一个Socket进行通信。WebSockets的解释WebSockets握手为了建立WebSockets通信，客户端和服务器在初始握手时将HTTP协议升级为WebSocket协议。一旦建立连接，WebSocket消息就可以在客户端和服务器之间以全双工模式来回传递。除了为WebSockets协议定义WebSockets接口外，本规范还为JavaScript应用程序定义了WebSockets接口。WebSockets接口的使用很简单。要连接到远程主机，您只需创建一个新的WebSocket实例并提供您要连接的对等URL。FormsAPI新增表单元素tel元素，代表电话号码email元素，代表邮箱地址文本框url元素，代表网页的urlsearch元素，用于搜索引擎，比如显示的搜索框的range元素在站点顶部，在特定值范围内的值选择器，典型的显示方式是滑块数字元素，它只包含值字段。futureform元素color元素，颜色选择器，根据palette或colorpalette选择datetime元素，显示完整的日期和时间。包括时区datetime-local、显示日期时间时间元素、不带时区的时间选择器和指示器日期元素、日期选择器周元素、周选择器年月元素、年月选择器new表单特征和函数占位符When用户没有输入值时，输入控件可以通过占位符特性向用户显示描述性说明或提示信息。autocomplete浏览器可以通过自动完成功能知道是否应该保存输入的值以备将来使用。autofocus可以通过autofocus属性指定一个表单元素来获取输入焦点。每个页面上只允许一个自动对焦属性。如果设置了多个，则相当于不指定此行为。拼写检查控制具有文本内容的输入控件和文本区域空间的拼写检查属性。设置后，浏览器会询问是否应该反馈拼写检查结果。需要分配拼写检查属性。list属性和datalist元素通过组合list属性和datalist元素，开发人员可以为输入控件构造一个选定值的列表。min和max通过设置min和max特征，可以将范围输入框的数值输入范围限制在最低值和最高值之间。可以只设置一个，也可以两个都设置，或者一个都不设置。step对于输入控件，设置其step属性可以指定增加或减少输入值的粒度。required一旦为输入控件设置了所需的功能，则必须填写此项，否则无法提交表单。拖拽APIdraggable属性如果web元素的draggable元素为true，则元素可以被拖动。DraggableDiv