学习HTML5+CSS3的第二天

浏览数：40 / 时间：2015年06月09日

今天第二天学习Html5+css3

今天根据书上一共写了两个小实例

第1个实例关于音频播放文件

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 <video tideh="320" height="240" contorls="controls">
 5 <source src="/i/movie.ogg" type="video/ogg">
 6 <source src="/i/movie.mp4" type="video/ogg">
 7  hellow word！
 8 </video>
 9 </body>
10 </html>

firefox预览

技术分享

IE预览

技术分享

没有加<meta charset="UTF-8">这句表名编码方式，然后出现乱码

第二个实例

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <style type="text/css">
 6 body
 7 {
 8 font-size:70%;
 9 font-family:verdana,helvetica,arial,sans-serif;
10 }
11 
12 </style>
13 <script type="text/javascript">
14 funcation cnvs_getCoordinates(e)
15 {
16 x=e.clientX;
17 y=e.clientY;
18 document.getElementBtId("xycoordinates").innerHTML="Coordinates:("+x+","+y+")";
19 }
20 funcation cnvs_clearCoordinates()
21 {
22 document.getElementById("xycoordinates").innerHTML="";
23 }
24 </script>
25 </head>
26 <body style="margin:0px;">
27 <p>
28 把鼠标悬停在下面的矩形可以看到坐标：
29 </p>
30 <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
31 onmousemove="cnvs_getCoordinates(event)"
32 onmouseout="cnvs_clearCoordinates()"></div>
33 <br/>
34 <br/>
35 <br/>
36 <div id="xycoordinates"></div>
37 </body>
38 </html>