html标签api,html5新增标签+API介绍

新增标签

1、embed

embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器)。

这篇文章介绍了embed的常用属性,基本都是定义播放器的一些设置的,自动播放loop、开始时间starttime等:

http://www.cnblogs.com/lgx5/p/5714494.html

注:一些视频文件swf的大小只有几KB,但是视频本身是比较大的,自己的理解是视频网站只是将视频的地址封装进了swf文件,然后链接到真正的视频地址进行播放。

2、artical section aside

都是block块级元素。

artical一般是指独立的一篇文章,一般不与页面上的其他内容有关联,一般用于新闻文章、论坛的帖子、用户评论等,可以独立被外部引用,里面包含自己的头、尾、内容。

section类似于div,但是更语义化,将内容分块,一般section都包含标题。

aside侧边栏,一般用于定义文章artical的引用、注解等部分。

3、progress

进度条

............................懒得写了,见jsfiddle实例....................................

其他新增内容

1、本地存储 localStorage sessionStorage

支持setItem getItem removeItem clear等方法,而且支持点操作符和[]访问某字段。clear清除所有的数据项。

与cookie的对比:

cookie是为http请求服务的,与服务器进行交互;

localStorage sessionStorage是为本地数据存储而服务的,localStorage是永久本地存储,sessionStorage是会话级别的,会话关闭即失效;

cookie有大小限制及跨域限制,且每次请求都会被携带;

2、web worker

通过创建子线程,解决js单线程会阻塞的问题。

我的理解就是把一些耗费性能的计算等操作,分离出来到一个单独的js中,通过创建new Worker()对象,创建当前线程的一个子线程,不影响主线程上的DOM操作等,等计算结束,子线程通知到主线程,进行内容更新及子线程销毁等操作。

子线程的执行上下文不是window,所以无法获取window等对象,无法操作DOM,但可以通过postMessage方法与主进程进行互相通信,通过监听worker.onmessage方法获取传递的数据,主进程可以通过worker.terminate() 关闭子进程。worker对象一经销毁,则无法重新启动,需要重新新建Worker对象来启动。

3、geolocation支持用户地理位置的获取

经用户同意才被允许获取。用于导航,可以监控用户地理位置的移动等。

navigator.geolocation.getCurrentPosition(success(position), error());

//第一个函数正确返回地理位置:经纬度、海拔等,position.coords.latitude position.coords.longitude

//错误处理函数

//监控用户位置的变化

navigator.geolocation.watchPosition clearWatch()

4、websocket

基于TCP协议,双向的全双工通信,服务端和客户端可以相互推送消息。除了IE外,其他浏览器基本支持了WebSocket()接口(不同于ajax,websocket允许跨域通信)。相关的API如下:

send + onopen + onmessage + onerror + onclose等。相关的库有socket.io,一般用于聊天应用等。

5、canvas

定义画布,一个矩形框,但是真正的图像绘制需要用js来完成。

相关的绘制方法有:fillRect() arc moveTo lineTo drawImage等。

6、postMessage

解决跨域、跨窗口消息传递问题。原理是:html5新增的API,不管同不同源,都可以向其他window对象发送消息。postMessage只管消息的发送,而不用等待消息处理完成,仅仅是将消息插入到对应窗口的消息队列中即可(不阻塞程序)。

// 调用postmessage的window对象为要接收消息的那个window对象

// origin指明要接收消息的window对象所在的域,不需指明时,可以设置 *

window.top.postMessage(data, origin);

//要接收消息的window对象注册message事件

window.addEventListener('message', function(e){

//e.data e.source e.origin

})

7、history API

实现无刷新跳转,减少网络请求、改进用户体验等。

history.pushState(data, title, url)

history.replaceState(data, title, url)

window.onPopState(event)

8、FileReader定义异步读取本地文件的API,详见:

9、Mutation observer 监控DOM元素的变化,防止xss攻击。

// Firefox和Chrome早期版本中带有前缀

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

// 选择目标节点

var target = document.querySelector('#some-id');

