专栏首页学习猿地Web前端学习 第2章 网页重构11 HTML5新增标签
原创

Web前端学习 第2章 网页重构11 HTML5新增标签

一、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>

四、课后练习

完成融职教育视频播放页面的效果图,要求如下:

  1. 布局使用html5的语义化标签
  2. 打开此网页视频自动播放

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签

    html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5,css3的新特...

    学习猿地
  • 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签

    html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5,css3的新特...

    学习猿地
  • matlab 2015a

    MATLAB是matrix&laboratory两个词的组合,意为矩阵工厂(矩阵实验室)。是由美国mathworks公司发布的主要面对科学计算、可视化以及交互式...

    课代表
  • 计算机基础教程#001 操作系统概述

    应网友们需求,针对计算机的基础做一些知识上面的补充,这样可以更好地学习编程。老刘开始着手计算机基础系列教程,这是第一期,以后逐渐为小伙伴们讲解和演示有关计算机基...

    刘金玉编程
  • Python的lambda表达式

    介绍几个 序列处理的函数,比如序列过滤、把所有元素都拿过来做某些操作,这种的序列处理函数。

    py3study
  • [机器学习Lesson 2]代价函数之线性回归算法

    x(1) 指的是 第一个训练集里值为2104的输入值, 这个就是第一行里的x x(2) 等于1416。这是第二个x y(1) 等于460,这是第一个训练集样本的...

    mantou
  • 代价函数

    代价函数,度量【假设集】的准确性。 机器学习中常用的代价函数,总结如下: 1 误差平方和函数 ? 说明:yi 是模型预测值,oi是样本实际值 2 交叉熵函数...

    陆勤_数据人网
  • 老年人上网有多野?搞定他们,你就是下个首富

    导读:85后、90后有没有这种体验?几年前,父母还在苦口婆心地教育你:玩电脑玩手机不要上瘾,别耽误了学习、工作;少在网上买东西,别上当。

    华章科技

扫码关注云+社区

领取腾讯云代金券