一、html5概述
html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的JavaScript接口。
本节的主要内容是讲解html5中新增加的布局标签和媒体标签。
二、html5布局标签
在此前我们学习的内容中,网页布局一直都是使用div作为容器,html5新标准中,为了让容器元素有语义,让网页更具可读性,新增了
- header
- nav
- aside
- article
- section
- footer
我们使用header和nav标签来做一个简单的例子,代码如下所示。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin:0px; 9 padding:0px; 10 } 11 header{ 12 height:300px; 13 border:1px solid red; 14 width:1000px; 15 margin:0 auto; 16 } 17 nav li { 18 list-style: none; 19 width: 80px; 20 height: 30px; 21 line-height: 30px; 22 text-align: center; 23 float: left; 24 border: 1px solid blue; 25 } 26 27 a { 28 text-decoration: none; 29 color: #666; 30 } 31 </style> 32 </head> 33 <body> 34 <header> 35 <nav> 36 <ul> 37 <li> 38 <a href="#">首頁</a> 39 </li> 40 <li> 41 <a href="#">游戏</a> 42 </li> 43 <li> 44 <a href="#">视频</a> 45 </li> 46 <li> 47 <a href="#">动画</a> 48 </li> 49 <li> 50 <a href="#">音乐</a> 51 </li> 52 </ul> 53 </nav> 54 </header> 55 </body> 56 </html>
通过上面的代码可以看到,header标签和nav标签的作用与之前的div的作用完全相同,只不过标签的名字具有语义化而已。
虽然有了这么多语义化标签,但是对于初学者来说,由于对网页整体把握得不够好,会导致滥用语义化标签的情况,因此本教程中所有的布局元素仍然继续使用div标签。等大家有了一定的技能基础之后,再根据直接开发情况去应用语义化标签吧。
三、html5媒体标签
在html之前的版本中,如果我们需要在网页中插入音频或是视频,需要安装额外的插件,但是从html5版本之后,我们就可以直接通过一个标签来实现音频和视频的展示功能。
音频标签
通过audio标签,我们可以直接在在网页中嵌入音乐播放器,audio标签的src属性可以指定音乐文件,代码如下所示:
1 <audio src="media/music.mp3"></audio>
但是上诉代码并不能直接播放音乐,为了让网页打开的时候同时播放音乐,我们可以为audio标签添加一个autoplay属性,代码如下所示。
1 <audio src="media/music.mp3" autoplay></audio>
打开上面的网页,我们就可以听到来自源文件media/music.mp3的音乐了,我们又遇到了新的问题,如何对音乐播放器做进一步的设置呢,例如停止音乐,或者设置音量。我们可以为audio标签添加一个controls属性,就可以在网页中看到这个音乐播放器的控制页面了,代码如下所示。
1 <audio src="media/music.mp3" autoplay controls></audio>
通过audio标签,我们可以很方便地在网页中嵌入音乐播放器,如果掌握了JavaScript,我们还可以利用JavaScript调用audio标签的接口,来实现我们的自定义音乐播放器。
视频标签
掌握了音频标签,再来看视频标签(video)就十分简单了,我们可以在网页中添加video标签来为网页嵌入视频。代码如下所示。
1 <video src="media/video.mp4" controls autoplay></video>
通过上面的代码我们可以看到,video标签同样可以使用controls属性设置播放器的控制器,通过autoplay属性控制其自动播放。
我们还可以通过样式控制视频播器放尺寸,代码如下所示。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 video{ 8 width:50%; 9 } 10 </style> 11 </head> 12 <body> 13 <video src="media/video.mp4" controls autoplay></video> 14 </body> 15 </html>
四、课后练习
完成融职教育视频播放页面的效果图,要求如下:
- 布局使用html5的语义化标签
- 打开此网页视频自动播放