// 创建观察者对象

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

console.log(mutation.type);

});

});

// 配置观察选项:

var config = { attributes: true, childList: true, characterData: true }

// 传入目标节点和观察选项

observer.observe(target, config);

// 随后,你还可以停止观察

observer.disconnect();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/458791.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UVA10404

1 //题意&#xff1a;S 和 O 二人玩游戏 。N颗石头&#xff0c;M个数&#xff0c;每次拿 M[i]个石头&#xff08;i>0 && i<m) ,谁拿到最后一个谁赢。 2 3 // 定义f[i]为还剩i颗石头时的胜负情况 &#xff0c;若S胜利&#xff0c;则记 1 &#xff0c;4 #include&…

java中定义一个CloneUtil 工具类

其实所有的java对象都可以具备克隆能力&#xff0c;只是因为在基础类Object中被设定成了一个保留方法&#xff08;protected),要想真正拥有克隆的能力&#xff0c; 就需要实现Cloneable接口&#xff0c;重写clone方法。通过克隆方法得到的对象是一个本地的副本。 1、实现Clonea…

C++异常以及错误处理

计算机应用程序中离不开错误处理&#xff0c;尤其是生产型大型软件系统。应用软件系统运行属于循环处理事务&#xff0c;出错后需要保证不能让软件程序直接退出。这就需要使用一定的程序容错处理来应对。一般情况下&#xff0c;大型软件开发中的软件系统容错处理会结合异常处理…

家用台式计算机的额定功率,台式机的功率(台式电脑电源功率多大才合适?)...

