【融职培训】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>
四、课后练习
完成融职教育视频播放页面的效果图,要求如下:
- 布局使用html5的语义化标签
- 打开此网页视频自动播放
【融职教育】在工作中学习,在学习中工作
【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签相关推荐
- 【融职培训】Web前端学习 第2章 网页重构1 第一个网页
一.内容概述 从本节我们开始正式学习前端开发的课程内容,首先我们从第一个网页开始了解html和css的基本概念,并通过创建第一个网页了解vscode的基本使用方法. 二.安装vscode插件 汉化插件 ...
- 【融职培训】Web前端学习 第2章 网页重构7 浮动布局
一.元素分类 特性展示 在此前的课程中,我们还有一些遗留问题没有解决,例如: 有些元素不管宽度多少,都是独立占一行显示,有些元素则可以共同占用一行显示; 有些元素可以设置宽度和高度,有些元素不能设置宽 ...
- 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签
一.HTML语法 上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html> <!-- 文档声明 --> ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
- 【融职培训】Web前端学习 第7章 Vue基础教程4 组件传值
一.组件传值的三种情况 我们可以把组件之间的数据传递分为三种情况: 父级向子级传递数据 子级向父级传递数据 非父子级传递数据 二.父级向子级传值 父级可以通过属性向自己传递数据,示例代码如下所示: 1 ...
- 【融职培训】Web前端学习 第10章 小程序开发4 小程序开发
一,数据绑定 VUE:vue动态绑定一个变量的变量元素的某个属性的时候,会在变量前面加上冒号:,例: <p:title="tit">我的title属性绑定了数据< ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...
- Web前端小白必看【网页开发工具/HTML常用标签】
网页开发工具和HTML常用标签 一.网页开发工具vscode的使用 1.1常见的网页开发工具: 1.2vscode为例创建网页文件. 1.3vscode网页制作相关插件安装 1.4vscode出现的网 ...
- Web前端开发笔记——第二章 HTML语言 第二节 基本标签
目录 前言 一.标题标签 二.段落标签和段内换行 三.预留格式标签 四.行内组合标签 五.水平线标签 六.注释标签 七.空格字符 例题(创建一个网页) 结语 前言 本节主要讲解HTML的一些基本标签. ...
最新文章
- JAVA 多线程实现包子铺(买包子,吃包子)
- pandas使用str函数和startswith函数,筛选dataframe中不是(not start with)以特定前缀开头的数据列(selecting columns)
- Android性能优化工具
- 37 反转一个3位整数
- 签名算法sha256withrsa,RSA数字证书公钥私钥生成,base64转码和文件日志
- 【struts2】struts2实现自定义数据类型转换器
- node --- 使用nrm改变npm的源
- 4.1.3数据报与虚电路
- qt创建右键菜单,显示在鼠标点击处
- 键盘出现与消失的监听方法
- swoole实现Timer定时器、心跳检测及Task进阶实例:mysql连接池
- Linux之squirrelmail小松鼠客户端搭建
- Linux的段错误调试方法
- poj 1504 Adding Reversed Numbers
- 2021年高压电工模拟考试题及高压电工模拟考试题库
- 计算机网络(第7版) - 第五章 运输层 习题答案
- Unity开发WebGL项目开发问题与解决方法汇总
- window上装python,pip
- MTK 平台TP调试遇坑
- 物理仿真实验运用计算机什么用,电脑模拟与物理实验教学
热门文章
- 程序员如何抉择银行技术岗?
- openssl 生成自签证书及查看证书细节
- [ 2204阅读 ] 句子简化题 | 细节题 | 排除题 | 推理题 | 目的题 | 句子插入题 | 总结题
- 【Class 46】【实例】python爬虫实现 自动搜索 并 打开浏览器
- php概率计算_PHP 真实概率计算(百分比随机分配)
- 联通宽带开启 IPV6 的方法
- 如何计算单元测试的覆盖率
- Linux写文件断电保存,硬盘写到一半时断电,文件系统里会发生什么?
- 神仙思维导图:XMind的介绍
- jquery实现照片墙