前端小白的学习之路(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);//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>