HTML5实战

以下是为您整理出来关于【HTML5实战】合集内容,如果觉得还不错,请帮忙转发推荐。

【HTML5实战】技术教程文章

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

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

HTML5实战与剖析之自定义数据属性(dataset)【图】

说道HTML5实战与剖析之自定义数据属性,我就想起以前在外面学习JavaScript的时候了,那时候真可谓是跟打了鸡血似的,永远那么兴奋。早在那个时候,我就听说过自定义属性这回事儿了。下面就为大家介绍一下有关自定义属性的事儿吧。  HTML5实战与剖析之如何自定义数据属性  自定义属性,可以在标签部分添加一些自定义属性,不用刻意有一些前缀的。但是HTML5新添加的自定义数据属性和以往的自定义属性不一样。HTML5中可以为元素添...

HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)【图】

HTML5在表单中新添加了很多功能,梦龙小站将慢慢为大家介绍,今天为大家介绍HTML5表单中新添加的有关焦点的属性。  HTML5添加了autofocus属性,这个属性在支持它的浏览器中,只要设置了这个属性,不用JavaScript动态获取焦点,就能自动把焦点移动到相应字段。小例子如下:  HTML代码<input type="text" value="梦龙小站" autofocus />  预览效果  为了保证上面的代码在设置autofocus的浏览器中正常运行,咱们必须在JavaScr...

HTML5实战与剖析之表单——文本框脚本【图】

文本框类型  在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签。这两种标签比较相似,但是他们也有区别。  如果一定要用input标签标示文本框,那么就必须在type属性中设置”text”。通过设置size属性可以指定文本框中显示字数的字符数。通过value属性,可以设置文本框的默认文字。通过maxlength属性可以指定文本框的最大字符数。小例子如下  HTML代码<!--...

HTML5实战与剖析之剪贴板事件

很多网站当复制粘贴的时候,都会出现有关剪贴板的相关提示,在刚刚入行前端工程师的时候,我还在一直纳闷,这是怎么实现的呢。如今,咱们再也不用纳闷了,因为已经有浏览器把剪贴板相关事件纳入标准了。  IE是最早支持与剪贴板相关的事件,以及通过JavaScript访问剪贴板数据的浏览器。IE的实现成为了事实上的标准,随后Firefox 3+ 、 Chrome和Safari 2+都支持类似的事件和剪贴板的访问,但是Opera不支持通过JavaScript访问剪贴板...

HTML5实战与剖析之表单那些事儿【图】

HTML5针对表单方面也做了一些完善,新添加了一些验证数据的功能,新添加了一些标签属性。有了这些验证功能,就可以不用JavaScript进行验证,哪怕是JavaScript被禁用了也可以毫无压力的验证表单了。开发人员不用JavaScript,浏览器会根据标记中的规则执行验证,然后显示适当的错误信息。这些人性化的功能在支持HTML5的浏览器中才能有效,支持的浏览器有Opera 10+、Safari 5+、Chrome和Firefox 4+。  HTML5新添加的表单功能有:其他...

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

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

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

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

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

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

HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)

拖拽事件  通过拖拽事件,咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发,有些事件是在放置目标上触发的。拖动某元素时候,触发的事件有:dragstart事件、drag事件和dragend事件。  按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线),表示不能把元素放在自己上门。拖拽开始时,可以...