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>
<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>
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>
向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript"> var c=document.getElementById("myCanvas");//JavaScript 使用 id 来寻找 canvas 元素 var cxt=c.getContext("2d");//是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 ... </script>
<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>
主要代码如下:
<!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 的数据存储
<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>
<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>
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
实例 - 完整的 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
HTML5技术要点的更多相关文章
- 基于HTML5技术的电力3D监控应用(二)
上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...
- 基于HTML5技术的电力3D监控应用(一)
最近参与了国网计量中心的四线一库自动化检定系统的项目开发,团队封闭开发了大半年终于快到尾声了,整个项目过程实在非常累,我的mentor杨杨老师是这样描述的:累的不想说话了.我估计是我太渴望新知识,整天 ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- React.js 常用技术要点
最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...
- K2 Blackpearl开发技术要点(Part2)
转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685282.html K2 Blackpearl开发技术要点(Part2)
- K2 Blackpearl开发技术要点(Part1)
转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685260.html K2 Blackpearl开发技术要点(Part1) 预知后事如何,请 ...
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
[Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
随机推荐
- Socket-IO 系列(一)Linux 网络 IO 模型
Socket-IO 系列(一)Linux 网络 IO 模型 一.基本概念 在正式开始讲 Linux IO 模型前,先介绍 5 个基本概念. 1.1 用户空间与内核空间 现在操作系统都是采用虚拟存储器, ...
- struts2值栈ValueStack中都有哪些东西?
com.opensymphony.xwork2.dispatcher.HttpServletRequest application com.opensymphony.xwork2.dispatcher ...
- 什么是@guid
我将给大家讲解史上最通俗一同guid与ID的区别...
- 2018.08.30 花园(期望dp)
题目背景 SCOI2017 DAY2 T1 题目描述 小 A 的花园的长和宽分别是 L,H .小 A 喜欢在花园里做游戏.每次做游戏的时候,他都先把花园均匀分割成 L×H 个小方块,每个方块的长和宽都 ...
- JPA数据懒加载LAZY和实时加载EAGER(转)
原文:https://www.cnblogs.com/MrSi/p/8081811.html 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载, ...
- 如何开发一个产品级的Node.js 应用
介绍 Node.js是一个开源的javascript运行时环境.非常简单可以快速开发一个网络应用.这个平台运行在Linux.OSX和Windows,而且运行在这个平台上的应用都是用javascript ...
- QGIS Server Quickstart
http://live.osgeo.org/en/quickstart/qgis_mapserver_quickstart.html
- crosss compile VLC with OpenMAX on ARM board(RockChip RK3399),in order to use Hard Acceleration when decode video
reference:http://www.x90x90x90.com/en/raspberry-pi-3-howto-compile-vlc-with-hardware-acceleration/ 1 ...
- hdu 1799 循环多少次?
题目 题意:给出n,m,其中m表示有几层循环,求循环的次数 ①如果代码中出现 for(i=1;i<=n;i++) OP ; 那么做了n次OP运算: ②如果代码中出现 fori=1;i<=n ...
- hdu 1058
这道题有很多种做法,但是思路大都是一样的,代码有点类似于poj2591这道题. 题意:问因子只含有2,3,5,7的第k个数是什么? #include<stdio.h> int f[5843 ...