学习笔记（2）HTML5新特性

酒鼎

已于 2022-08-31 10:49:01 修改

阅读量2.2k

点赞数

分类专栏： HTML 文章标签： html5 前端 html

于 2022-03-16 11:27:19 首次发布

本文链接：https://blog.csdn.net/dugujiuding/article/details/123522063

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1，语义化标签

标签	说明
<header></header>	定义页面头部内容
<footer></footer>	定义页面尾部内容
<nav></nav>	设置页面导航菜单
<dialog></dialog>	定义对话框

2，增加表单input输入类型

输入类型	描述
color	选取颜色
date	从一个日期选择器选择一个日期
email	包含 e-mail 地址的输入域
month	选择一个月份
time	选择一个时间

3，视频和音频

<audio>标签定义声音，比如音乐或其他音频流。
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

<!--     control 属性供添加播放、暂停和音量控件。   -->
        <audio controls>
            <source src="home.ogg" type="audio/ogg">
            您的浏览器不支持 audio 标签。
        </audio>

<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。


<video width="520" height="300" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

4，Canvas绘图

canvas标签本身并不绘制图形，它只是图形容器，使用JavaScript脚本来绘制图形。

在HTML中，使用canvas标签创建一个画布，

width：设置画布宽度，
height：设置画布高度，
border：设置画布边框（默认无边框）

<div>
     <canvas id="myCanvas" width="300" height="200" style="border:1px solid black;"></canvas>
</div>

在js中，执行逻辑

drawCircle(){
       console.log('开始执行画圆')
       //拿到canvas元素
       let c =document.getElementById("myCanvas");
       //定义ctx对象，并执行对应的逻辑
       let ctx = c.getContext("2d");
       ctx.beginPath();
       ctx.arc(95,50,40,0,2*Math.PI);
       ctx.stroke();
},

在这里插入图片描述

5，SVG

SVG是指可伸缩的矢量图形，使用 XML 格式定义图像。

6，Geolocation Api

HTML5中，Geolocation（地理定位）用于定位用户的位置。

		<h1>welcome to 地理定位</h1>
        <div >
            <button @click="getLocation">定位</button>
            <div id="demo"></div>
        </div>

在js中调用Geolocation 接口，有2个参数，1是成功的回调函数，2是失败的回调函数。

         getLocation() {
                console.log('开始定位!!!')
                let x = document.getElementById("demo");

                if (navigator.geolocation) {
                    /* this.viewSuccess，成功的回调函数
                    * this.viewError，失败的回调函数  
                    * */
                    navigator.geolocation.getCurrentPosition(this.viewSuccess, this.viewError);
                } else {
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }
          },

成功的回调函数。返回数据有经度、纬度、响应的时间日期等信息。

返回数据	描述
coords.latitude	纬度
coords.longitude	经度
timestamp	响应的日期

viewSuccess(position) {
   console.log("定位成功");
   console.log(position)
   let x = document.getElementById("demo");

   x.innerHTML = "纬度（Latitude）: " + position.coords.latitude +
      "<br />经度（Longitude）: " + position.coords.longitude;
},

失败的回调函数，返回数据有编号、原因。

		viewError(error) {
                console.log("定位失败");
                console.log(error);
                let x = document.getElementById("demo");

                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        x.innerHTML = "用户禁止地理定位。"
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML = "无法获取当前位置。"
                        break;
                    case error.TIMEOUT:
                        x.innerHTML = "请求超时。"
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML = "未知错误。"
                        break;
                }
       	},

7，拖放API

拖放：抓取某物并拖入不同的位置。

1，设置元素可拖放，draggable设置为true，
2，设置ondragstart事件，规定元素被拖动时发生的事情，
3，设置 ondragover 事件，规定被拖动的数据被放置到何处，
4，当放开被拖数据时，会发生 ondrop 事件。

7.1，一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style >
        #rectangle{
            width: 200px;
            height: 100px;
            border: 2px solid black;
            margin-bottom: 20px;
        }

        #vue_logo{
            width: 100px;
            height: 60px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <h1>welcome to 拖放</h1>
    <p>请把vue图形logo拖放到矩形中</p>
    <div
            id="rectangle"
            ondrop="handleDrop(event)"
            ondragover="allowDrop(event)"
    >
    </div>
    <hr>
    <!--01，设置元素可拖放-->
    <img
            src="./HTML_logo.jpg"
            alt=""
            draggable="true"
            id="vue_logo"
            ondragstart="handleDragStart(event)"
    >
