HTML5

I love studying!!!

于 2024-09-15 15:52:33 发布

阅读量799

点赞数 24

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_73759720/article/details/142140903

版权

一、概念

HTML5 是超文本标记语言（HTML）的第五个主要版本，它是用于构建和展示万维网内容的标准标记语言。HTML5 于 2014 年由万维网联盟（W3C）正式推荐。HTML5 的目标是通过提供更加丰富和动态的功能来支持现代 Web 应用和网站的开发，同时减少对插件（如 Flash）的依赖。使标签语义化：

<!-- 声明文档类型 -->
<!DOCTYPE html>
<!-- 语言 -->
<html lang="zh-cn">
<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- viewport: 视口容器 width=device-width：页面宽度等于设备宽度   initial-scale=1.0 初始化的缩放比 移动端和PC的字体大小比例： 1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 最新的渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>
<body>

    <header>头部</header>
    <nav>导航</nav>
    <main>
        <aside>主体侧栏</aside>
        <article>主体文章</article>
    </main>
    <footer>尾部</footer>


    <script>


    </script>
</body>
</html>

二、新增元素

1. 表单元素

<input>: 输入框，可以用来接收不同类型的数据。

type可以为text(文本)、password(密码)、email(电子邮箱)、number(数字)、file(文件)、date(日期)等等，

fileldset用于表单分组

<input type="range">这是一个滑块输入控件，用户可以通过拖动滑块来选择一个数值。

<meter>用于表示一个在已知范围内的测量值。

<progress>表示某个操作的进度，通常用于显示任务的完成情况。

此外还可以在<input>中输入pattern 填写正则表达式、required 输入框不能为空、disabled 禁用输入框、readonly 只读不写（不能输入）、autofocus 自动获取焦点。

2. 多媒体元素

HTML5 内置支持音频和视频标签（<audio> 和 <video>），使得在网页中嵌入多媒体内容更加简单，无需依赖第三方插件。具体代码如下：

<!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>
    <style>
         video {
            width: 450px;
        }
    </style>
</head>
<body>

    <audio src="./moive1.MP4" controls id="audio"></audio>
    <!-- <div>
        <button class="btn-play">播放</button>
        <button class="btn-pause">暂停</button>
    </div> -->
    <div>
        <button class="btn-toggle">播放视频</button>
    </div>
    <hr>
    <video src="./moive1.MP4" controls id="video"></video>
    <div>
        <button class="btn-demo">播放视频</button>
    </div>


    <script src="./libs/jquery@3.5.1/jquery-3.5.1.js"></script>
    <script>
        // 获取多媒体标签
        var audio = $("#audio")[0]
        var video = $("#video")[0]
        // 定义开关
        var isPlay = true
        $(".btn-toggle").on("click", function(){
            if(isPlay){
                // 播放视频
                audio.play()
                $(".btn-toggle").html("暂停视频")
            }
            else{
                // 暂停视频
                audio.pause()
                $(".btn-toggle").html("播放视频")
            }
            isPlay = !isPlay
        })
        // 总时长
        var dur = 0
        // 当前时长
        var cur = 0
        // 监听音频是否可以播放
        audio.oncanplay = function(){
            // 获取总时长，只读不写
            dur = audio.duration
            console.log(dur)
        }
        // 监听音频播放进度
        audio.ontimeupdate = function(){
            // 获取当前时长，可读可写
            cur = audio.currentTime
            // console.log(cur)
        }
        // console.log(audio.playbackRate) //倍速
        // console.log(audio.volume)  //音量
        // 点击播放暂停视频
        var isShow = true
        $(".btn-demo").on("click",function(){
            isShow == true? video.play() : video.pause()
            isShow == true ? $(".btn-demo").html("暂停视频") : $(".btn-demo").html("播放视频")
            isShow = !isShow
        })



    </script>
</body>
</html>

3. 画布元素

引入了 <canvas> 元素，可以通过 JavaScript 在网页上绘制图形、动画和游戏等复杂内容。

JS的代码如下：

3.1 绘制线

3.2 绘制矩形

3.3 绘制圆

3.4 绘制文本

4. SVG标签

SVG是一种用于描述二维矢量图形的图像格式，广泛用于网页和应用程序中。SVG 使用 XML 语法来定义图形元素，可以缩放而不失真，适合各种分辨率的设备。具体操作流程可以进入官网https://www.w3.org/TR/SVG/查看。列如：

三、新增API

1. 本地缓存

本地存储localStorage是 Web 存储 API 的一部分，允许网页在用户的浏览器中以键值对的形式存储数据。与 Cookies 相比，本地存储具有更大的存储容量（通常为 5-10MB），并且数据不会随请求发送给服务器。可以在同一个环境下不同的窗口下共享数据，数据只要不是手动删除，都会一直存在（永久）。

