HTML5

最新推荐文章于 2023-03-23 23:05:09 发布

掉头发类型的选手

最新推荐文章于 2023-03-23 23:05:09 发布

阅读量213

点赞数 1

本文链接：https://blog.csdn.net/h360583690/article/details/119577708

版权

前言

本文关于HTML5其中一些更新内容的介绍，希望能学到新的知识。

HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！多了一些新的语义标签和表单元素，例如video 标签和 audio 及 canvas 标记。跨平台性非常强大，但pc端浏览器支持不是特别友好，造成用户体验不佳。

1.网页布局结构标签

<header></header> 头部。
<footer></footer> 底部。
<article></article> 装载显示一个独立的文章内容。
<aside></aside> 标签内容之外与标签内容相关的辅助信息。
<nav></nav> 显示导航链接。
<section></section> 定义文档中的节。比如章节，页眉或其他部分。
这些标签的功能和div标签都是一样的，没有任何区别，但他们能很好的帮助我们了解页面布局，让我们的页面更条理。

2.多媒体标签

多媒体标签主要包括视频和音频，video标签引入视频，audio标签引入音频。

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。浏览器也是影响视频能否正常播放的因素，一般Chrome，Firefox这三种视频格式都支持。

嵌入视频：

<body>
        <!-- src="" 中间放视频的路径，
        controls  写上这个属性会在视频的下方出现进度条，像下面的图一样，要不然没办法播放，
        poster=" " 这个属性中可以放图片的地址，在还没播放视频的时候加载一张图片，不然是黑的。  -->

    <video src="" poster="" controls width="800"></video>
    <br>
    <button>播放</button>
    <button>暂停</button>
    <button>切换</button>
    <br>
    <script>
        //获取视频节点
        var video = document.querySelector('video');
        //获取btn按钮dom节点
        var btns = document.querySelectorAll('button');
        //给按钮绑定事件
        //类数组对象转数组
        var arrList = Array.from(btns);
        //遍历数组
        arrList.forEach(function(item) {
            //设置点击事件
            item.onclick = function(event){
                console.log(event.target.innerText);
                //按钮的不同就是中间的字不同，事件源（按钮）dom元素中的文本内容
                var text = event.target.innerText;
                switch (text) {
                    case '播放':
                        //视频播放
                        video.play();
                        break;
                    case '暂停':
                        视频暂停
                        video.pause();
                        break;
                    case '切换':
                        //paused判断当前视频是否暂停   返回boolean值
                        if(video.paused){
                            //如果判断视频是暂停，则切换成播放
                            video.play();
                        }else{
                            //否则切换成暂停
                            video.pause();
                        }
                        break;
                    default:
                        break;
                }
            }
        })
    </script>
</body>

在video标签中有一些属性，有些属性是必须加的。

src="" 中间放视频的路径。

controls 写上这个属性会在视频的下方出现进度条，像下面的图一样，要不然没办法播放。

poster=" " 这个属性中可以放图片的地址，在还没播放视频的时候加载一张图片，不然是黑的，这个属性也可以不加，对视频播放没什么影响。

autoplay 代表自动播放。loop 代表循环播放。

还有一些方法：

play() 播放

pause() 暂停

currentTime 可以设置视频快进，后退

volume 调节视频音量大小

playbackRate 设置视频倍速播放

source，指定不同媒体来源：

        并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源。
       src    指播放媒体的URL地址
       type    媒体类型，属性值为播放文件的MIME类型，该属性值中的codes参数表示所使用的媒体的编码格式。

        <video id="video_1">
            <source src=" " type="video/ogg">
            <source src=" " type="video/ogg">
        </video>

3.新表单元素及属性

智能表单控件：

         email: 输入合法的邮箱地址
         url：输入合法的网址
         number：只能输入数字
         range：滑块
         color：拾色器
         date：显示日期
         month：显示月份
         week ：显示第几周
         time：显示时间

<body>
    <input type="email" class="email">
    <input type="number">
    <input type="date">
</body>

表单属性：

form属性：

autocomplete=on | off 自动完成
novalidate=true | false 是否关闭校验

input属性：

autofocus：自动获取焦点。

multiple：实现多选效果。

placeholder：占位符，信息提示。

required：必填项。

4.Canvas画布

canvas是H5中最受欢迎的功能，这个元素负责在页面中，设定一个区域，然后就可以通过JS动态地在这个区域中绘制图形，canvas元素最早由苹果公司推出，当时主要用在Dashboard微件中，很快H5加入了这个元素，主要浏览器也迅速开始支持它。

使用2D上下文提供的方法，可以绘制简单的2D图形，比如矩形，弧线和路径。2D上下文的坐标开始于canvas元素的左上角，原点坐标是(0,0).

用canvas元素绘制图形时，需要经过几道步骤：
(1) 取得canvas对象
       通过document.getElementById()等方法取得canvas对象。
(2) 取得上下文*(context)
       图形上下文是一个封装了很多绘图功能的对象。参数只能为”2d“
       var context = one.getContext("2d");
(3) 填充与绘制边框
       使用canvas元素绘制图形的时候，有两种方式：填充与绘制边框。填充是指填满图形内部；绘制边框是指不填充图形的内部，只绘制图形的边框。canvas元素结合使用者两种方式来绘制图形。