</body>
<script type="text/javascript">
    /**
     * 03， 设置 ondragover  事件，规定被拖动的数据被放置到何处
     * */

    function allowDrop(ev) {
        /**
         * 元素默认无法被放置到其他元素中。为了实现拖放，需要阻止元素的默认的处理方式，
         * 使用 preventDefault()方法完成：
         */
        ev.preventDefault();
    }


    /**
    * 02，ondragstart事件，规定元素被拖动时发生的事情
    * */
    function handleDragStart(ev) {
        /**
         * dataTransfer.setData()：设置被拖动数据的数据类型和值：
         * */
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    /**
    *   4，当放开被拖数据时，会发生 ondrop 事件。
    * */
    function handleDrop(ev)
    {
        ev.preventDefault();
        /**
         * 获得被拖放的数据,拿到被拖元素的id，
        * */
        var data=ev.dataTransfer.getData("Text");
        /***
         * 将被拖元素添加到目标元素中
         * */
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>

8，Web Worker

8.1，基础

JavaScript ，是单线程；同一个时间只能做一件事。
Web Worker允许 JavaScript 脚本创建多个线程。但是子线程完全受主线程控制。

8.2，限制

Web Worker无法访问DOM节点；
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；
Web Worker无法访问window、document；

8.3，一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web Worker</title>
</head>
<body>
    <h1>welcome to  web Worker</h1>

    <p>Count numbers: <output id="result"></output></p>
    <button onclick="startWorker()">开始 Worker</button>
    <button onclick="stopWorker()">停止 Worker</button>
    <br><br>

</body>
<script>
    var w;

    function startWorker() {
        /***
         * 1，检测浏览器是否支持webWorker
         * */
        if(typeof(Worker) !== "undefined") {
            /**
             * 3，检测是否存在 worker，如果不存在，创建一个新的 web worker 对象，然后运行 Web Worker文件中的代码：
             * */
            if(typeof(w) == "undefined") {
                w = new Worker("demo_workers.js");
            }
            /**
             * 3.2，向 web worker 添加一个 "onmessage" 事件监听器，将Web Worker文件中的数据，传送到当前页面中，
             * */
            w.onmessage = function(event) {
                document.getElementById("result").innerHTML = event.data;
            };
        } else {
            document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
        }
    }

    function stopWorker() {
        /**
         * 4，终止 Web Worker
         * */
        w.terminate();
        /**
         * 复用web worker
         * */
        w = undefined;
    }
</script>
</html>

Web Worker文件

/**
* 2，创建 Web Worker 文件
* */
var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

9，Web Storage

9.1，介绍

Web Storage，一种比 cookie 更好的本地存储方式。

9.2，使用

Web Storage存储数据的两个对象为：
localStorage ：窗口或浏览器关闭也一直保存，用于长久数据的保存，没有过期时间，直到手动去除。
sessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage对象（sessionStorage对象）常用的api。

// 存
localStorage.setItem("className", "red");
sessionStorage.setItem("className", "red");

//取
localStorage.getItem("className");
sessionStorage.getItem("className");

//删（1个）
localStorage.removeItem("className");

//删（所有）
localStorage.clear();

//得到某个索引的key
localStorage.key(index);

9.3，cookie，session，localStorage，sessionStorage的区别？

（1）cookie数据存放在客户的浏览器上，session数据放在服务器上，session中保存的是对象，cookie中保存的是字符串。
（2）存储大小限制不同，cookie数据不能超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作保存长久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

10，WebSocket

10.1，简介

$\color{#FF3030}{注意：以下内容转载于菜鸟教程}$

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

链接: 点击进入.

酒鼎

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习笔记（2）HTML5新特性

目录1，语义化标签2，增加表单input输入类型3，视频和音频4，Canvas绘图5，SVG绘图6，地理定位7，拖放API8，Web Worker9，Web Storage10，WebSocket输入类型描述color选取颜色date从一个日期选择器选择一个日期email包含 e-mail 地址的输入域month选择一个月...
复制链接

扫一扫