提示：一些HTML5新增的标签:语义化标签，<img>,<video>,<audio>
目录
2)视频标签
一、HTML5简介
HTML5 是 HTML 的第五个主要版本，是用于构建网页和网页应用程序的标准。它是 Web 技术的一部分，旨在改善和增强现有的 HTML、CSS 和 JavaScript 技术，以满足当今 Web 应用程序的需求。
HTML5 的一些主要特性和改进包括：
语义化标记：引入了更多的语义化元素（如
<header>、<footer>、<nav>等），使得开发者可以更好地描述网页内容的结构和意义，有利于搜索引擎优化（SEO）和可访问性。多媒体支持：引入了
<video>和<audio>标签，使得在网页上嵌入和控制视频和音频变得更加简单。同时，增强了对 Canvas 和 SVG 的支持，使得开发者可以使用这些技术绘制复杂的图形和动画。表单增强：引入了新的表单控件和属性，如
<input type="date">、<input type="email">、<input type="number">等，使得表单的构建和验证更加简单和可靠。本地存储：引入了 Web 存储 API，使得网页应用程序可以在客户端存储数据，而不需要依赖于服务器。
Web Workers 和 WebSocket：引入了 Web Workers API，使得网页应用程序可以在后台执行多线程任务，从而提高了性能。另外，引入了 WebSocket API，使得网页应用程序可以实现实时双向通信，例如实时聊天和在线游戏。
响应式设计：HTML5 促进了响应式 Web 设计的发展，使得网页可以在不同的设备和屏幕尺寸上提供一致的用户体验
7. HTML5 仍处于完善之中
二、语义化标签
HTML5语义化标签指的是HTML5中新增的一些具有特定含义的标签，这些标签能够更清晰地描述文档的结构和内容，使得网页的结构对机器和开发者更加友好，也更有利于搜索引擎优化和可访问性。
1)新增语义化标签
<header>：用于定义文档或节的页眉，通常包含导航、logo 或标题等内容。<footer>：用于定义文档或节的页脚，通常包含版权信息、联系方式等内容。<nav>：用于定义导航链接的区域，通常包含页面的主要导航链接。<article>：用于表示一个独立的、完整的文章或内容块。<section>：用于定义文档中的节或区域，通常表示一个主题或相关内容的集合。<aside>：用于表示与页面内容相关但不是主要内容的部分，通常包含侧边栏、广告等内容。<main>：用于表示文档的主要内容区域，通常包含页面的核心内容。<figure>和<figcaption>：用于表示图像、图表、视频等媒体内容及其标题或说明
2)示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
.header {
height: 100px;
}
.nav {
height: 40px;
}
.main {
height: 600px;
}
.main .aside {
height: 600px;
}
.main .article {
height: 600px;
}
.footer {
height: 100px;
}
</style>
</head>
<body>
<!-- 这种div搭建的结构不是语义化结构 -->
<div class="header"></div>
<div class="nav"></div>
<div class="main">
<div class="aside"></div>
<div class="artice"></div>
</div>
<div class="footer"></div>
<!-- 以下就是语义化标签 -->
<header class="header bg-primary container"></header>
<nav class="nav bg-warning container"></nav>
<main class="main bg-info container">
<aside class="aside bg-success w-25 float-left"></aside>
<article class="article bg-danger w-75 float-right"></article>
</main>
<footer class="footer bg-secondary container"></footer>
</body>
</html>代码如下（示例）：
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
三、多媒体标签
1)图片标签<img>
图片加载问题
1.当图片路径预设好时可以直接获取图片的信息
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<style>
input {
display: block;
}
img {
width: 260px;
}
</style>
<img src="./images/one1.jpg" alt="">
<script>
// 获取图片标签
var img = document.querySelector("img")
console.log(img.width);//260
console.log(img.height);//325
</script>
</body>
</html>2.当在JS中设置图片时会因为图片还未加载而无法获取到图片
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<style>
input {
display: block;
}
img {
width: 260px;
}
</style>
<img src="" alt="">
<script>
// 创建一个图片
var img = new Image();
// 请求图片资源
img.src = "./images/one1.jpg";
console.log(img.width);// 0
console.log(img.height);// 0
// 加载图片
img.onload = function () {
console.log(img.width);// 256
console.log(img.height);// 320
}
</script>
</body>
</html>3.FileReader 对象
FileReader 对象是 JavaScript 中的一个内置对象，用于读取文件内容。它通常与文件输入元素 <input type="file"> 结合使用，允许用户选择本地文件，并在客户端对文件内容进行读取和处理
使用FileReader对象做一个图片预加载功能，可以实现异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容 。
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<style>
input {
display: block;
}
img {
width: 260px;
}
</style>
<input type="file">
<img src="" alt="">
<script>
// 做图片预览
var img = document.querySelector("img");
// 选择文件的input标签
var input = document.querySelector("input[type=file]");
// 监听input标签的值变化 （选择文件、点击确定）
input.addEventListener("change",function(){
//获取图片信息
var photo = input.files[0];
//判断是否为图片
//console.log(photo.name);// 图片名称，后缀名
//判断图片大小
// console.log(photo.size);// 图片尺寸 （字节）
//var v = photo.size / 1024;// 千字节
//console.log(v);
// 创建读取文件的实例
var reader = new FileReader();
// 监听文件加载
reader.onload = function(){
//获取转成字符串的图片信息
//console.log(reader.result);
// 渲染图片
img.src = reader.result;
}
// 判断是否存在图片信息
if(photo){
// 把文件转字符串信息
reader.readAsDataURL(photo);
}
})
</script>
</body>
</html>FileReader 对象的文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
2)视频标签<video>
1.属性
1.controls属性:使视频可以控制,如播放,暂停,下载等
2.muted属性:使视频默认静音
3.autoplay属性:使视频自动播放,前提是视频处于静音状态muted(媒体参与度高的情况下也可以有声音自动播放)
4.loop属性:循环播放
5.poster属性:视频封面，视频初始暂停状态时显示的图片，视频不能自动播放autoplay
6.preload属性:视频预加载模式,auto:浏览器自动加载;none:不进行任何的预加载;metadate:加载视频的基本信息，如视频时长;使用autoplay则忽略该属性
2.使用案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<style>
ul,
ol {
list-style: none;
}
.container {
max-width: 900px;
}
.progress {
width: 700px;
border-radius: 20px;
}
.video {
width: 100%;
height: auto;
display: block;
}
.btn {
height: 24px;
width: 24px;
border-radius: 50%;
}
.zanting {
content: "";
display: block;
width: 24px;
height: 24px;
background: url(./images/bofang.png) no-repeat center;
background-size: cover;
}
.bofang {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url(./images/zanting.png) no-repeat center;
background-size: cover;
}
.ji-list {
width: 100%;
padding-left: 0;
}
.ji-list li {
width: 100px;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.ji-list li.active {
background-color: skyblue;
}
.ji-list li:nth-child(n+2) {
margin-left: 10px;
}
</style>
<body>
<div class="container">
<!--视频标签-->
<video class="video" src="./video/ys.mp4" muted preload="metadata"></video>
</div>
<div class="container mt-3 d-flex justify-content-between align-items-center contral">
<div class="time d-flex align-items-center">
<div class="alert-one" role="alert">
00:00:00
</div>
<div class="ml-1"> / </div>
<div class="alert-two ml-1" role="alert">
00:00:00
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button class="btn zanting"></button>
</div>
<div class="container mt-3">
<ul class="ji-list d-flex flex-wrap">
<!-- <li>第一集</li>
<li>第二集</li> -->
</ul>
</div>
<script src="../jQuery/libs/jQuery/jQuery.min.js"></script>
<script>
//获取dom对象
var btn = document.querySelector('.btn');
var video = document.querySelector(".video");
var progress = document.querySelector(".progress");
var progress_bar = document.querySelector(".progress-bar");
var time_box_c = document.querySelector(".alert-one");
var time_box_d = document.querySelector(".alert-two");
var ji_list = document.querySelector('.ji-list');
var arr = [{
'第一集': "./video/ys.mp4" //视频路径
}, {
'第二集': "./video/xqtd.mp4"
}, {
'第三集': "./video/dlam.mp4"
}];
//渲染函数
function template() {
for (var index in arr) {
for (var key in arr[index]) {
var newLi = document.createElement('LI');
newLi.innerHTML = key;
if (index == 0) {
newLi.classList.add('active')
}
ji_list.append(newLi);
}
}
}
template()
//自动播放函数
function videoPlay(txxt) {
for (var index in arr) {
for (var key in arr[index]) {
if (key == txxt) {
video.src = arr[index][key];
$('.ji-list li').removeClass('active');
// console.log($('.ji-list li')[index]);
$('.ji-list li')[index].classList.add('active');
}
}
}
btn.classList.remove('zanting');
btn.classList.add('bofang');
video.play();
}
var d = 0;
var c = 0;
//按钮点击事件
btn.onclick = function () {
if (video.paused) {
btn.classList.remove('zanting');
btn.classList.add('bofang');
video.play();
} else {
btn.classList.remove('bofang');
btn.classList.add('zanting');
video.pause();
}
}
//视频准备播放事件
video.oncanplay = function () {
d = video.duration;
time_box_d.innerText = formatime(d);
}
//视频播放事件
video.ontimeupdate = function () {
c = video.currentTime;
var demo = c / d * 100;
progress_bar.style.width = `${demo}%`;
time_box_c.innerText = formatime(c);
}
//视频结束事件
video.onended = function () {
// 下一首歌
var txt = $('.ji-list').find('.active').next().text();
if (txt == null) {
videoPlay('第一集');
} else {
videoPlay(txt);
}
}
//去除进度条默认样式
progress_bar.style.transition = "none";
var x = 0;
var bili = 0;
var v = 0;
//拉动进度条事件
var setProgress = function (e) {
x = e.pageX - progress.offsetLeft;
v = (x / progress.offsetWidth);
bili = v * 100;
progress_bar.style.width = bili + "%";
c = v * d;
video.currentTime = c;
time_box_c.innerText = formatime(c);
}
progress.onmousedown = function (event) {
setProgress(event);
document.onmousemove = function (e) {
setProgress(e);
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
//渲染时间函数
function formatime(time) {
var h, m, s;
h = Math.floor(time / 3600);
m = Math.floor(time % 3600 / 60);
s = Math.floor(time % 60);
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return `${h}:${m}:${s}`;
}
//选集按钮点击事件 的
$('.ji-list li').on('click', function () {
// $('.ji-list li').removeClass('active');
// $(this).addClass('active')
var txt = $(this).text();
videoPlay(txt);
})
</script>
</body>
</html>3）音频标签<rudio>
1.属性
1.controls属性:使音频可以控制,如播放,暂停,下载等
2.muted属性:使音频默认静音
3.autoplay属性:媒体参与度(一段事件内点击媒体的次数)高的情况下可以自动播放(一般不用)
4.loop属性:循环播放
5.preload属性:音频预加载模式,auto:浏览器自动加载;none:不进行任何的预加载;metadate:加载音频的基本信息，如音频时长
2.使用示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- <audio src="./music/163.m4a" controls></audio> -->
<!-- <audio class="audio" src="./music/yishujiamen.mp3" controls></audio> -->
<style>
.audio {
width: 0;
height: 0;
opacity: 0;
}
</style>
<div class="container">
<audio class="audio" src="./music/163.m4a" controls></audio>
<button class="btn btn-success">点击播放</button>
<button class="btn btn-danger">暂停</button>
</div>
<div class="container mt-3">
<!-- 进度条 -->
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 警告框 -->
<div class="alert alert-danger mt-3" role="alert">
00:00:00
</div>
<div class="alert alert-primary" role="alert">
00:00:00
</div>
</div>
<script>
var btnPlay = document.querySelector(".btn-success");
var btnPause = document.querySelector(".btn-danger");
var audio = document.querySelector(".audio");
var progress = document.querySelector(".progress");
var progress_bar = document.querySelector(".progress-bar");
var time_box_c = document.querySelector(".alert-danger");
var time_box_d = document.querySelector(".alert-primary");
// 定义数组记录歌曲
var index = 0;
var arr = [
"./music/163.m4a",
"./music/yishujiamen.mp3"
]
// 记录播放总时长
var d = 0;
// 记录当前播放时长
var c = 0;
// 观察音频标签对象
// console.dir(audio);
// 做交互
// 点击按钮
btnPlay.onclick = function () {
// 播放音频
audio.play();
}
btnPause.onclick = function () {
// 暂停音频
audio.pause();
}
// 监听音频文件是否可以播放事件
audio.oncanplay = function () {
// 获取音频总时长
d = audio.duration;
// console.log({ d })
// 渲染总时长
time_box_d.innerText = formatime(d);
}
// 监听音频文件当前播放更新的时长
audio.ontimeupdate = function () {
// 获取当前播放的时长
c = audio.currentTime;
// console.log({ c });
// 计算比例
var demo = c / d * 100;
// 设置进度条的宽度
progress_bar.style.width = `${demo}%`;
// 渲染当前播放时长
time_box_c.innerText = formatime(c);
}
// 监听音频播放结束事件
audio.onended = function () {
// 索引值自增
index ++;
index = index > arr.length - 1 ? 0: index;
console.log("播放结束");
// 下一首歌
audio.src = arr[index];
audio.play();
}
// 移除进度条标签的过渡属性
progress_bar.style.transition = "none";
var x = 0;
var bili = 0;
var v = 0;
var setProgress = function (e) {
// 鼠标移动的距离
x = e.pageX - progress.offsetLeft;
// 计算x占整个进度条宽度的值
v = (x / progress.offsetWidth);
// 计算比例
bili = v * 100;
// console.log(bili + "%")
// 设置进度宽度
progress_bar.style.width = bili + "%";
// 设置音频当前的时长
c = v * d;
console.log({ c });
audio.currentTime = c;
// 渲染当前播放时长
time_box_c.innerText = formatime(c);
}
// 滑动效果
progress.onmousedown = function (event) {
// 鼠标按下进度条
setProgress(event);
document.onmousemove = function (e) {
// 鼠标在页面移动
setProgress(e);
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
// 格式化时间
function formatime(time) {
// 记录时分秒
var h, m, s;
// 计算
h = Math.floor(time / 3600);
m = Math.floor(time % 3600 / 60);
s = Math.floor(time % 60);
// 补个0
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
// 返回值
return `${h}:${m}:${s}`;
}
</script>
</body>
</html>
