h5学习2

1.video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

<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>

在这里插入图片描述
可以通过dom元素进行控制

if (myVideo.paused)
  myVideo.play();
else
  myVideo.pause();
}

myVideo.width=420;

2.音频和视频相似

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

3.拖动元素
使用draggable属性，然后可以触动ondragstart ondrop等方法
http://www.w3school.com.cn/html5/html_5_draganddrop.asp

4.HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储，没有时间限制。
使用：

if (localStorage.pagecount){
  localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
  localStorage.pagecount=1;
}

sessionStorage - 针对一个 session 的数据存储，当浏览器关闭后就消失了。

5.web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
也就是获取其他js的对象，然后运行进行更新当前的页面

6.input的type支持
email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color
等兼容性都不太好，因此不建议使用。

7.对于form中的属性
autocomplete属性能够在填写数据之后，重新刷新后再进行加载的时候点击后有提示

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br /> <--这个刷新后不会进行提示-->
<input type="submit" />
</form>

8. 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
area 元素始终嵌套在标签内部。
注释：标签中的 usemap 属性与 map 元素中的 name 相关联，以创建图像与映射之间的关系。
当点击coords区域的时候，就会跳转到href所指向的地方

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />
<map id="planetmap">
<area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>

9.base标签
放在head标签中当使用的时候就会自动的拼接地址

猜你喜欢