前端：HTML5学习之路（三）

时间：2019-11-21 15:41:19 阅读：68 评论：0 收藏：0 [点我收藏+]

第3章 HTML5图像和多媒体

　　3.1 网页图像

　　1）定义图像

　　在HTML5中，使用<img>标签来把图像插入网页中。用法如下：

1 <!--img有两个必需的属性：src属性和alt属性-->
2 <img src="URL" alt="替代文本" />

View Code

　　其中，src：定义显示图像的URL，alt：设置图像的替代文本（图像无法显示时，显示该文本）。

　　使用代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 <img src="images/book1.jpg" width="400"  alt="书籍1图片"/>
10 </body>
11 </html>

View Code

　　2）定义流

　　流表示图表、照片、图形、插图、代码片段等独立的内容。HTML5使用figure和figcaption引入流，其中figcaption表示流的标题，流标题不是必需的，但有的话，它必须内嵌作为figure元素的第一个或最后一个元素。figure默认从新的一行开始显示流内容，可通过CSS改变该显示方式。使用代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 <body>
 8 <article>
 9     <h1>2017年12月，全球PC浏览器市场份额排行榜</h1>
10     <p>第1名：Google的Chrome浏览器，其全球市场份额为64.72%； </p>
11     <p>第2名：Mozilla Firefox，其市场份额为12.21%； </p>
12     <p>第3名：微软的IE浏览器，其市场份额为7.71%； </p>
13     <p>第4名：苹果的Safari浏览器，其市场份额为6.29%； </p>
14     <p>第5名：微软的Edge浏览器，其市场份额为4.18%； </p>
15     <p>第6名：Opera浏览器，其市场份额为2.31%； </p>
16     <p>其他浏览器的市场份额合计为2.58%。 </p>
17     <figure>
18         <figcaption><b>12月份</b>全球浏览器市场份额</figcaption>
19         <img src="C:\Users\32282\Pictures\images\111.png" width="300" /> 
20     </figure>
21     <p>数据来源：StatCounter-Desktop Browsers</p>
22 </article>
23 </body>
24 </html>

View Code

　　3）定义图标

　　网站图标一般显示在浏览器选项卡、历史记录、书签、收藏夹或地址栏中。图标大小一般为16x16px，透明背景。移动设备图标大小：iPhone图标大小为57x57px或114x114px（Retina屏），iPad图标大小为72x72px或144x144px（Retina屏）。Android支持该尺寸的图标。

　　使用代码示例步骤：

　　a.创建大小为16x16px的图像命名为xxx.ico，注意扩展名为.ico。同时为Retina屏创建一个32x32px的图像。

　　b.为触屏设备至少创建一个图像，并保存为png格式。

　　c.将图标放到网站根目录。

　　d.新建HTML5文档命名为test.html，输入代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>百度一下</title>
 6 <link rel="icon" sizes="any" mask href="file:///C:/Users/32282/Pictures/images/icons/baidu_icon.svg">
 7 <link rel="icon" href="file:///C:/Users/32282/Pictures/images/icons/favicon.ico" type="image/x-icon" />
 8 <link rel="shortcut icon" href="file:///C:/Users/32282/Pictures/images/icons/favicon.ico" type="image/x-icon" />
 9 </head>
10 
11 <body>
12 <h1>留意上方地址栏图标</h1>
13 <p></p>
14 </body>
15 </html>

View Code

　　效果示例：

技术分享图片

　　3.2 响应式图像

　　1)响应视图大小

　　HTML5.1新增了picture元素和img元素的srcset、sizes属性，使得响应式图片的实现更为简单便捷，很多主流浏览器的新版本对这些元素支持良好。

　　<picture>标签仅作为容器，可以包含一个或多个<source>子标签。<source>可以加载多媒体源，它包含srcset（必需）、media（设置媒体查询）、sizes（设置宽度）和type属性（设置MIME类型）。使用代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <script src="images/picturefill.js" type="text/javascript"></script>
 7 </head>
 8  
 9 <body>
10 <picture>
11     <source media="(min-width: 850px)" srcset="images/kitten-large.png">
12     <source media="(min-width: 300px)" srcset="images/kitten-medium.png">
13     <!-- img标签用于不支持picture元素的浏览器 --> 
14     <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
15 </picture>
16 </body>
17 </html>

View Code

　　2）响应屏幕方向

