前端小白的学习之路(HTML5 一)

提示：一些HTML5新增的标签:语义化标签，<img>,<video>,<audio>

一、HTML5简介

二、语义化标签

1)新增语义化标签

2)示例

三、多媒体标签

1)图片标签

图片加载问题

1.当图片路径预设好时可以直接获取图片的信息

2.当在JS中设置图片时会因为图片还未加载而无法获取到图片

3.FileReader 对象

2)视频标签

1.属性

2.使用案例

3）音频标签

1.属性

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);//260console.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);// 0console.log(img.height);// 0// 加载图片img.onload = function () {console.log(img.width);// 256console.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);// 补个0h = h < 10 ? '0' + h : h;m = m < 10 ? '0' + m : m;s = s < 10 ? '0' + s : s;// 返回值return `${h}:${m}:${s}`;}</script>
</body></html>