HTML5笔记

标签

视频音频

<!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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值