存储数据：localStorage.setItem('key', 'value');

获取数据：const value = localStorage.getItem('key');

删除数据：localStorage.removeItem('key');

清空数据：localStorage.clear();

<!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>
    <style></style>
</head>
<body>

    <button class="btn1">设置本地存储</button>
    <button class="btn2">获取本地存储</button>
    <button class="btn3">删除本地存储</button>
    <button class="btn4">清空本地存储</button>

    <div>
        <input type="date" id="datetime">
    </div>
    <div>
        <h3 class="show"></h3>
    </div>


    <script src="./libs/jquery@3.5.1/jquery-3.5.1.js"></script>
    <script>
        // 点击设置存储
        $(".btn1").on("click",function(){
            // 获取当前日期
            var v1 = $("#datetime").val()
            if(v1 == '')return;
            localStorage.setItem("DATE", v1)
        })
        // 点击获取存储
        $(".btn2").on("click",function(){
            var v2 = localStorage.getItem("DATE")
            $(".show").html(v2)
        })
        // 点击删除存储
        $(".btn3").on("click",function(){
            localStorage.removeItem("DATE")
        })
        // 点击清空存储
        $(".btn4").on("click",function(){
            localStorage.clear()
        })


    </script>
</body>
</html>

2. 会话缓存

会话存储 sessionStorage 是 Web 存储 API 的一部分，允许在一个会话中存储数据。与本地存储不同，会话存储的数据在浏览器标签页或窗口关闭后会被清除。

存储数据：sessionStorage.setItem('key', 'value');

获取数据：const value = sessionStorage.getItem('key');

删除数据：sessionStorage.removeItem('key');

清空数据：sessionStorage.clear();

<!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>
    <style></style>
</head>
<body>
    <div>
        <button class="btn1">设置会话存储</button>
        <button class="btn2">获取会话存储</button>
        <button class="btn3">删除会话存储</button>
        <button class="btn4">清空会话存储</button>
    </div>

    <script src="./jquery@3.5.1/jquery-3.5.1.js"></script>


    <script>

        $('.btn1').on("click",function(){
            sessionStorage.setItem("color",'red')
        })
        $('.btn2').on('click',function(){
            var color = sessionStorage.getItem('color')
            document.body.style.backgroundColor = color
        })
        $('.btn3').on('click',function(){
            sessionStorage.removeItem('color')
            document.body.style.backgroundColor = 'pink'
        })
        $(".btn4").on("click",function(){
            sessionStorage.clear()
            document.body.style.backgroundColor = 'blue'
        })


    </script>
</body>
</html>

3. 监听网络

监听网络变化通常是指在 Web 应用中监测网络状态的变化。

online 事件：当网络连接恢复时触发。 offline 事件：当网络连接丢失时触发。

4. 触摸行为

触摸行为是指在移动设备上与触摸屏进行交互时发生的各种事件和操作。在 Web 开发中，触摸行为通常通过触摸事件来处理，这些事件是由用户在触摸屏上进行的操作触发的。

touchstart: 当用户触摸屏幕时触发。
touchmove: 当用户在屏幕上移动手指时触发。
touchend: 当用户抬起手指时触发。
touchcancel: 触摸事件被中断（例如，系统弹出通知）时触发。

<!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>
    <style>
        body{
            margin: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            position: fixed;
            top: 0;
            left: 0;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="box"></div>


    <script>
        var box = document.querySelector(".box")
        var isStart = false
        var x = 0
        var y = 0
        box.ontouchstart = function(){
            console.log("开始触摸")
            isStart = true
        }
        document.ontouchmove = function(event){
            if(isStart){
                console.log("滑动")
                // 获取鼠标在页面上触摸的坐标位置
                var pageX = event.touches[0].pageX
                var pageY = event.touches[0].pageY
                // 获取x,y坐标，并让鼠标处于盒子的中心点
                x = pageX - box.offsetWidth / 2
                y = pageY - box.offsetHeight / 2
                // 判断盒子是否超出页面
                if(x<0){x=0}
                if(y<0){y=0}
                if(x>(window.innerWidth-box.offsetWidth)){
                    x = window.innerWidth-box.offsetWidth
                }
                if(y>(window.innerHeight-box.offsetHeight)){
                    y = window.innerHeight-box.offsetHeight
                }
                // 设置盒子随鼠标移动
                box.style.left = x + 'px'
                box.style.top = y + 'px'
            }
        }
        document.ontouchend = function(){
            if(isStart){
                console.log("结束拖拽")
            }
            isStart = false
        }


    </script>
</body>
</html>