　　当屏幕方向为横屏方向时加载kitten-large.png的图片，当屏幕方向为竖屏方向时加载kitten-medium.png的图片。使用代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <script src="images/picturefill.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 <picture>
10     <source media="(orientation: portrait)" srcset="images/kitten-medium.png">
11     <source media="(orientation: landscape)" srcset="images/kitten-large.png">
12     <!-- img标签用于不支持picture元素的浏览器 --> 
13     <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
14 </picture>
15 </body>
16 </html>

View Code

　　小结：可以结合多种条件（如屏幕方向和视图大小），分别加载不同的图片。

　　3）响应像素密度

　　以屏幕像素密度作为条件，当像素密度为2x时，加载后缀为_retina.png的图片，当像素密度为1x时加载无后缀retina的图片。使用代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <script src="images/picturefill.js" type="text/javascript"></script>
 7 </head>
 8  
 9 <body>
10 
11 <picture>
12     <source media="(min-width: 320px) and (max-width: 640px)" srcset="images/minpic_retina.png 2x">
13     <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 1x">
14     <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
15 </picture>
16 
17 </body>
18 </html>

View Code

　　4）响应图像格式

　　以图片的文件格式作为条件，当支持webp格式图片时加载webp格式图片，不支持时加载png格式的图片。使用代码示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <script src="images/picturefill.js" type="text/javascript"></script>
 7 </head>
 8  
 9 <body>
10 
11 <picture>
12     <source type="image/webp" srcset="images/picture.webp">
13     <img src="images/picture.png" alt=" this is a picture ">
14 </picture>
15 
16 </body>
17 </html>

View Code

　　5）自适应像素比

　　自适应像素比主要是用来做屏幕自适应的，根据各种屏幕的显示像素不同，从而显示对应像素的图片，需要以自适应像素比来作为要是图片的一种查询使用参数。使用代码示例步骤：

　　a.先准备5张图：

　　500.png：大小等于500x500px。

　　1000.png：大小等于1000x1000px。

　　1500.png：大小等于1500x1500px。

　　2000.png：大小等于2000x2000px。

　　2500.png：大小等于2500x2500px。

　　b.新建HTML5文档，输入下面代码，即可在不同屏幕像素比的设备上进行测试。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 <body>
 8 <img width="500" srcset="
 9         images/2500.png 5x, 
10         images/1500.png 3x, 
11         images/1000.png 2x, 
12         images/500.png 1x 
13         " 
14         src="images/500.png" 
15         /> 
16 </body>
17 </html>

View Code

　　可以把自适应像素比作为条件来挑选要显示的图片，示例代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 /*默认大小*/
 8 .photo {background-image: url(images/100.png);}
 9 /* 如果设备像素比大于等于2，则用2倍图 */
10 @media screen and (-webkit-min-device-pixel-ratio: 2),
11 screen and (min--moz-device-pixel-ratio: 2) {
12   .photo {
13     background-image: url(images/1000.png);
14     background-size: 100px 100px;
15   }
16 }
17 /* 如果设备像素比大于等于3，则用3倍图 */
18 @media screen and (-webkit-min-device-pixel-ratio: 3),
19 screen and (min--moz-device-pixel-ratio: 3) {
20   .photo {
21     background-image: url(images/1500.png);
22     background-size: 100px 100px;
23   }
24 }
25 .photo {width:100px;height:100px;}
26 
27 </style>
28 </head>
29  
30 <body>
31 
32 <div class="photo"></div>
33 
34 </body>
35 </html>

View Code

　　6）自适应视图宽

　　自适应视图宽主要是在屏幕加载图片时常见到，如果没有设置sizes，加载图片时一般按照100vm加载图片。使用示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7  
 8 <body>
 9 <!--视口宽在500px及以下时，使用500w的图片；在1000px及以下时，使用1000w的图片，以此类推。最后设置如果媒体查询都满足的情况下，使用2000w的图片-->
10 <img width="500" srcset="
11         images/2000.png 2000w, 
12         images/1500.png 1500w, 
13         images/1000.png 1000w, 
14         images/500.png 500w 
15         " 
16     sizes=" 
17         (max-width: 500px) 500px,  
18         (max-width: 1000px) 1000px, 
19         (max-width: 1500px) 1500px, 
20         2000px "
21     src="images/500.png" 
22 /> 
23 
24 </body>
25 </html>

