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. Java数据结构和算法（五）二叉排序树(BST)

    Java数据结构和算法(五)二叉排序树(BST) 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 二叉排序树(Binary S ...

  2. 体育类App原型制作分享-Onefootball

    Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻.数据.比分和直播.原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的是滚动区来放置需要滚动的球队列表,然后将 ...

  3. webapp的优化总结

    1. 最先加载本地数据,下拉刷新再取最新数据. 2. 图片延后加载.一种方法先<div data-url="xx.png"></div>,先加载一个div, ...

  4. 复制文件描述符---dup

    函数功能:复制文件描述符 头文件:#include<unistd.h> 函数原型:int dup(int oldfd) 参数说明:oldfd:旧的文件描述符 返回值:成功返回-个新的文件描 ...

  5. 2018上IEC计算机高级语言(C)作业 第2次作业

    2018上IEC计算机高级语言(C)作业 第2次作业 一.例程调试(20分) 调试下面1个例程,各位同学调试用自己的学号模4加1序号的题,写清错误提示(截小图)及修改内容(10分); 说明:有可能没有 ...

  6. 关于多系统跨浏览器 BrowserStack 的使用

    偶然在Scott Hanselman Blogs看到一篇关于 BrowserStack 博文,对于前端多浏览器测试. 现在拥有各自内核的浏览器越来越多,各自的特性也千差万别.如果作为一个前端攻城师想要 ...

  7. 2018.07.08 NOIP模拟 ABCD（背包）

    ABCD 题目背景 SOURCE:NOIP2016-AHSDFZ T2 题目描述 有 4 个长度为 N 的数组 a,b,c,d .现在需要你选择 N 个数构成数组e ,数组e 满足 a[i]≤e[i] ...

  8. hdu-1128（数学问题，筛数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1128 思路:从0,开始,每次求一个数x的d(x),然后判断如果x没有标记,则说明x没有由任意一个d(i ...

  9. 43 We were Born to Nap 我们天生需要午睡

    We were Born to Nap 我们天生需要午睡 ①American society is not nap-friendly.In fact, says David Dinged, a sle ...

  10. 疯狂安装oracle 12c，此版本没有scott这个用户

    今天要学习oracle,然后寻思下个吧,结果出现了很多问题,在此分享一下,搞疯了,太痛苦了,学的教程是用的 Oracle 11g,我去官网下载的Oracle 12g,文件很大,好不容易装好了,寻思就这 ...