走过HTML4，走向HTML5-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10371/article/details/82523915

走过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 οnclick="playPause()">播放/暂停</button> 
  	<button οnclick="makeBig()">大</button>
  	<button οnclick="makeNormal()">中</button>
  	<button οnclick="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" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
	<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
	<br />
	<!-- 为了使元素可拖动，把 draggable 属性设置为 true -->
	<!-- 拖动什么 - ondragstart -->
	<img id="drag1" src="img/z_xiaofei168.jpg" draggable="true" οndragstart="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;" οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut="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 οnclick="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>