一、HTML5 Notification 简介HTML5 Notification ，即桌面通知。目前浏览器依然是一个严格的沙盒工作模式，这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。二、桌面提醒API复制代码代码如下:window.webkitNotifications该API有3个方法：复制代码代码如下:requestPermission 请求桌面通知checkPermission 检查桌面通知许可（PERMISSION_ALLOWED = 0, PERMISSI...
首先介绍一下HTML5拖拽过程中产生的事件：如果A被拖动到B内部，则1. A会触发ondragstart, ondrag, ondragend，分别代表拖拽开始，拖拽进行中和拖拽结束；2. B会触发ondragenter, ondragover, ondragleave, ondrop，分别代表A物体进入B，在B上面，从B上方离开，在B上方松手停止拖拽；3. 如果拖动本地文件，则不会触发ondragstart事件；4. 事件间的数据传递使用e.dataTransfer.setDate(k, v)和e.dataTransfer.getData(k)。需要注意的...
HTML5现在越来越火了，很多人都想学习HTML5，但是HTML5比旧版的多了些新的表单元素，现在就让我们来看看新增的都有哪些表单元素吧。HTML5新增常用的表单元素有哪些？分别怎么使用的？本章介绍以下新的表单元素：datalist；keygen；outputdatalist 元素：datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：Webpage: <inp...
html5 details标签的作用以及<details>标签的使用方法都有哪些？详细的内容就让我们看看本篇文章为大家介绍的关于html details标签的定义和使用说明，还有关于html5 details标签的具体使用方法html5 <details>标签的定义及使用说明：HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。<details> 标签用于描述文档或文档某个部分的细节。<details> 标签规定了用户可见的或者隐藏的...
HTML5 的 Download 属性用来强制浏览器下载对应文件，而不是打开。Chrome 和 Firefox 等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的时候（例如 pdf 会直接在浏览器打开，mp3、mp4 等媒体直接用浏览器内置播放器播放）。但有时候，用户其实是希望直接下载而不是在浏览器上看看，这时就可以加上这个属性，属性值会对下载的文件重命名：点击直接下载并保存成 download.pdf 文件如果你确定这个资...
drawImage()是一个很关键的方法，它可以引入图像、画布、视频，并对其进行缩放或裁剪。 一共有三种表现形式： 语法 1JavaScript Code复制内容到剪贴板context.drawImage(img,dx,dy); 语法 2JavaScript Code复制内容到剪贴板context.drawImage(img,dx,dy,dw,dw); 语法 3JavaScript Code复制内容到剪贴板context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh); 来看一下坐标草图： PS: 不要在样式中定义 的宽和高，否则，里面所画的...
一、HTML5 Notification 简介HTML5 Notification ，即桌面通知。目前浏览器依然是一个严格的沙盒工作模式，这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。二、桌面提醒API代码如下:window.webkitNotifications该API有3个方法：代码如下:requestPermission 请求桌面通知checkPermission 检查桌面通知许可（PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED =...
placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了原生支持，而且效果更好！ HTML代码代码如下:你也看见了，需要做的只是在文本框的声明标签上加入placeholder属性。完全不需要JavaScript来创造这种效果。 检查浏览器是否支持Placeholder属性 因为placeholder是一种新属性，很有必要检查...
这里必须解释一下，这个“激活”，指的是这个标签是否正被用户浏览，或者说是否为当前标签。 那么，这个 API 究竟有些什么用途呢？通常，很多传统的页面在用户没有激活它的时候，它还会继续工作，例如，当用户正在浏览新闻门户，而他之前打开的 NBA 球赛页面会继续刷新获取最新结果，视频网站会继续占用带宽加载资源，于是，如果这类不必要的工作太多了，就会造成很多的资源浪费。因此，这货相当有用： 1.Web 程序每隔一段时间会自...
然而，也有很多小的非常好的特征；其中一个就是新添加的download属性。download属性能让我们指定浏览器下载时采用新的文件名称，也就是在客户端重命名下载文件。而不是链接上原始的文件名称。实际上download属性更合适的名称是downloadName。 HTML代码 把download属性放到A链接上…. 代码如下:下载支出费用表 当用户点击这个链接，download属性值里的新名称就会显示到弹出的下载框里。这样你保存的文件名称是“预算表.pdf”。而且，...
特别的，有一个新的属性，它能让我们控制多个元素的属性，就是：scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效，具体说，就是存放这段style样式的元素的子元素生效，跟平常的样式不一样的唯一地方就是新加了一个scoped属性：代码如下: /* styles go here */ 具有scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高，所以，最好避免使用inline样式，下面是将几种样式...
一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。或许你已经...