分类归档：HTML5

Css圆角边框

Kao 发布于
没有评论

一、CSS3圆角的优点

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

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

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

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

二、border-radius属性

read more

分类：HTML, HTML5 | 标签：

HTML5 地理位置定位（HTML5 Geolocation）原理及应用

Kao 发布于
没有评论

地理位置（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

html5 颜色渐变

Kao 发布于
没有评论 
<!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

html5 画圆

Kao 发布于
没有评论 
<!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

HTML5 js api 教程

Kao 发布于
没有评论

（一） 新的选择器

根据类名匹配元素（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

    HTML5 特性的检测：离线Web应用

    Kao 发布于
    没有评论

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

    read more

    分类：HTML5

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

    Kao 发布于
    没有评论

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

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

    一、Cache Manifest基础知识

    read more

    分类：HTML5

    HTML 5 File API应用实例

    Kao 发布于
    没有评论

    在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 | 标签：,

    使用HTML5构建下一代的Web Form

    Kao 发布于
    没有评论

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

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

    分类：HTML5

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

    Kao 发布于
    没有评论

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

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

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

    分类：HTML5 | 标签：,