HTML5实战１

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend.一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候…

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

可拖动dragable属性之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像是可以拖动的,不用再写代码即可拖动.如果想让其他元素标签也可以拖动,那么只有HTML5能实现了.HTML5为所有HTML元素规定了dragable属性,表示元素是否可以拖动.链接和图像的标签中自动将dragable属性自动被设置成true,其他元素的dragable属性的默认值是false. 支持d…

(转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时…

HTML5实战与剖析之原生拖拽(一拖拽历史概述)

提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页中只有两种对象是可以拖拽的,那就是:图形和某些文字.拖拽图像的时候,把鼠标放在图像上,按住鼠标不放就可以拖拽了.拖拽文字时,要先选中文字,然后可以像拖动图像那样拖拽选中的文字.在IE4中,唯一有效的放置拖拽文字的目标是文本框.到了IE5.5更进一步,让网页中的任何元素都可以拖拽(IE6以上也支持这些…

HTML5实战与剖析之跨文档消息传递(iframe传递信息)

在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum域名中的页面通信.在XDM机制出现之前,要毫无压力地实现这种通信需要用很长时间.XDM把这种机制规范化,让咱们能够既稳妥又简单地实现跨文档通信. XDM的核心是postMessage()方法.对于XDM而言,”另一个地方”指的是包含在当前页面中的iframe标签,或者有当前页面弹出的窗口. post…

HTML5实战与剖析之字符集属性(charset和defaultCharset)

HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5实战与剖析之字符集属性,下面就一起了解下吧. HTML5实战与剖析之字符集属性之charset属性 HTML5中的charset属性是表示文档中世纪使用的字符集,也可以用来指定新的字符集.默认情况下,charset属性的值为”UTF-16”,但是可以通过meta标签.响应头部或者直接设置charse…

HTML5实战与剖析之媒体元素(6、视频实例)

HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标签模拟视频播放器的小样例,让大家更好的理解HTML5和有效的应用在项目中. HTML代码  <video id="v1" src="Intermission-Walk-in.ogv"></vi…

HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. 以下就为大家開始介绍媒体元素的相关事件. abort:触发时机是下载中断. canplay:在能够播放的时候,readyState的值为2的时候触发. canplaythrough:readyState的值为3的时候,触发.播放能够继续,而应该不会中断的时候触发. canshowcurrentfr…

HTML5实战与剖析之媒体元素

随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML5中的媒体标签video标签和audio标签支持的非常好.这就使HTML5在移动端很流行. video标签和audio标签也提供了很实用的JavaScript API,允许创建自定义的控件.两个标签的用法如下. HTML代码 1. 2.<video src=&qu…

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时…

优秀的 HTML5 实战教程，提升你的综合开发能力

HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的漂亮网站.更进一步,你也可以使用 HTML5 创建原来只能用于桌面平台上的复杂应用程序. 这篇文章挑选了 Web 开发人员不能错过的10个 HTML5 开发教程,能够帮助你快速掌握 HTML5 高级开发技巧. 您可能感兴趣的相关文章 Web 前端开发人员必读精华文章推荐小伙伴们惊呆了!8个超炫的…

HTML5实战——svg学习

百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准.SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格…

HTML5实战教程———开发一个简单漂亮的登录页面

最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越流畅,HTML5技术的使用在移动端应用的会越来越普及,应用越来越广泛,因此作为移动开发者,掌握这门技术自然有着强烈的紧迫感.今天就写一个小小的登录页面的demo,巩固最近的学习,也给有兴趣的朋友学习HTML5技术做个参考. 在这里您可以下载到我最后实现的登录页面的demo源码,地址:http://p…

第十篇、HTML5实战篇——1

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />  <meta http-equiv="X-UA-Compatible" content="IE=Edge">  <meta name="viewport" content…

HTML5实战与剖析之classList属性

classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名li.meng和long,三个类名中的类名meng删除.代码如下 HTML代码 1.<div class="li meng long">梦龙小站</div> JavaScript代码 01.//获取要删除类名meng的div 02.var div = docume…

读书笔记---HTML5实战 MARCO CASARIO（后六章）

画布叠加:用CSS的z-index和position; 第八章 HTML5通信API ①XMLHTTPREQUEST是JS中用于服务器交互的API; ②用HTML5的POSTMESSAGE API实现跨源通信 P182; ③CORS跨源资源共享; 第九章 HTML5 WEBSOCKET ①WEBSOCKET可以为服务器端和客户端基于浏览器的双向永久,实时连接,相比基于XHP的AJAX请求,明显低延迟; var myWs = new Websocket("ws://....");方法se…

10个HTML5 实战教程提升你的综合开发能力

html5实战2

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>交互</title> <!-- <link rel="stylesheet" href=""…

第一章 1.搭建环境,wamp 2.检查浏览器是否支持html5 ,是否支持新标签<canvas></canvas> 3.简单高效,少用id,多用标签. 4.使用css3美化样式. 5.html5再ie8中找不到标签的时候,在<head>中自定义element <script type="text/javascript"> document.createElement('article'); document.createElement(…

HTML5实战之桌面通知

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户.这和WebIM是最为天然的结合.不过,目前支持Desktop Notification功能的浏览器只有Chrome5+. 关于通知的基础知识可以参考以下文档: W3C标准:http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html 使用教程:http://www.html5rocks.com/en/tutorials/notifications/q…

OC 调用JS 代码处理HTML5 实战

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #e82300 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #587ea8 } p.p4 { margin: 0.0px 0.0px 0.0px 0.…

读书笔记---HTML5实战 MARCO CASARIO（前六章）

1:行内元素转化为块级元素①display②position③float; 2:语义化; 3:微数据itemscope/itemprop/itemtype; 4:新表单元素,form外的表单元素可以用form属性关联; 碰到一个问题: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title>&…

HTML5分析实战Web存储机制(Web Storage)

Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据server. Web Storage有两个目的:提供一种存储会话数据的路径;提供存储大量能够跨会话存在的数据的机制. 最初的Web Storage规范包括了两个对象的定义:sessionStorage对象和globalStorage对象.这两个对象在支持的浏览器中都是以window对象属性的形式存在.支持s…

HTML5 Drop API

转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面目吧! 二.由于篇幅较长,特设目录一陀三.HTML4下实现简单拖拽四.HTML5下实现简单拖拽五.如何启用DnD效果六.draggable属性详解七.DnD的生命周期八.DnD中最重…

HTML5魔法堂：全面理解Drag & Drop API

一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面目吧! 二.由于篇幅较长,特设目录一陀三.HTML4下实现简单拖拽四.HTML5下实现简单拖拽五.如何启用DnD效果六.draggable属性详解七.DnD的生命周期八.DnD中最重要的数据传递对象──DataTransfer对象九.[object DataTransferItemLi…

HTML5中新添加事件

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时…

HTML5 Dashboard – 那些让你激动的 Web 技术

HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为未来一段时间 Web 开发的顶尖技术,如果不想落伍的话就赶紧来看看吧. 您可能感兴趣的相关文章 HTML5 实战教程,提升综合开发能力小伙伴们惊呆了!8个超炫的 Web 效果 35个让人惊讶的 CSS3 动画效果演示 8个惊艳的 HTML5 和 JavaScript 特效 60款很酷的 jQuer…

CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的数据模型来编写应用程序,并在内部管理渲染周期,绘制你的应用程序. 您可能感兴趣的相关文章 HTML5 实战教程,提升综合开发能力小伙伴们惊呆了!8个超炫的 Web 效果 35个让人惊讶的 CSS3 动画效果演示 8个惊艳的 HTML5 和 JavaScript 特效 60款很酷的 jQuery 幻…

ShareDrop – 苹果 AirDrop 服务的 HTML5 实现

ShareDrop 是苹果 AirDrop 服务的 HTML5 版本,你可以直接在设备之间传输文件,而无需先上传到任何服务器.它使用 WebRTC 来实现安全的点对点文件传输.目前 ShareDrop 只允许您发送文件到同一个本地网络的其他设备,即设备使用相同的公共IP地址. 它和 AirDrop 的一个主要区别是 ShareDrop 需要互联网连接找到设备,而 AirDrop 不需要——它们之间会创建专门的无线网络.另外,ShareDrop 允许在移动和桌面设备之间发送文件之间.目前,它支持的…

html5新增及废除属性

html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定autofocus属性.它以指定属性的方式让元素在页面加载后自动获得焦点.一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效. 这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即…

【HTML5实战１】的更多相关文章