View Code

　　尝试使用百分比来设置视口宽度，设计图片显示选择的方法：视口宽度乘以1、0.8或0.5，根据得到的像素来选择不同的w。举个例子：当视口viewport为900px，对应80vm，即为：900x0.8=720px,对应选择第一个大于720w的源图（即1000w）进行显示。使用示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7  
 8 <body>
 9 
10 <img width="500" srcset="
11         images/2000.png 2000w, 
12         images/1500.png 1500w, 
13         images/1000.png 1000w, 
14         images/500.png 500w 
15         " 
16     sizes=" 
17         (max-width: 500px) 100vm,  
18         (max-width: 1000px) 80vm, 
19         (max-width: 1500px) 50vm, 
20         2000px "
21     src="images/500.png" 
22 /> 
23 
24 </body>
25 </html>

View Code

　　3.3 音频和视频

　　1）使用embed

　　使用<embed>标签可以定义嵌入插件，以便播放多媒体信息。用法如下：

1 <embed src="url" />

　　src属性必须设置，用来指定媒体源。<embed>标签还包含height、width、type属性。前二者用来设置内嵌内容的高度和宽度，type则是用来定义嵌入内容的类型。使用代码示例：（提示：目前IE浏览器由于存在相应mp3音频播放插件故对embed支持良好，而谷歌没有）　

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 body {
 8     background-image: url(images/bg.jpg);
 9 }
10 </style>
11 </head>
12 
13 <body>
14 
15 <embed src="images/bg.mp3"  width="307" height="32" autostart="true" loop="infinite" hidden="true"></embed>
16 
17 </body>
18 </html>

View Code

　　embed也可以播放视频。示例：（提示：目前IE浏览器由于存在相应avi视频播放插件故对embed支持良好，而谷歌没有）

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 
10  <embed src="images/vid2.avi" width="413" height="292"></embed>
11 </body>
12 </html>

View Code

　　2）使用object

　　使用<object>标签可以定义一个嵌入对象，主要用于在网页中插入多媒体信息，如图像、音频、视频、Java applets、ActiveX、PDF和Flash。<object>标签包含大量属性，用属性（值）表示如data（URL）、form(form_id)、height（px）、width（px）、name（unique_name）、type（MIME_type）、usemap（URL）。

　　可以使用<object>标签在页面中嵌入图片。示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 
10 <object width="100%"
11 type="image/jpeg" data="images/1.jpg">
12 </object>
13 
14 </body>
15 </html>

View Code

　　可以使用<object>标签在页面中嵌入网页。示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 html, body{
 8     height:100%;
 9 }
10 </style>
11 </head>
12 
13 <body>
14 
15 <object type="text/html" height="100%" width="100%" data="https://www.baidu.com/"></object>
16 
17 </body>
18 </html>

View Code

　　可以使用<object>标签在页面中嵌入音频。示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 
10 <object width="100%" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
11     <param name="AutoStart" value="1" />
12     <param name="FileName" value="images/bg.mp3" />
13 </object>
14 
15 </body>
16 </html>

View Code

　　也可以使用<object>在页面中嵌入视频。示例：　

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="750" id="FlashID" accesskey="h" tabindex="1" title="网站首页">
10     <param name="movie" value="flash/index.swf">
11     <param name="quality" value="high">
12     <param name="wmode" value="opaque">
13     <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->  
14     <param name="swfversion" value="9.0.115.0">
15     <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
16     <!--[if !IE]>-->
17     <object type="application/x-shockwave-flash" data="flash/index.swf" width="980" height="750">
18         <!--<![endif]-->
19         <param name="quality" value="high">
20         <param name="wmode" value="opaque">
21         <param name="swfversion" value="9.0.115.0">
22         <param name="expressinstall" value="Scripts/expressInstall.swf">
23         <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
24         <div>
25             <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
26             <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33" /></a></p>
27         </div>
28         <!--[if !IE]>-->
29     </object>
30     <!--<![endif]-->
31 </object>
32 
33 </body>
34 </html>

View Code

　　3）使用audio

　　HTML5新增的<audio>标签可以播放声音文件或音频流，支持OggVorbis、MP3、WAV等音频格式。使用示例：

 1 <!doctype html>
 2 <html> 
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 <audio controls="controls">
10     <source src="medias/test.ogg" type="audio/ogg">
11     <source src="medias/test.mp3" type="audio/mpeg">
12     您的浏览器不支持audio标签。
13 </audio>
14 </body>
15 </html>