(4) 设定绘图样式
       在进行图形绘制的时候，首先要设定好绘图的样式，然后调用有关方法进行图形的绘制，所谓绘图的样式，主要是针对图形的颜色而言的。但不仅限于图形的颜色。
           fillStyle    填充的样式
           strokeStyle 图形边框的样式
(5) 指定线宽
       使用图形上下文对象lineWidth属性设置图形边框的宽度。
(6) 绘制矩形
       分别使用fileRect方法与strokeReck方法来填充矩形和绘制矩形边框
       context.fillRect(x,y,width,height);
       context.strokeRect(x,y,width,height);

<body>
    <canvas id="app" width="500" height="500"></canvas>
    <script>
        //1 获取canvas画布
        var app = document.querySelector('canvas');
        //2 获取上下文对象
        var context = app.getContext('2d');
        //3 绘制
        //3.1 设置绘制的样式
        context.fillStyle = 'teal';
        context.strokeStyle = 'orange';
        //3.2 执行绘制   fillRect(x轴坐标,y轴坐标，width,height)
        context.fillRect(10,10,100,100);
        //边框矩形   四个参数也是x  y轴坐标，width和height
        context.strokeRect(10,120,300,100);
    </script>
</body>

beginPath（）；开启新的图层，如果要在一个画布上画两个图形，在结束一个图形，开始另一个图形时要再一次开启新图层，否则会有一条线将两个图形连起来。

moveTo();落笔，参数为坐标。

lineTo();连线，参数为坐标。

stroke();描边。

<body>
    <canvas id="app" width="500" height="500"></canvas>
    <script>
        //1 获取canvas画布
        var app = document.querySelector('canvas');
        //2 获取画笔 获取上下文对象
        var context = app.getContext('2d');
        //3 绘制
        context.beginPath();
        //落笔  连线
        context.moveTo(200,100);
        context.lineTo(250,200);
        context.lineTo(150,200);
        //边框三角形样式
        context.lineStyle = 'teal';
            //lineWidth设置线宽  线宽  单位是像素
        context.lineWidth = '5';
        context.closePath();
        context.stroke();
    </script>
</body>

5.获取页面元素及类名操作和自定义属性

获取页面元素：

document.querySelector("选择器")；
选择器：可以是css中的任意一种选择器，其中写id值或class值，甚至是标签名都可以，之前获取id值，class值都有不同的方法。通过该选择器只能选中第一个元素。

document.querySelectorAll("选择器");
与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素。

Dom.classList.add("类名"): 给当前dom元素添加类样式

Dom.classList.remove("类名"); 给当前dom元素移除类样式

classList.contains("类名"); 检测是否包含类样式

classList.toggle("active"); 切换类样式（有就删除，没有就添加）

自定义属性：

data-自定义属性名
在标签中，以data-自定义名称

   1. 获取自定义属性 Dom.dataset 返回的是一个对象
   Dom.dataset.属性名或者 Dom.dataset[属性名]
       属性名是不包含data-

2. 设置自定义属性
Dom.dataset.自定义属性名=值或者 Dom.dataset[自定义属性名]=值；

<body>
    <button id="btn" data-id="1">删除</button>
    <script>
        //获取节点
        var btn =  document.querySelector('#btn');
        //输出这个自定义属性
        console.log(btn.dataset.id);
    </script>
</body>

设置一个自定义属性，data-id ，值为1 ，获取节点，在控制台输出自定义属性为1。

6.Web存储

传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。

    
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
    <script>
        //1   cookie  7天后过期  在代码中引入cookie的js文件才能使用
        var cookie = Cookies.set('name','this is cookie',{expires:7});
        //移除cookie
        // Cookies.remove('name');
        //获取
        console.log(Cookies.get('name'));

        //2  会话存储
        sessionStorage.setItem('name','123456');
        //移除
        // sessionStorage.removeItem('name');
        //获取
        console.log(sessionStorage.getItem('name'));

        //3   本地存储
        localStorage.setItem('username', 'name');
        localStorage.setItem('password', '123321');

        //清除username
        // localStorage.removeItem('username');
        
        //clear()会将value值清理掉
        // localStorage.clear();
        console.log(localStorage.getItem('username'));
    </script>

控制台输出的内容：

在浏览器的存储中也会有显示：

7.获取地理位置

获取一次当前位置
window.navigator.geolocation.getCurrentPosition(success,error);

1. coords.latitude 维度
2. coords.longitude 经度

实时获取当前位置
window.navigator.geolocation.watchPosition(success,error);

 window.navigator.geolocation.getCurrentPosition((position) => {
        console.log(position);
        console.log('东经', position.coords.longitude);
        console.log('北纬', position.coords.latitude);
      })

获取地理位置坐标，固定的方法。浏览器在获取地理位置坐标时还需要授予权限。

掉头发类型的选手

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

前言本文关于HTML5其中一些更新内容的介绍，希望能学到新的知识。HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！多了一些新的语义标签和表单元素，例如video 标签和 audio 及 canvas 标记。跨平台性非常强大，但pc端浏览器支持不是特别友好，造成用户体验不佳。1.网页布局结构标签 <header></header> 头部。 <footer>&l...
复制链接

扫一扫