分类归档:HTML

超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。

HTML页面内容禁止选择、复制、右键

<body leftmargin=0 topmargin=0  oncontextmenu=’return false’ ondragstart=’return false’ onselectstart =’return false’ onselect=’document.selection.empty()’ oncopy=’document.selection.empty()’ onbeforecopy=’return false’ onmouseup=’document.selection.empty()’>  


oncontextmenu='return false'
ondragstart='return false'
onselectstart ='return false'
onselect='document.selection.empty()'
oncopy='document.selection.empty()'
onbeforecopy='return false'
onmouseup='document.selection.empty()'

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

Web 2.0元素字体、边框与背景配色(调色板)

.palette { clear:both;overflow:hidden; margin:0 auto; } .palette, .palette li { list-style: none; margin: 0; padding: 0; }.palette li { float:left; margin:2px; padding:2px; height: 40px; width: 120px; font-size: 12px; line-height: 20px; vertical-align: middle; overflow: hidden; word-wrap:break-word; padding-top: 5px; border:1px solid #666; color:#888; -moz-border-radius: 2px; /* Gecko browsers */ -webkit-border-radius: 2px; /* Webkit browsers */ border-radius:2px; /* W3C syntax */ }

  • background:#fffff7
    border:#ffcc00
  • background:#eff7ff
    border:#96c2f1
  • background:#f0fbeb
    border:#9bdf70
  • background:#f8ffe7
    border:#abdc8d
  • background:#f2fddb
    border:#adcd3c
  • background:#eefaff
    border:#bbe1f1
  • background:#fafcfd
    border:#d1f0f6
  • background:#e8f5fe
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