View Code

 1 <!doctype html>
 2 <html> 
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 <audio autoplay loop>
10     <source src="medias/test.ogg" type="audio/ogg">
11     <source src="medias/test.mp3" type="audio/mpeg">
12 您的浏览器不支持audio标签。
13 </audio>
14 </body>
15 </html>

View Code

　　4）使用video

　　HTML5新增<video>标签可以播放视频文件或视频流，支持Ogg、MPEG4、WebM等视频格式。使用示例：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 <video controls>
10     <source src="medias/trailer.ogg" type="video/ogg">
11     <source src="medias/trailer.mp4" type="video/mp4">
12 您的浏览器不支持video标签。
13 </video >
14 </body>
15 </html>

View Code

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 
 8 <body>
 9 <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
10     width="400px" height="300px">
11     <source src="medias/trailer.ogv" type=‘video/ogg; codecs="theora, vorbis"‘>
12     <source src="medias/trailer.mp4" type=‘video/mp4‘>
13 </video>
14 </body>
15 </html>

View Code

　　<video>标签支持的属性中src属性用于指定要播放的视频文件，controls属性用于提供播放、暂停和音量控件，autoplay属性设置视频就绪后自动播放，width、height属性分别用于设置视频播放器的宽和高，loop设置视频循环播放。以上是常用的一些属性，还有一些属性请自行到W3C官网的HTML5教程部分去查看。

　　3.4 项目实战

　　1）设计MP3播放器

　　设计一个网页音乐播放器。原理：获取要播放的音频文件路径，然后传给audio元素的src属性，再调用HTML5多媒体API中相关属性、方法或事件，通过各种逻辑设计来控制音频播放、暂停状态和音量大小。

　　设计步骤：

　　第1步：设计播放器页面主体结构：（1）顶部：分布多个播放控制按钮；（2）中部：音乐列表；（3）底部：播放模式切换控制按钮。

　　第2步：在界面中插入一个<audio id="musicbox">标签，在main.css样式表中隐藏音频控件。

　　第3步：在脚本文件player.js中设计各种播放控制逻辑。如单击播放按钮时，让<audio id="musicbox">播放指定音频文件。

　　设计的HTML5文件源代码如下：

 1 <!DOCTYPE html>
 2 <html dir="ltr" lang="zh-CN">
 3 <head>
 4 <title>HTML5 音乐播放器</title>
 5 <link href="css/main.css"  rel="stylesheet" type="text/css"media="" />
 6 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
 7 <script src="js/player.js" type="text/javascript"></script>
 8 <meta name="viewport" content="width=device-width, initial-scale=1">
 9 </head>
10 <body>
11 <div id="player">
12     <audio id="musicbox"></audio>
13     <div id="controls" class="clearfix controls">
14         <div id="play" class="playing"></div>
15         <div id="next"></div>
16         <div id="progress">
17             <div></div>
18             <p id="time">00:00 / 00:00</p>
19         </div>
20         <div id="volume">
21             <div></div>
22         </div>
23     </div>
24     <div class="bar">
25         <button>重置列表</button>
26         <button>随机打乱</button>
27         <button>清空列表</button>
28     </div>
29     <ul id="musiclist">
30     </ul>
31     <div class="bar bottom"> <span>播放模式：</span> <span id="mode">全部</span> </div>
32 </div>
33 </body>
34 </html>

View Code

　　注意*：不放完整可运行源代码仅仅因为本人有点懒，如需要可以留言找我，我会直接私发，在此保证免费！

　　2）设计视频播放器

　　用HTML5提供的video元素以及HTML5提供的多媒体API的扩展设计一个视频播放器。使用JavaScript控制播放控件的行为，如视频加载、播放、暂停、总时长和当前播放时长显示、全屏显示等。

　　设计步骤：

　　第1步：设计播放控件。

　　第2步：设计视频加载loading效果。

　　第3步：设计播放功能。在JavaScript脚本中，先获取要用到的DOM元素，当视频就绪时，显示视频。

　　第4步：设计播放、暂停按钮。点击播放后，显示暂停图标，在两者间进行切换。

　　第5步：获取并显示总时长和当前播放时长。

