- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增
- 【融职培训】Web前端学习 第2章 网页重构8 网页结构
- 【融职培训】Web前端学习 第2章 网页重构12 css3新增样
- 【融职培训】Web前端学习 第2章 网页重构9 css定位
- 【融职培训】Web前端学习 第2章 网页重构15 flex布局
- 【融职培训】Web前端学习 第2章 网页重构7 浮动布局
- 【融职培训】Web前端学习 第2章 网页重构16 grid布局
- 【融职培训】Web前端学习 第2章 网页重构18 rem布局
- 【融职培训】Web前端学习 第2章 网页重构17 媒体查询
- 【融职培训】Web前端学习 第2章 网页重构10 还原设计稿
一、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}2627 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的语义化标签
打开此网页视频自动播放
网友评论