HTML5技术要点
1.HTML5视频
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>
注:control 属性供添加播放、暂停和音量控件。<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
注:video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
2.音频和视频其他属性一样<audio>
3.HTML5拖放
浏览器支持:

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//设置被拖数据的数据类型和值
}

function drop(ev)
{
ev.preventDefault();//阻止对元素的默认处理方式(默认地，无法将数据/元素放置到其他元素中)
var data=ev.dataTransfer.getData("Text");//获得被拖的数据,该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素（目标元素）中
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>

<br />

<img id="drag1"
src="/i/eg_dragdrop_w3school.gif"
draggable="true" //为了使元素可拖动，把 draggable 属性设置为 true
ondragstart="drag(event)"//拖动时调函数,它规定了被拖动的数据
/>

</body>
</html>
4.HTML5画布
创建Canvas元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript 使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");//是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
...
</script>
5.HTML5 内联 SVG
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
6.HTML5地理定位

主要代码如下:

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
function showError(error)//显示错误信息
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

7.HTML5web存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储
localStorage :
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>
sessionStorage:
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
} else {
document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
}
</script>
8.HTML5应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
注:
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

实例 - 完整的 Manifest 文件

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
# 2012-02-21 v1.0.0
/theme.css //会自动缓存这三个
/logo.gif
/main.js

NETWORK: - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
login.asp
-----------
* //指示所有其他资源/文件都需要因特网连接

FALLBACK: - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。用404代替html5
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

HTML5技术要点的更多相关文章

  1. 基于HTML5技术的电力3D监控应用（二）

    上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...

  2. 基于HTML5技术的电力3D监控应用（一）

    最近参与了国网计量中心的四线一库自动化检定系统的项目开发,团队封闭开发了大半年终于快到尾声了,整个项目过程实在非常累,我的mentor杨杨老师是这样描述的:累的不想说话了.我估计是我太渴望新知识,整天 ...

  3. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  4. React.js 常用技术要点

    最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...

  5. K2 Blackpearl开发技术要点(Part2)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685282.html K2 Blackpearl开发技术要点(Part2)  

  6. K2 Blackpearl开发技术要点(Part1)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685260.html K2 Blackpearl开发技术要点(Part1) 预知后事如何,请 ...

  7. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  8. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  9. [Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

随机推荐

  1. asp.net状态保持

    1.首先如果不是asp.net webform而只是一个纯粹的html页面和ashx一般处理程序的话,因为http协议的无状态,每一次的页面请求都会重新实例化一个页面对象(注意实例化页面对象其实是通过 ...

  2. cordova 选择图片并上传到服务器

    js navigator.camera.getPicture(function(imageURI){ var url=apiUrl+"/upload.aspx"; //alert( ...

  3. 如何在Linux中统计一个进程的线程数（转）

    方法一: /proc proc 伪文件系统,它驻留在 /proc 目录,这是最简单的方法来查看任何活动进程的线程数. /proc 目录以可读文本文件形式输出,提供现有进程和系统硬件相关的信息如 CPU ...

  4. java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing，

    缺少一个java包,然后我在这个网址找到了http://central.maven.org/maven2/org/hamcrest/hamcrest-core/1.3/hamcrest-core-1. ...

  5. 根据数据库的表生成项目，项目变为hibernate项目（实际开发中常用）

    1.  选择模式为Myeclipse Database Explorer perpective 2. (1)右键建立mysql模板,选择默认的mysql模板 (2)drive name (任意这里取m ...

  6. FIR IP

    (1)多通道系数处理 系数的格式 (1)       每组系数的长度必须一样长: (2)多组系数依次连接即可; 添加多组系数后会,FIR IP核在生成时会多出以下几个信号 .s_axis_config ...

  7. linux的客户端安装步骤配置

    现有一个***.tar.gz的客户端软件,现在客户端安装步骤如下 说明:此软件是一个网络客户端认证软件,因为采用虚拟机中的linux主机,所以此主机的网路配置从只能使用Bridge模式,而不能使用NA ...

  8. node csv

    想实现下载csv文件的功能,内容放在mysql的blob中,在网上找的都是关于csv模块的. 由于csv的更新,网上的很多方法都用不了,比如csv(),现在已经变了:http://csv.adalta ...

  9. 讲解java异常

    J2EE项目异常处理                        为什么要在J2EE项目中谈异常处理呢?可能许多java初学者都想说:“异常处理不就是try….catch…finally吗?这谁都会 ...

  10. dubbo 源码编译记录

    DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,阿里内部采用sofa框架,同属于分布式RPC框架,dubbo开源,而sofa ...