标签：his 回退 border 显示 navigator class 上进 port 访问
<!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 提供了两种在客户端存储数据的新方法：
<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>
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
标签：his 回退 border 显示 navigator class 上进 port 访问
原文地址：http://www.cnblogs.com/cy666/p/7506632.html
