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 属性设置为 trueondragstart="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 supportif (typeof(Storage) !== "undefined") {// StorelocalStorage.setItem("lastname", "Gates");// Retrievedocument.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技术要点
原文地址：http://www.cnblogs.com/cy666/p/7506632.html