今天时每天坚持写博客的第四天，说实话有点累，才刚刚学了JS，现在是2：43
本来打算不写html5，直接穿插JS的基础的，直接代码轰炸的
但是想了想，做事要做绝，就是要继续写html5，写别的就少了一点意思了
现在也挺累的，但是...坚持就是胜利，加油，奥里给！
闲话少说，开始正文，这一次写的是和html5的图片嵌入、分区响应、视频嵌入
Part 1 图片嵌入与分区响应
先来一波代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 嵌入图片与分区响应 7 </title> 8 </head> 9 <body> 10 <h1>改变按键大小</h1> 11 <a href="https://fanyi.baidu.com/#zh/en/" target="_blank"> 12 <img src="./photo/up.jpg" width="128" alt="上传"> 13 </a> 14 15 <h2>分区响应矩形</h2> 16 <form> 17 <input type="image" width="128" src="./photo/1234.jpg"> 18 </form> 19 <img src="./photo/1234.jpg" width="128" usemap="1234"> 20 <map name="1234"> 21 <area shape="rect" coords="20,20,60,60" href="01_font.html" target="_blank"> 22 <area shape="rect" coords="70,20,110,60" href="02_excel.html" target="_blank"> 23 <area shape="rect" coords="20,70,60,110" href="03_excel2.html" target="_blank"> 24 <area shape="rect" coords="70,70,110,110" href="04_input.html" target="_blank"> 25 </map> 26 27 <h2>分区响应圆形</h2> 28 <form> 29 <input type="image" width="128" src="./photo/c1234.jpg"> 30 </form> 31 <img src="./photo/c1234.jpg" width="128" usemap="c1234"> 32 <map name="c1234"> 33 <area shape="circle" coords="58,22,10" href="01_font.html" target="_blank"> 34 <area shape="circle" coords="58,52,10" href="02_excel.html" target="_blank"> 35 <area shape="circle" coords="58,82,10" href="03_excel2.html" target="_blank"> 36 <area shape="circle" coords="58,112,10" href="04_input.html" target="_blank"> 37 </map> 38 </body> 39 </html>
差点忘记说了，上面代码中的链接打开网址和图片地址要你们自己去设定，
你们也可以去我博客园的相册里面找上面用到的图片，
但是如果你真正想动手实践的话那还是自己找图片，自己去了解原理后再去分区
打开网页时的效果如下
上面大概就5个logo图片
第一个图片是一个链接，同时也改变了原图的大小 <img src="./photo/up.jpg" width="128" alt="上传">
将宽设置为128，由于没有设置高，故高随宽等比例变换
alt="上传"表示如果图片加载失败的话，那么将用写有"上传"的按钮代替图片，类似于备用方案
第二个图片是分区图的原图，同样也改了尺寸但是我们要做的是让他分区
也就是说我们点击图片上面的1、2、3、4，是只会跳转到当前页面的
<form><input type="image" width="128" src="./photo/1234.jpg"></form>
作用是在不使用JS情况下通过点击图片确定“矩形边框”的左上右下对应的坐标
就比如点击第二张图的某一位置时，再链接搜索栏里会出现你鼠标点击时的坐标
然后上面代码的20到25行是将第二张图抠出4个小矩形（分区）
map里面的属性name与前面第19行代码中的usemap对应
shape="rect"是边框为矩形，coords="70,20,110,60"是矩形边框左上右下对应的坐标
而上面的四图和五图也是同理
但是有两点不同的是：shape="circle"为圆形边框和 coords="58,112,10"为圆形边框对应的圆心x和y坐标和圆的半径（32~37）
这里先有意说明一点，我之前写代码的话默认打开浏览器是360浏览器（内核：IE），效果正常
但是我在写博客的时候又去验证了一次，这是用的是chrome浏览器，他没有分区的效果，就很TM玄学
然后换回360浏览器又可以，所以如果你们遇到我上面说的问题的话，那请面向百度解决问题
解决不了的话就用360浏览器实验吧，起码懂最基本的操作
Part 2 视频嵌入
先上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 视频嵌入 7 </title> 8 </head> 9 <body> 10 <h1>video play</h1> 11 <video src="./video/cat.mp4" height="256" controls> <!-- 这里如果 controls 换成 autoplay ，那么视频将自动播放 --> 12 <source src="./video/cat.mp4" type="video/mp4"> 13 <source src="./video/cat.ogv" type="video/ogg"> 14 </video> 15 </body> 16 </html>
打开网页时的效果如下
视频链接可以自己录制，然后记得保存地址，然后更改上面代码的视频地址就行
<video>里面的其他元素
1、Preload 可为 None不会载入视频、Metadata载入视频第一帧、Auto请求下载真个视频
这里也是出现视频的第一帧（默认）（因为上面代码没有设置Preload，所以默认为Auto）
2、controls不设置的话不会出现视频进度条、是否静音、是否全屏的视频提示栏
3、Loop视频循环播放（上面没有设置所以就只播放一遍，因为不喜欢洗脑循环（→_→））
4、Poster 视频播放的封面，不设置的话默认为视频的第一帧（上面没有设置）
这个可以参照b站那些视频，在你点击前有一个视频的封面，就是这个道理
5、Muted 视频是否静音，默认不静音
6、由于不同浏览器支持的视频格式可能不同且不全所以要在<video></video>里面加入<sourse>，
备用方案，如果播放不了则会去选择sourse里面的视频
一般五大浏览器只要设置 type="video/ogg" 和 type="video/mp4" 就能在这5大浏览器上正常播放
7、<video>...</video>里面你输入文本是不会显示在视频上的，如<video...>今天天气真好</video>
总结
这次写了1h5min的博客，比预期时间多一点点，原因在于上面绿字花费了一点时间吧（。_。）
这里也是希望大家如果实际开发过程中遇到什么问题，要想办法自己解决
最后希望这篇简单的随笔能对你们有所帮助吧（=￣ω￣=）
没用就当看着玩啦[狗头]