　　第6步：设计播放进度条。

　　第7步：设计全屏显示。

　　设计的HTML5源代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4 <meta charset="UTF-8">
  5 <title></title>
  6 <link rel="stylesheet" href="css/font-awesome.css">
  7 <link rel="stylesheet" href="css/player.css">
  8 </head>
  9 <body>
 10 <figure>
 11     <figcaption>视频播放器</figcaption>
 12     <div class="player">
 13         <video id="myVideo" src="video/trailer.mp4"></video>
 14         <div class="controls"> 
 15             <!-- 播放/暂停 --> 
 16             <a href="javascript:;" class="switch fa fa-play"></a> 
 17             <!-- 全屏 --> 
 18             <a href="javascript:;" class="expand fa fa-expand"></a> 
 19             <!-- 进度条 -->
 20             <div class="progress">
 21                 <div class="loaded"></div>
 22                 <div class="line"></div>
 23                 <div class="bar"></div>
 24             </div>
 25             <!-- 时间 -->
 26             <div class="timer"> <span class="current">00:00:00</span> / <span class="total">00:00:00</span> </div>
 27             <!-- 声音 --> 
 28         </div>
 29     </div>
 30 </figure>
 31 <script type="text/javascript">
 32 var video = document.querySelector("video");
 33 var isPlay = document.querySelector(".switch");
 34 var expand = document.querySelector(".expand");
 35 var progress = document.querySelector(".progress");
 36 var loaded = document.querySelector(".progress > .loaded");
 37 var currPlayTime = document.querySelector(".timer > .current");
 38 var totalTime = document.querySelector(".timer > .total");
 39 
 40 //当视频可播放的时候
 41 video.oncanplay = function(){
 42     //显示视频
 43     this.style.display = "block";
 44     //显示视频总时长
 45     totalTime.innerHTML = getFormatTime(this.duration);
 46 };
 47 
 48 //播放按钮控制
 49 isPlay.onclick = function(){
 50     if(video.paused) {
 51         video.play();
 52     } else {
 53         video.pause();
 54     }
 55     this.classList.toggle("fa-pause");
 56 };
 57 
 58 //全屏
 59 expand.onclick = function(){
 60     video.webkitRequestFullScreen();
 61 };
 62 
 63 //播放进度
 64 video.ontimeupdate = function(){
 65     var currTime = this.currentTime,    //当前播放时间
 66         duration = this.duration;       // 视频总时长
 67     //百分比
 68     var pre = currTime / duration * 100 + "%";
 69     //显示进度条
 70     loaded.style.width = pre;
 71 
 72     //显示当前播放进度时间
 73     currPlayTime.innerHTML = getFormatTime(currTime);
 74 };
 75 
 76 //跳跃播放
 77 progress.onclick = function(e){
 78     var event = e || window.event;
 79     video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
 80 };
 81 //全屏
 82 expand.onclick = function(){ video.webkitRequestFullScreen(); };
 83 
 84 //播放完毕还原设置
 85 video.onended = function(){
 86     var that = this;
 87     //切换播放按钮状态
 88     isPlay.classList.remove("fa-pause");
 89     isPlay.classList.add("fa-play");
 90     //进度条为0
 91     loaded.style.width = 0;
 92     //还原当前播放时间
 93     currPlayTime.innerHTML = getFormatTime();
 94     //视频恢复到播放开始状态
 95     that.currentTime = 0;
 96 };
 97 
 98 function getFormatTime(time) {
 99     var time = time || 0;
100 
101     var h = parseInt(time/3600),
102         m = parseInt(time%3600/60),
103         s = parseInt(time%60);
104     h = h < 10 ? "0"+h : h;
105     m = m < 10 ? "0"+m : m;
106     s = s < 10 ? "0"+s : s;
107 
108     return h+":"+m+":"+s;
109 }
110 </script>
111 </body>
112 </html>

View Code

　　注意*：不放完整可运行源代码仅仅因为本人有点懒，如需要可以留言找我，我会直接私发，在此保证免费！

总结：以上内容是个人根据一些HTML5教程总结的，关于HTML5图像和多媒体这一部分内容，本人学习得比较浅，其中遗漏内容请自行到W3C官网去看HTML5对应的这一部分内容。

前端：HTML5学习之路（三）

原文：https://www.cnblogs.com/tft191009/p/11890640.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)