分类归档:HTML5

Css圆角边框

一、CSS3圆角的优点

传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:

* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。

* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。

* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

二、border-radius属性

read more

HTML5 地理位置定位(HTML5 Geolocation)原理及应用

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。

在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。

HTML5 Geolocation API 使用非常简单,基本调用方式如下:

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
		// 指示浏览器获取高精度的位置,默认为false
		enableHighAcuracy: true,
		// 指定获取地理位置的超时时间,默认不限时,单位为毫秒
		timeout: 5000,
		// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
		maximumAge: 3000
	});
} else {
	alert("Your browser does not support Geolocation!");
}

//locationError为获取位置信息失败的回调函数,可以根据错误类型提示信息:
locationError: function(error) {
	switch (error.code) {
	case error.TIMEOUT:
		showError("A timeout occured! Please try again!");
		break;
	case error.POSITION_UNAVAILABLE:
		showError('We can\'t
read more

html5 颜色渐变

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

html5 画圆

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(80,28,25,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

HTML5 js api 教程

(一) 新的选择器

根据类名匹配元素(DOM API),返回匹配到的元素数组,无匹配则返回空的数组。javascriptvar els = document.getElementsByClassName(‘section’);

支持浏览器:IE9, FireFox 3.0+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

  • 根据css选择器匹配元素(Selectors API):querySelector 和 querySelectorAll。 querySelector返回匹配到的第一个元素,如果没有匹配则返回null
    javascript 

    var els = document.querySelector(“ul li:nth-child(odd)”);var els =document.querySelector(“table.test > tr > td”);

    querySelectorAll返回所有匹配到的元素数组,如果没有匹配则返回空的数组
    javascript

    var els = document.querySelectorAll(“ul li:nth-child(odd)”);var els =document.querySelectorAll(“table.test > tr > td”);

    支持浏览器:IE 8+, FireFox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+ read more

    选择器效率测试见:http://jsperf.com/queryselectorall2
    Opera的Selectors read more

  • HTML5 特性的检测:离线Web应用

    查看一个离线的静态web页面是很容易的: 连到internet,载入这个web页面,随后断开网络,躲到一个角落里在你空的时候就可以看这个页面了(你甚至可以为了减少时间,省去”躲到一个角落”这一步).
    这对于一个静态的web页面是比较容易实现,可是对于像Gmail 和 Google Docs这样的web应用又是如何做到的呢? 这里就要感谢HTML5了,因为有了它任何人(不仅仅是Google)都可以构建一个离线的web应用了.

    read more

    HTML 5缓存机制:Cache Manifest配置实例

    作为一个Web开发相关的人员,都不会少听到、看到Cache这个词,Cache Manifest是HTML 5的一种缓存机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。

    Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍。

    一、Cache Manifest基础知识

    read more

    HTML 5 File API应用实例

    在HTML 5里,从Web网页上访问本地文件系统变的十分的简单,那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象,你可以通过编程来选择它们,访问它们的信息。

    关于HTML 5,51CTO已陆续报道了几篇关于HTML 5应用技巧方面的文章,比如《探秘HTML 5链接预取功能》、《HTML 5 Web Sockets应用初探》等等,下面我们将介绍一个简单的应用,该应用主要使用了HTML 5中的FileReader方法,FileReader就是HTML 5所提供的File API。

    51CTO推荐专题: HTML 5 下一代Web开发标准详解

    在HTML 5里,从Web网页上访问本地文件系统变的十分的简单,那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象,你可以通过编程来选择它们,访问它们的信息。这个File read more

    使用HTML5构建下一代的Web Form

    HTML语言作为如今编程最为广泛的语言,具有易用、快捷、多浏览平台兼容等特点,但是随着时代的进步,HTML的标准却停滞不前,这一次还在不断开发中的HTML5标准的更新可以说给这门标记语言带来了新的生命力。本文将着重讨论HTML5中的Web Forms 2.0, 即表单的部分。

    表单是网页中常见的控件(集)。小到网站注册登录,大到一个企业的数据管理系统,都基本上有表单的身影。表单之所以如此重要,主要是因为它担负大量的用户和网页后台数据更新交互的任务。Web开发人员,对于网页表单可以说又爱又恨,爱的是它方便的收集、组织数据的功能,恨的是它的功能很大程度上也就仅此而已。一些在最终网站用户看起来稀松平常的功能,比如说输入类型检查、表单校验、错误提示等等,开发人员无不需要花费大量精力利用 read more

    HTML5中对script标签的规定与解释

    script 标签用于定义客户端脚本,比如 JavaScript。

    除全局属性之外有如下属性

    src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中)
    async 定义脚本是否异步执行。
    defer 指示脚本不会生成任何文档内容。浏览器可继续解析并绘制页面。
    type 指定MIME类型 默认text/javascript
    charset 定义脚本中使用的字符编码。
    如果 async 属性为 true,则脚本会相对于文档的其余部分异步执行,这样脚本会在页面继续解析的过程中执行。
    如果 async 属性为 false,而 defer 属性为 true,则脚本会在页面完成解析后执行。
    如果 read more