标签
视频音频
<!DOCTYPE HTML>
<html>
<body>
<video width="400" height="300" controls="controls" preload="auto">
<source src="D:\vido\test1.mp4" type="video/mp4">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the video tag.
</video>
</body>
</html>
拖动
<img draggable="true" ondragstart="drag(event)" />
画布
<canvas id="myCanvas" width="400" height="400"style="border:1px solid #c3c3c3;"></canvas>
</div>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
获取坐标
试验谷歌浏览器无效,firefox可以
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
// 十进制的维度、经度
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
存储
localStorage.test="ydfind";
sessionStorage.test="ydfind";
document.write(localStorage.test);
表单
input
- 输入提示:
<input type="search" placeholder="请输入..." required="required" />
- required:不能为空
常用
<hr>:水平线
css
<head>
<style>
body
{
background-color:#d0e4fe;
background-image:url('paper.gif');
background-repeat:repeat-x;
}
</style>
</head>