»HTML5中的8种表单验证方法详解
前一篇，我们介绍了HTML5中新的表单特性和函数，今天就继续来谈谈HTML5的表单验证。在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。 但是真正的表单验证是什么？ 是一种优化。 之所以说表单验证是一种优化，是因为仅通过表单验证机...
»HTML5中新的表单特性和函数
我们先来讨论HTML5新增的表单特性、函数和元素。如同新增的输人型控件一样，不管目标浏览器是否支持新增表单特性，我们都可以放心使用这些表单元素。因为市面上的浏览器在不支持这些表单特性时，会直接忽路它们，而不是报错。 1、placeholder 当用户还没有输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。这在目前流行的用户界面框架中很常见，而主流Javas...
»HTML5中WebSockets API使用详解
一、检测浏览器是否支持HTML5WebSockets 在使用HTML5WebSocketsAPI之前，首先需要确认浏览器的支持情况。如果浏览器不支持，我们可以提供一些替代信息，提示用户升级浏览器。下面的代码是检测浏览器支持情况的一种方法： functionloadDemo(){ if(window.WebSocket){ document.getElementById("support").in...
»HTML5结合jQuery实现图像灰度渐变效果
本文用示例向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前，实现这个效果需要两幅图像，彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效，因为灰色图像将会直接从原始文件生成。 示例：HTML5灰度渐变(http://webdesignerwall.com/demo/html5-grayscale/) 目的 这个示例的目的是向你展示如何使用...
»用HTML5绘制人脸
先看我们要绘制的人脸效果图： 你可以在线查看效果：在线演示 这里主要使用了HTML5的Canvas进行绘制。 下面我们开始整个绘制过程： 1.HTML(index.html) <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"/> <title>HTML5FaceBui...
»HTML5中XMLHttpRequest使用介绍
作为XMLHttpRequest的改进版，XMLHttpRequestLevel2在功能上有了很大的改进。本文主要从跨源XMLHttpRequest和进度事件（Progressevents）这两个方面来说明HTML5XMLHttpRequest的使用。 1、跨源XMLHttpRequest 过去，XMLHttpRequest仅限于同源通信。XMLHttpRequestLevel2通过CrossOr...
»HTML5中postMessage API使用方法介绍
本文将详细地介绍HTML5postMessageAPI的使用方法，希望能给大家带来帮助。 1、浏览器支持惰况检测 在调用postMessage之前，应该首先检测浏览器是否支持它。下面就是一种检测是否支持postMessage的方法: if(typeofwindow.postMessage===“undefined”){ //postMessagenotsupportedinthisbrowser...
»HTML5中Geolocation位置请求详解
目前，有两种类型的位置要求: 单次定位请求， 重复性的位置更新请求。 1.单次定位请求 在许多应用中，只检索或请求一次用户位置即可。例如，如果要查询在接下来的一个小时内放映某大片的最近的电影院，就可以使用以下代码所示的简单的HTML5GeolocationAPI。 voidgetCurrentPosition(inPositionCallbacksuccessCallback, inoptio...
»如何检查浏览器是否支持HTML5 Geolocation API
开发人员在调用HTML5GeolocationAPI函数前，需要确保浏览器支持其所要完成的所有工作。这样，当浏览器不支持时，就可以提供一些替代文本，以提示用户升级浏览器或安装插件(如Gears)来增强现有浏览器功能。下面的代码是浏览器支持性检查的一种途径。 functionloadDemo(){ if(navigator.geolocation){ document.getElementById...
»HTML5中使用video元素播放视频
我们已经讨论了很多简单的应用。后面的示例中，我们将尝试提高一些复杂度。HTML5video元素同audio元素非常类似，只是比audio元素多了一些特性，关于audio元素的使用，可以参考上一篇文章。video元素的特性见下表： 特性 值 poster 在视频加载完成之前，代表视频内容的图片的URL地址，可以想象一下“电影海报”。该特性不仅可读，而...
»HTML5中使用audio元素播放音乐
如果你已经了解了HTML5中的audio元素和video元素的共享特性，那就基本认识了audio元索所能提供的功能。我们直接看一个简单的示例，它演示了如何通过脚本来控制audio元素。 激活audio元素 如果需要在用户交互界面上播放一段音乐，同时不想被时间轴和控制界面影响页面显示效果，则可创建一个隐藏的audio元素——不设置controls特性，或将其设置为false——然后用自行开发的控制界...
»HTML5如何判断浏览器是否支持audio和video元素
上一篇我们对HTML5中的audio元素和video元素做了一个概览，最后也留下了一个如何检测浏览器是否支持audio和video的问题，这篇文章我们就来解决这个问题。 在HTML5下检测浏览器是否支持audio元素或video元素最简单的方式是用脚本动态创建它，然后检测特定函数是否存在: varhasVideo=!!(document.createElement('video').canPla...
»HTML5中的Audio和Video概述（容器及编解码器）
这篇文章，我们要讨论与HTML5audio元素和HTML5video元素相关的两个关键概念：容器（container）和编解码器（codec）。 一、视频容器 不论是音频文件还是视频文件，实际上都只是一个容器文件，这点类似于压缩了一组文件的ZIP文件。从图3-1可以看出来，视频文件(视频容器)包含了音频轨道、视频轨道和其他一些元数据。视频播放的时候，音频轨道和视频轨道是绑定在一起的。元数据部分包含...
»针对webkit的HTML, CSS和Javascript
前面有一篇文章介绍了HTML5的一些新特性以及技巧,现再来总结一些更多的针对webkit的HTML,CSS和Javascript方面的特性. HTML,从HTML文档的开始到结束排列: <metaname=”viewport”content=”width=device-width,initial-scale=1.0″/> <!--让内容的宽度自适应为设备的宽度,在做Mobil...
»HTML5超级玛丽在线游戏以及源码下载
应该说，超级玛丽是90年代一款非常经典的休闲游戏，不少80后应该都曾经玩过，甚至是对它有着非常浓厚的感情。随着Web技术的发展，尤其是现在出现了HTML5，我们就可以非常方便地在网页上制作精美的游戏，并且用户可以非常方便的在网页上玩HTML5游戏。下面的这款超级玛丽游戏就是用HTML5重写的，希望你会喜欢。 请用以下支持HTML5的浏览器：Firefox、Chrome（效果最佳，最流畅，推荐）、I...