html5

今天随便看了看html5的一些标签，看的不全，理解也不是很深刻，记下自己感兴趣的内容，就当是笔记吧
1） map area标签 ：最近的一个项目中，发现首页有个轮播图，上边有下载的按钮，我点了点，但是很可惜，美工把整张图都贴在了首页上，按钮是假的，这种情况再添加按钮肯定是不行的，换样式很麻烦的，这时候可以用map area标签，地图热点来解决这个问题，给图片添加usemap属性，map area 位置配置到按钮的位置，再添加一个href就搞定了。

<img src="${basePath}skin_group_web/images/banner/banner3.jpg" usemap="#download" hidefocus="true" >
<map id="download" name="download">
<area alt="android下载" title="点击下载Android版"
    shape="rect" coords="650,354,785,405" href="${basePath}mapService/rest/download/downloadfile?type=android" target ="_parent" onfocus="blur(this)"/>
<area alt="iOS下载" title="点击下载iOS版"
    shape="rect" coords="825,354,960,405" href ="${basePath}mapService/rest/download/downloadfile?     type=ios" target ="_parent" onfocus="blur(this)" />
</map>

在做的过程中，最耗费时间的就是调位置了，调好了以后又发现chrome中位置刚刚好，到了360浏览器中就不是这么一回事了，还得考虑浏览器的兼容性，这似乎是web开发程序猿最悲催的事情了，永远开着好几个浏览器做测试。这个问题巧妙解决，把热点的宽度高度设置的比按钮小一些，但是太小了，也不好，最后把点击时显示的边框去掉就完美了，这里需要在img中和area中都要做处理，做个双保险。设置img 属性hidefocus=”true” ；设置area οnfοcus=”blur(this)”意思是当area获得焦点时立即失去焦点。

2 ）audio 标签 从来没感觉一个简单的标签会这么强大，以前都是Javascript几十行代码才能解决的问题，audio几个属性就ok了，这里介绍一下audio的用法吧

<audio src="1.mp3" controls="controls" loop="loop" id="audio" autoplay="autoplay">Your browser does not support the audio tag.</audio>

src是音频的路径，可以是相对路径也可以是绝对路径，最好是绝对路径；如果想显示控制器的话，不得设置controls属性，而且这个属性只有一个值，就是controls ；如果想循环播放的 话，就加上loop=”loop” 吧；autoplay=”autoplay”是自动播放；而audio标签对之间的文字是当浏览器对audio不支持时要显示的提示信息；
audio的很多属性都可以用JavaScript来操作，这样的话，我们局可以定做自己的音频播放器了。这里就不多介绍了。

3） button 按钮 ：button按钮和 input button差不多，但是button比input button 的功能更强大，更人性化了，比如说，在button标签对之间可以添加文字和图片，然后显示在button上，input button要费很大的劲才能走做到显示背景图片偶。再用button的时候需要注意 设置type=“button”属性，因为有的浏览器会把button当做submit使用；

4）video 标签 同样令人惊讶 html5可以把视频播放器做的这么好！

<video src="The Aurora (Northern Lights).mp4" width="600" height="400" autoplay="true" loop="loop"controls="controls">
您的浏览器不支持 video 标签。
</video>

src是视频的路径，可以是相对路径也可以是绝对路径，最好是绝对路径；如果想显示控制器的话，不得设置controls属性，而且这个属性只有一个值，就是controls ；如果想循环播放的 话，就加上loop=”loop” 吧；autoplay=”autoplay”是自动播放；而audio标签对之间的文字是当浏览器对audio不支持时要显示的提示信息；audio和video属性差不多，但是第一次运行一个视频的时候，你可能就想到了不一样的地方，视频应该可以控制窗口大小啊，不能视频多大播放器窗口就多大啊！对了，可以加上width和height属性，perfect！还有一个小细节，就是视频播放器可以全屏显示。