台式机的功率(台式电脑电源功率多大才合适&#xff1f;)组装一台电脑&#xff0c;我们需要先挑选好硬件&#xff0c;搭配硬件最关键点就是CPU和主板兼容性&#xff0c;硬件之间的均衡性、电源功率等&#xff0c;均需要考虑周到。那么台式电脑电源功率多大才合适&#xff1f;下面…

关于angularjs input上传图片前获取图片的Size 浅析

首先我们需要一个指令来追踪input的change。ngChage不适用input[file]。 app.directive("fileread", [function () { return { scope: { selectedFile: "", changed: & }, link: function(scope, element, attributes) { element.bind("change&qu…

CountDownLacth详解

一个同步辅助类&#xff0c;在完成一组正在其他线程中执行的操作之前&#xff0c;它允许一个或多个线程一直等待。 用给定的计数 初始化 CounDownLatch。由于调用了countDown() 方法&#xff0c;所以在当前计数到达零之前,await()方法会一直受阻塞。之后&#xff0c;会释放所有…

怎么用计算机画正弦函数图像,几何画板如何绘制正弦函数图象

考虑到三角函数问题描点的实际困难&#xff0c;教材表述时借助正弦线利用几何法利用三角函数线作正弦函数图象&#xff0c;但由此带来的困难是如何实现这种效果。如果能让三角函数线动起来&#xff0c;那将会更加直观易懂。几何画板作为使用专业的几何绘图软件&#xff0c;自带…

C/C++常见指针错误 and 内存访问越界

1) 内存分配未成功&#xff0c;却使用了它。 编程新手常犯这种错误&#xff0c;因为他们没有意识到内存分配会不成功。常用解决办法是&#xff0c;在使用内存之前检查指针是否为NULL。如果指针p是函数的参数&#xff0c;那么在函数的入口处用assert(p!NULL)进行检查。如果是用m…

C#将dll打包到程序中

直接进入主题 先来看一个栗子,假设现在有一个第三方dll namespace TestLibrary1 {public class Test{public void Point(){Console.WriteLine("aaabbbccc");}} } TestLibrary1.dll在项目中引用,然后调用其中的方法Test,将输出aaabbbccc using System;namespace Conso…

Exchange 2016集成ADRMS系列-12:域内outlook 2010客户端测试

接下来&#xff0c;我们来到域内安装了office 2010的机器上进行测试。 首先我们在客户端上强制刷新组策略&#xff0c;把我们刚才设置的策略刷新下来。 然后我们可以运行gpresult /h result.html来看看策略是不是已经下来了。 策略下来之后&#xff0c;我们打开客户端上面的out…

如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制

自小编上次整理了一些基础图形的绘制方法之后&#xff0c;大家都纷纷表示对css3的绘图技巧学习很有帮助。虽说万变不离其宗&#xff0c;再复杂的图形也可以用最简单的三角形或者圆弧组合出来&#xff0c;但仍有不少朋友反映&#xff0c;学会基本图形也不懂得怎样组合&#xff0…

基于C++中常见内存错误的总结

在系统开发过程中出现的bug相对而言是比较好解决的&#xff0c;花费在这个上面的调试代价不是很大&#xff0c;但是在系统集成后的bug往往是难以定位的bug&#xff08;最好方式是打桩&#xff0c;通过打桩可以初步锁定出错的位置&#xff0c;如&#xff1a;进入函数前打印日志&…

UWP开发细节记录:判断文件类型

StorageFile.ContentType 属性&#xff0c;是 string 类型&#xff0c;用来表示文件内容的 MIME 类型。例如&#xff0c;音乐文件可能有 "audio/mpeg" MIME 类型。(MSDN) MIME 类型的定义可以下面的链接找到&#xff1a; MIME Types - http://blogs.msdn.com/b/jaime…

Creating Apps With Material Design —— Creating Lists and Cards

转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android。时间仓促&#xff0c;有翻译问题请留言指出&#xff0c;谢谢创建Lisst和Cards在你的应用程序创建复杂的清单&#xff0c;并与材料设计风格卡。您能够使用RecyclerView和CardView部件。 创建RecyclerView …

计算机考研自命题院校双非,计算机考研408——951211院校汇总

众所周知&#xff0c;计算机考研408计算机学科基础综合难度与一些顶尖985自命题相比也是不落下风的&#xff0c;号称最难工科专业课(请忽略912这种殿堂级别的)&#xff0c;难度大、知识点庞杂也是前些年众多高校纷纷脱离408统考的原因。19年的计算机类考研火到爆炸&#xff0c;…

Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)

第一次鼓捣Docker&#xff0c;- - ! 报错&#xff1a; serverubuntu1987:~$ sudo apt-get update E: Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable) E: Unable to lock directory /var/lib/apt/lists/ 转载于:https://www.cnblo…

新手学Struts(一)----JSP+Servlet讲解MVC实现原理

MVC基本原理一个简单的例子改良的例子Struts基本流程的实现最近在学SSH&#xff08;Struts HibernateSpring)&#xff0c;这也算是一个比较经典的框架了&#xff0c;之前都是看人家大牛说这个框架&#xff0c;那个框架&#xff0c;说的真溜&#xff0c;自己也是佩服的五体投地啊…

中国首台千万亿次超级计算机,中国首台千万亿次超级计算机首批设备开始试用...

新华社天津&#xff11;月&#xff11;&#xff13;日电(记者 周润健 罗捷)记者&#xff11;&#xff13;日从国家超级计算天津中心获悉&#xff0c;中国首台千万亿次超级计算机“天河一号”首批设备调试工作结束&#xff0c;具备向客户提供服务的条件&#xff0c;“天河一号”…

Outlook Express 错误代码表

错误码 意义 一般 0x800C01310x800C013E 可能是 Folders.dbx 档案属性错误或损坏. 0x800CCC00 身份验证&#xff08;Authentication&#xff09;未载入 0x800CCC01 认证&#xff08;Certificate&#xff09;内容错误 0x800CCC02 认证日期错误 0x800CCC03 使用者已联机 0x800CCC…

USB设备枚举过程

&#xff08;1&#xff09;集线器检测新设备 &#xff08;集线器的英文称为“Hub”&#xff09;主机集线器监视着每个端口的信号电压&#xff0c;当有新设备接入时便可觉察。&#xff08;集线器端口的两根信号线的每一根都有15kΩ的下拉电阻&#xff0c;而每一个设备在D都有一个…