而比较新的技术去做轮询的效果是Comet，使用了AJAX。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源。...面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。WebSocket 是HTML5一种新的协议。它是实现了浏览器与伺服器的双向通讯。...目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了（win8测试版中的IE10也是支持的）。...客户端 在支持WebSocket的浏览器中，可以直接在Javascript中通过WebSocket对象来实现通信。...onkey(event)" /> 68 Send 69 70 服务器端 在.Net 4.5中，
而HTML5的拖放API功能直接实现拖放操作，而且拖放的范围已经超出浏览器的边界，HTML5提供的文件api支持拖拽多个文件并上传。...要学会掌握html5中的拖放api和 文件api，光标拖放事件，从web网页上访问本地文件系统。...拖放api 在html5中的拖放api重点： 第一，为页面元素提供了拖放特性； 第二，为光标增加了拖放事件； 第三，提供了用于存储拖放数据的DataTransfer对象 draggable特性 draggable...光标拖放事件 在html5中提供了7个与拖放相关的光标事件： 按照时间的顺序： 第一，开始拖拽时触发的事件，事件的作用对象是被拖拽的元素-dragstart事件 第二，拖放过程中触发的事件，事件的作用对象是被拖拽的元素...-drop元素 第七，在拖放操作结束时触发，事件的作用对象是被拖拽的元素-dragend事件 DataTransfer对象 在html5中提供了DataTransfer对象，用来支持拖拽数据的存储。
H5中新增的一个属性： 让标签可以编辑的属性 contenteditable="true" 即使是一个div也可以编辑文字； <
---- theme: channing-cyan 这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战 往期回顾：HTML5中的DOM扩展（一） 今天我们说一下HTMLDocument扩展及自定义数据属性...HTMLDocument扩展 HTML5标准扩展了HTMLDocument类型，添加了一些功能，我们这里简单介绍一下三个常用的功能。...if(document.readyState == 'loading'){ console.log('hi Jackson') //hi jackson } 这个在实际开发中很有用...head属性 HTMl5增加了document.head属性，它指向了文档的head元素，可以直接取得head元素。...DOM规范之前没有涉及到的一个问题是如何滚动页面中的某一个区域，scrollIntoView就是干这个使的。
---- theme: channing-cyan 这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战 我们都知道HTML5与之前的html是截然不同的方向，html5规范新增了很多DOM节点操作...我们下面来展开说一下 css类扩展 伴随着HTML4的发展，class类的使用也逐渐变多，主要是我们用的css属性也变多了，其中有俩个DOM扩展的方法被广泛使用。...一个是获取css类的元素，还有一个是实现类名的增删改查。...IE9版本以上的浏览器都支持这个属性。 classList属性 classList更加方便了我们添加和删除class类，它也有length属性，还可以通过item()或者数组的中括号来获取其中的元素。...contains() 判断内容是否存在类中，返回的是布尔值 remove()顾名思义啦，删除 toggle() 如果存在指定内容的话就删除，如果不存在的话就添加。
不指定变化后的内容如何保存 contextmenu 定义menu元素的DOM id作为定义钙元素特性的上下文菜单 data-X 制定可以包含在标签中的用户定义的元数据，而不必担心这些元数据与当前的特性或者未来的特性冲突...使用这种类型的特性可以避免创建自定义特性或者过载class特性的常见方法 draggable 定义特性时，允许元素与其内容可以被拖放 hidden 在HTML5中，所有元素都可以有hidden特性，用于表示元素不相关...这是一个可选的特性，如果使用该特性，那么就必须将其放置在设置itemscope和itemtype两个特性的元素中。...在默认情况下，只在包含itemscope特性的子元素中寻找。然而，如果数据相互交叉，只有唯一一个父项时，这个特性就没有意义了。在这里，itemref特性可以设置为在一组由空格分割开的子元素中寻找。...该特性是可选的，但是如果使用它，就必须将其放置在设置了itemscope特性的元素中 itemtype 该特性要与itemscope特性结合使用，用于定义一个microdata项的全局类型。
2015-09-22 01:43:08 写这篇文章主要是来向大家介绍一下HTML5当中download属性的用法和之前下载的区别。需要的朋友可以看一下。...在以往传统的html下载文件样式是这样的 下载 而在HTML 5浏览器中，可以支持download属性了，如下： 下载 download属性的好处在于，在用户下载文件的时候，显示在用户浏览器 中的“另存”为的文件显示框中...，显示的是这个downloader属性中显示的 东西了，比较友好 HTML5里，download属性为下载的文件取一个合适的名字，而不是使用原生的服务器文件名。...在这个例子中，文件将被下载为test.txt。download属性同时开启了一个强制下载。 这个属性在存在文件交互的地方非常有用，在服务器端的文件名需要是及其独特的（上例中的文件名就很独特不是吗？）
传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，HTML5规范提出了网络存储的解决方案。...2.2 localStorage实现本地存储 localStorage作为HTML5 Web Storage的API之一，主要的作用是进行本地存储。...2.2.1 localStorage中的方法属性 方法属性 描述 setItem(key，value) 该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 getItem...的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除，需要注意的是，sessionStorage中存储的数据只在当前浏览器窗口有效。...中的两种存储方式都比较实用，我们在设计前端页面时，可以根据相应的用户访问情况预测来增添相应的js，既增加了用户浏览的体验，又能实现存储管理的高效性，合理的利用存储空间。
答案是，这是在Internet Explorer中触发标准模式的最少字符数目。我认为这也说明了HTML5规范的本质：它不追求理论上的完美。... 在HTML5中，我只要简单地把所有内容都包装在一个链接元素中就行了。...在HTML5中，这些元素都可以换掉。说起新增的语义元素，它们价值的一方面可以这样来体现：“嘿，看啊，这样多好，用HTML5新增的元素可以把这些div都替换掉。” ......在HTML5中，只要你建立一个新的内容块，不管用section、article、aside、nav，还是别的元素，都可以在其中使用H1，而不必担心这个块里的标题在整个页面中应该排在什么级别；H2、H3，...不要紧，但我可以告诉你，我认为这才是HTML5中这些新语义标记的真正价值所在。换句话说，我们现在有了独立的元素了，这些元素中的标题级别可以重新定义。
需求： 做项目的时大多数情况下我们需要对请求的数据进行多次复用，为了降低请求次数我们需要对请求的数据进行本地存储； 以前用的cooking来存储为本地数据，HTML5后提出sessioStorage...cooking Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。...SessionStorage： 将数据保存在session对象中，所谓session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间会话，也就是用户浏览这个网站所花费的时间就是session...Value：表示值，也就是你要存入Key中的值，可以按照变量赋值来理解。...可以很明显的看到输出的字符串，不是我们想要的object。 所以就查资料啊。 发现了JSON。
meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。...1、声明文档使用的字符编码 2、声明文档的兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge"...3、SEO 优化 页面描述 <meta name="keywords" content="<em>html5</em>, css3...，添加到主屏后<em>的</em>标题（iOS 6 新增） 7、iOS 启动画面 iPad <em>的</em>启动画面是不包括状态栏区域<em>的</em>。...viewport<em>的</em>浏览器，比如黑莓 微软<em>的</em>老式浏览器 <meta name="x5-orientation" content
大家在做一些浏览器端的聊天功能的时候，或者在一些网站跟在线客服咨询的时候，会看到一些消息通知的提示，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在这里简单的介绍一下如何实现这样的功能。...1、实现标签页闪烁效果 实现的效果： 当前窗体失焦的时候，标题开始闪动，当前窗体获取焦点的时候，则停止闪动。...注意：这里需要用到窗口的获取焦点和失去焦点的方法，由于IE和其他Chrome及FireFox的区别，这里需要用到的方法就不一样，具体是： Chrome和FireFox浏览器是window的onfocus...此时，localhost:63342站点就可以出现通知消息了（消息通知弹窗在Mac和windows两个系统下可能出现的位置有些不一样，自己设置的logo出现的位置也会有些不同），Mac的消息通知窗口是从屏幕右上角出来的...，就不清楚） 本篇博客也只是简单的记录一下如何实现这样的消息通知效果，想了解更详细的知识点，可以参考张鑫旭大神的博客： http://www.zhangxinxu.com/wordpress/2016/
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。 案例一： 开始的我，so easy！...// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX - disX let top = e.clientY...console.log(this.offsetX + '-' + this.offsetY) }, draging (e) { // console.log('拖动中'...此时的我，崩溃…… 终于，也不知道哪来的灵感，这个困扰我两秒的难题突然就被我成功攻克了。好了，我要开始吹牛了…… 案例三： 我的思路是这样的（不想看？...自然不是appendChild 之类的，利用Vue 双向绑定的特性， 页面上循环数组元素，生成元素即往数组中push 元素即可。
插入标记 我们之前用的api大多数都是获取元素内容，HTML5规范中定义了一个向标签元素内添加内容的方法。...insertAdjacentHTML()和inserAdjacentText() 这俩个方法都接受俩个参数，第一个参数是固定的，必须是以下4中类型 "beforebegin"，插入当前元素前面，作为前一个同胞节点...，作为下一个同胞节点 他们的第二个参数就和我们上面innerHTML和outerHTML中需要的属性一样了，我这里写一个方式吧。...性能问题 我们虽然这样操作的话会比我们修改HTML中的内容方便，但是我们修改的内容如果还有其他绑定js事件或者操作，就会导致内存占用比较大，我们在用的时候一定要注意被替换的元素上所关联的js事件。...,里面可能写一些烂七八糟的内容导致我们页面程序瘫痪。我们在用innerHTML的时候一定要进行转义或者隔离插入的数据。
HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口，我们可以公国getContext()函数来获取绘图上下文进行绘制操作，这个函数中可以传入两个参数，其中第1个参数设置绘图上下文的类型...context.moveTo(110,350); context.arc(60,350,50,0,2*Math.PI,false); context.stroke(); arc函数中，...其中sx，sy和sw，sh用来对原图像进行裁剪，只选择图像中的部分进行绘制，x，y，w，h设置绘制在画布上的坐标和尺寸。 ...3.绘制属性的设置 在绘制过程中，开发者可以对绘制的线条颜色，填充颜色，风格，阴影等进行设置。...createLinearGradient函数用来创建线性渐变层，其中4个参数设置起始点的x，y和结束点的x，y。调用addColorStop函数用来想渐变层中添加临界点和颜色值。
有的时候我们会在桌面右下角看到这样的提示： ? 这种桌面提示是HTML5新增的 Web Push Notifications 技术。...options（可选）对象包含应用于通知的任何自定义设置选项。 常用的选项有： body: 通知的正文，将显示在标题下方。 tag: 类似每个通知的ID，以便在必要的时候对通知进行刷新、替换或移除。...icon: 显示通知的图标 image: 在通知正文中显示的图像的URL。 data: 您想要与通知相关联的任意数据。这可以是任何数据类型。...通知事件 但是单纯的显示一个消息框是没有任何吸引力的，所以消息通知应该具有一定的交互性，在显示消息的前前后后都应该有事件的参与。...; } // 如果用户没有选择是否显示通知 // 注：因为在 Chrome 中我们无法确定 permission 属性是否有值，因此 /
这是html5的bug吗？ td中的图片下有5px空隙，文字没有。 <!
在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。...initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1)、content中的...width指的是虚拟窗口的宽度。...5)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。...一：CSS判断横屏竖屏 写在同一个CSS中 @media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： //首先选取页面中id为container...原因就在于反斜杠在字符串中本身就表示转义的意思，它于冒号结合转不出东西来，于是抛错。
Html5 Web的5中离线存储方式之localStorage 在HTML5越来越流行的今天，如果你还不知道离线存储，那就说明你落后了很多。...HTML5的离线存储方式有多种：Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。...Web SQL Database目前虽然还有浏览器支持，是唯一的关系数据库结构的存储，但W3C以及停止对其的维护和发展。我就不多说了。...charset="utf-8"> HTML5...中LocalStorage的使用 你浏览当前页面 N 次.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
