走过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>
相关推荐
【个人网页制作 我们一起走过的流金岁月】是一个以HTML为基础的个人主页项目，旨在记录和分享与朋友共度的美好时光。这个网页设计秉持简洁的风格，呈现出清新自然的视觉效果，使得用户在浏览时能感受到温馨的回忆...
HTML（HyperText Markup Language）是互联网上...总之，HTML初学者指南第二版将引导你走过HTML的基本概念和实践，使你具备创建简单网页的能力。随着对HTML的深入理解和实践，你将能够构建更复杂、更具交互性的网站。
HTML5是一种先进的网页开发技术，它是对HTML4的升级，主要特点是增强了网页的交互性和多媒体支持，使得开发者能够创建更具动态效果和用户参与性的应用程序。本压缩包包含的是一笔连成（通常称为"一笔画"）游戏的...
如果包含在名为“新建文件夹 (4)”的压缩包内，记得将所有相关资源（如图片文件）与HTML文件放在同一目录下，以确保页面能正常显示。 通过以上方法，你可以创建一个富有创意和个性的HTML表白页面，向心爱的人表达...
HTML5技术的发展和应用前景非常广阔，伴随互联网的发展，HTML标准也在不断改变，已经走过第四代。 Canvas元素概述： Canvas元素是HTML5中一个非常重要的标签元素，能够对2D或位图进行动态、脚本渲染。本文详细介绍...
HTML5是现代网页开发的重要标准，它为网页设计师和开发者带来了丰富的交互性和创新性。2016年的HTML5动画合集展示了这项技术在视觉效果和用户体验方面的巨大潜力。在这个压缩包中，我们可能找到了一系列精心设计的...
走向更好的安全治理是全球和平与可持续发展的重要基石，特别是在冲突预防、和平建设和维持和平方面。联合国安理会第2553(2020)号决议重申了代表性和响应性、效率、效能、专业性及问责制的安全部门是基石，并强调必须...
《每当我走过老师的窗前》是一首经典的歌曲，它以深情的歌词表达了对教师无尽的敬爱和感激之情。这首歌的课件可能是用于音乐课、主题班会或者教师节庆祝活动，旨在让学生们理解并体验到教师无私奉献的精神。 歌词中...
总的来说，“Html40从入门到精通”这个教程将引导你走过HTML的基础，深入理解其结构、元素、属性，以及如何与CSS和JavaScript结合，创建功能丰富的网页。通过不断练习和探索，你将能够熟练地进行网站开发，为未来的...
### 知识点一：HTML5七夕情人节表白网页制作 #### 1. 网页简介 本项目是一款基于HTML、CSS与JavaScript技术构建的情人节表白网页，旨在为用户提供一个个性化且充满创意的方式向心仪之人表达情感。网页不仅包含基本...
会创意小品剧本-一起走过的日子.doc
本项目名为"百度轨迹地图（HTML）"，它是一个静态生成的地图应用，主要用于实现"我的足迹"这样的功能，让用户能够查看自己在过去走过的位置轨迹。 首先，我们要理解“静态生成”的概念。静态生成是指预先计算并生成...
时间，这生命的载体，随着它静静流淌，我们每一个人都在其中经历着属于自己的成长故事。《走过今天》这篇中考满分作文，便是一曲关于...让我们带着对生活的热爱，对未来的憧憬，勇敢地走过今天，走向更加灿烂的明天。
4. "走过冬季情感论坛(WDB)"：这个名字可能是论坛数据库的备份文件，包含了论坛的所有帖子、用户信息等数据。恢复这个数据库将能够重建论坛的原有内容。 综合以上信息，我们可以推测这个压缩包是一个定制版的...
电子书中可能还会涉及HTML5，这是HTML的最新版本，增加了许多新特性，如语义化标签（如、和），离线存储（Application Cache），以及音频和视频处理API，如和标签。 此外，标签中提到了Java和.NET，它们是两种常见...
我们一起走过中考作文范例5篇.pdf
HTML的最新版本是HTML5，它引入了许多新的元素和API，例如用于视频和音频播放的和标签，以及用于图形和交云的和SVG等。 CSS（Cascading Style Sheets）是用于描述网页的布局、设计和风格的语言。它通过选择器定位...
小家电行业深度报告：走过成长的烦恼.pdf
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。...【项目质量】：所有源码都经过严格测试，可以直接...