`
z_xiaofei168
  • 浏览: 198000 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

走过HTML4，走向HTML5

 
阅读更多

走过HTML4，走向HTML5

作者:张小飞 iteye账号:z_xiaofei168

       HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。
        HTML5 建立的一些规则
  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求（比如 Flash）
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

        新特性

HTML5 中的一些有趣的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

      

       浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

       一、HTML 5 视频

       今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

      

       视频格式

       当前，video 元素支持三种视频格式：Ogg    MPEG 4     WebM

       Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

       MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

       WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

 

<!DOCTYPE html> 
<html>
<head>
	<title>tag_vidio视频案例测试</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body> 

<div style="text-align:center;">
  	<button onclick="playPause()">播放/暂停</button> 
  	<button onclick="makeBig()">大</button>
  	<button onclick="makeNormal()">中</button>
  	<button onclick="makeSmall()">小</button>
 	<br /> 
 	<!-- control 属性供添加播放、暂停和音量控件。 -->
 	<video id="video1" width="420" style="margin-top:15px;">
    	<source src="html5/mov_bbb.ogg" type="video/ogg" />
    	<!-- <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的 -->
    	Your browser does not support HTML5 video.
  	</video>
</div> 

<script type="text/javascript">
	var myVideo=document.getElementById("video1");
	
	function playPause()
	{ 
		if (myVideo.paused) 
		  myVideo.play(); 
		else 
		  myVideo.pause(); 
	} 
	
	function makeBig()
	{ 
		myVideo.width=560; 
	} 
	
	function makeSmall()
	{ 
		myVideo.width=320; 
	} 
	
	function makeNormal()
	{ 
		myVideo.width=420; 
	} 
</script> 

</body> 
</html>

 

      二、HTML 5 音频

 

      今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

 

<!DOCTYPE html> 
<html>
<head>
	<title>tag_audio音频案例测试</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body> 
	<audio controls="controls">
	  	<source src="html5/mov_bbb.ogg" type="audio/ogg">
	  	<source src="song.mp3" type="audio/mpeg">
		Your browser does not support the audio tag.
	</audio>
</body> 
</html>

 

      三、HTML 5 拖放

      拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

 

<!DOCTYPE html> 
<html>
<head>
	<title>tag_draganddrop拖放案例测试</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		#div1,#div2 {float:left;width:250px;height:300px;margin:10px;padding:10px;border:1px solid #aaaaaa;}
	</style>
	<script type="text/javascript">
		function allowDrop(ev)
		{
			ev.preventDefault();
		}

		// 规定了被拖动的数据
		function drag(ev)
		{
			// dataTransfer.setData() 方法设置被拖数据的数据[类型]和[值]
			// 被拖数据是被拖元素的 id ("drag1")
			ev.dataTransfer.setData("myIteyeImg",ev.target.id);
		}

		function drop(ev)
		{
			// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
			// 这要通过调用 ondragover 事件的 event.preventDefault() 方法
			ev.preventDefault();
			var data=ev.dataTransfer.getData("myIteyeImg");
			// 把被拖元素追加到放置元素（目标元素）中
			ev.target.appendChild(document.getElementById(data));
		}
	</script>
</head>
<body> 
	<p>请把我本人的iteye的图片拖放到矩形中：</p>
	
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	<br />
	<!-- 为了使元素可拖动，把 draggable 属性设置为 true -->
	<!-- 拖动什么 - ondragstart -->
	<img id="drag1" src="img/z_xiaofei168.jpg" draggable="true" ondragstart="drag(event)" />
</body> 
</html>

 

        四、HTML 5 画布

 

      HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

<!DOCTYPE html> 
<html>
<head>
	<title>tag_Canvas画布案例测试</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body> 
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
		Your browser does not support the canvas element.
	</canvas>
	<div id="xycoordinates"></div>
</body> 
<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	var img=new Image();
	img.src="img/flower.jpg"
	cxt.drawImage(img,0,0);
	
	function cnvs_getCoordinates(e)
	{
		x=e.clientX;
		y=e.clientY;
		document.getElementById("xycoordinates").innerHTML="鼠标箭头所处坐标: (" + x + "," + y + ")";
	}
	 
	function cnvs_clearCoordinates()
	{
		document.getElementById("xycoordinates").innerHTML="";
	}
</script>
</html>

 

     五、HTML 5 地理定位

    

       HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。请使用 getCurrentPosition() 方法来获得用户的位置。

 

<!DOCTYPE html> 
<html>
<head>
	<title>HTML5地理位置案例测试</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body> 
	<p id="demo">点击这个按钮，获得您的坐标：</p>
	<button onclick="getLocation()">试一下</button>
</body> 
<script type="text/javascript">
	var x = document.getElementById("demo");
	function getLocation(){
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(showPosition,showError);
		}
	}
	
	function showPosition(position){
		x.innerHTML = '纬度：' + position.coords.latitude + "<br />经度: " + position.coords.longitude;	
	}
	
	function showError(error){
		switch(error.code) 
	    {
			case error.PERMISSION_DENIED:
		      	x.innerHTML="用户拒绝请求地理定位."
		      	break;
		    case error.POSITION_UNAVAILABLE:
		      	x.innerHTML="位置信息是不可用."
		      	break;
		    case error.TIMEOUT:
		      	x.innerHTML="请求获取用户位置超时."
		      	break;
		    case error.UNKNOWN_ERROR:
		      	x.innerHTML="一个未知的错误发生."
		      	break;
	      }
	}
</script>
</html>
分享到：
| JavaScript对象之详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics