HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别、HTML5_MathML 】(三)-全面详解（学习总结---从入门到深化）

雨点打透心脏的1/2处 2024-02-17 10:56 15阅读 0赞

### ![412e7ddc517e46b893bfbda815b27913.gif][] ###

**目录**

HTML5内联SVG

SVG\_矩形

SVG 与 Canvas两者间的区别

HTML5\_MathML

HTML5\_拖放（Drag 和 Drop）

HTML5\_Web存储

HTML5\_Web Workers

rem介绍

JS设置根元素字体大小

rem应用

--------------------

### HTML5内联SVG ###

![5913d2547a224dc39d7c82f783d1e29d.png][]

在 HTML5 中，我们能够将 **SVG** 元素直接嵌入 HTML 页面中：

### SVG\_矩形 ###

![57797d49ce094153a3b19cacfce57e0d.png][]

![030bc2cdbccd478e871bb90c139ff4a1.png][]

###  ###

### SVG 与 Canvas两者间的区别 ###

![526a0a71039246308a19aaa25e49d1ae.png][]

![7f2ad30dea3f4eb7a9f27874984e5ccc.png][]

![39788c1d314b4acf84057b60cbea063e.png][]

### HTML5\_MathML ###

![9e6978aa75d44b93be262fee05f8ad7d.png][]

**MathML** 是数学标记语言，是一种基于 **XML** 的标准，用来书写数学符号和公式的置标语言。 **HTML5** 可以在文档中使用 **MathML** 元素 ，对应的标签是 ... 。

![62e8e3fb0c7748d3bbff307c85b45e53.png][]

**MathML** 实现一元二次方程

![c2cf10e2d8aa441081356bc12703a2ca.png][]

### HTML5\_拖放（Drag 和 Drop） ###

![562d17ba06384040a5d430d8d22bb8f7.png][]

**拖放** ：即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1、定义可拖拽元素

添加 draggable 属性

true ，表示元素可以被拖拽

false ，表示元素不可以被拖拽

添加事件处理程序属性 ondragstart

<p id="con" draggable="true" ondragstart="dragstart(event)">
         我是可拖拽内容
    </p>
    <script>
         function dragstart(e){
             console.log(e)//打印事件对象
         }
    </script>

2、定义拖拽数据 每个 **drag event** （拖拽事件对象）都有一个 dataTransfer 属性，它持有 拖拽数据。这个属性也有管理拖拽数据的方法。

**setData(数据类型，数据值)** 方法可以为拖拽数据添加一个项。

function dragstart(e){
         console.log(e)//打印事件对象
         // 添加拖拽数据
         e.dataTransfer.setData("text/plain", e.target.innerText);
         }

3、定义拖拽图像

**dataTransfer.setDragImage(image, xOffset, yOffset)** 方法自定义一张图片。

// 定义拖拽图片
            var img = new Image();
            img.src = './拖放/assets/dog.jpg';
            function dragstart(e) {
              e.dataTransfer.setData("text/plain", e.target.innerText)
                console.log(e)
                // 设置拖拽图片
              e.dataTransfer.setDragImage(img, 10, 10);
           }

4、定义放置区 当拖拽一个对象到 HTML 元素中时，浏览器默认不会有任何响 应。 想要让一个元素变成可放置区，该元素必须设置 **ondragover** 和 **ondrop** 事件处理程序属性。

**ondragover** ：当元素被拖到放置区上时触发，这个时候可以去检验拖拽数据的类型，返回 false 则阻止放置，返回 true 则允许放置。

**ondrop** ：当元素在放置区被放置时触发。

// 当元素或选中的文本被拖到一个放置区上时触发
    function dragover(event) {
        event.preventDefault()
       // 检查类型
     if (event.dataTransfer.types.includes('text/plain')) {
                 return true//返回true则允许放置
         }
        return false//返回false则不允许放置
    }
    // 放置处理函数
    function drop(e) {
        e.preventDefault()
        // 获取拖拽的数据
        var data = e.dataTransfer.getData("text/plain");
          console.log(data)
           // 将拖拽过来的数据放置在放置区
           e.target.textContent = data;
    }

### HTML5\_Web存储 ###

![69b66bdc249c484cb53fd1f0454540e6.png][]

使用HTML5可以在本地客户端存储数据。

客户端存储数据的两个对象为：

**localStorage** \- 没有时间限制的数据存储

**sessionStorage** \- 针对一个 session 的数据存储

调用其中任一对象会创建 **Storage** 对象，在使用 **web** 存储前,应检查 浏览器是否支持 **localStorage** 和 **sessionStorage** :

if (typeof (Storage) !== "undefined") {
        // 是的! 支持 localStorage sessionStorage对象!
       // 写一些自己的逻辑
    }else {
       // 抱歉! 不支持 web 存储。
    }

![4057aefb3d274a6495ae7ffdd6faee73.png][]

if (typeof (Storage) !== "undefined") {
         //设置键值对，存储数据
                localStorage.setItem('name','itxiaotong')
                localStorage.setItem('thing','study')
         //通过键获取值
              console.log(localStorage.getItem('name'))
         //通过索引获取键名
              console.log(localStorage.key(1))
              setTimeout(function () {
        //清除数据
                    //   localStorage.removeItem('name')
                    localStorage.clear()
               }, 3000)
           }

![972cf63c92bc4843afa9adda5df60491.png][]

if (typeof (Storage) !== "undefined") {
         //设置键值对，存储数据
                sessionStorage.age=18
                console.log(sessionStorage.age)
                sessionStorage.setItem('name','itbaizhan')
                sessionStorage.setItem('thing', 'study')
         //通过键获取值
              console.log(sessionStorage.getItem('name'))
         //通过索引获取键名
              console.log(sessionStorage.key(1))
                setTimeout(function () {
       //清除数据
        sessionStorage.removeItem('name')
                    sessionStorage.clear()
               }, 3000)
           }

### HTML5\_Web Workers ###

![dd8ee36fada44c30a62e2a7928d69754.png][]

**Web Worker** 的作用，就是为 **JavaScript** 创造多线程环境，允许主线程 创建 **Worker** 线程 ，将一些任务分配给它运行。

在主线程运行的同时， **Worker** 线程 在后台运行，两者互不干扰。等到 **Worker** 线程 完成计算任务，再把结果返回给主线程。

1、检测浏览器是否支持 **Web Worker**

if(typeof(Worker)!=="undefined")
       {
       // 是的! Web worker 支持!
      
       }
      else
       {
       // //抱歉! Web Worker 不支持
       }

2、创建 **Web Worker 对象 ， new Worker(脚本文件)**

w = new Worker("./demo_workers.js");

3、定义 **worker** 具体任务

//demo_workers.js
    var i=0
    setInterval(function(){
        i=i+1
        postMessage(i)
    },1000)

4、**worker** 发送接收消息

发送消息， **postMessage(消息)**

//demo_workers.js
    var i = 0;
    setTimeout(function(){
        i=i+1
       postMessage(i)//使用postMessage(数据)发送
    },3000)

添加 **onmessage** 事件监听器，监听接收消息，访问 **event.data** 获得消息

w.onmessage = function (event) {
                    document.getElementById("result").innerHTML = event.data;
                   };

5、关闭 **worker**

**Worker** 线程无法读取本地文件，即不能打开本机的文件系统 （ file:// ），它所加载的脚本，必须来自网络。

###  ###

### rem介绍 ###

![7a28dc967e214ee6a4ceb89850d96566.png][]

**rem** ：它就是一个css单位，代表元素字体的大小；指相对于根元素 的字体大小的单位

1、根元素字体大小

html{
     font-size:16px
    }

2、设置其它元素大小

#box{
        width:10rem
    }

### JS设置根元素字体大小 ###

![36abc0530fc242368f553317ca33c391.png][]

使用响应式是不能为所有设备全适配，但是用 JS 是可以实现全适配。

window.onload = function () {
              document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px'
           }
            window.onresize = function () {
               document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px'
           }

###  ###

### rem应用 ###

![3432f8459356441a89d9f49b6fb9ffb0.png][]

<div class="header">
            <div class="left">
                <img src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png" alt="" >
            </div>
            <div class="center">
                <input type="text">
            </div>
            <div class="right">
                <img src="https://gw.alicdn.com/imgextra/i4/O1CN0 1ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png" alt="">
            </div>
        </div>
        <script>
            window.onload = function () {
               document.documentElement.style.fontSize = (document.documentElement.clientWidth / 1920) * 100 + 'px'
           }
            window.onresize = function () {
               document.documentElement.style.fontSize = (document.documentElement.clientWidth / 1920) * 100 + 'px'
           }
        </script>

[412e7ddc517e46b893bfbda815b27913.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a5a8e7ffd5d241e7b377ce02b980c268.png
[5913d2547a224dc39d7c82f783d1e29d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/921dcd52b05a494fbdf55cc73552e132.png
[57797d49ce094153a3b19cacfce57e0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/7c52d09054dd4b04a2eb6a8421bf0b1c.png
[030bc2cdbccd478e871bb90c139ff4a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/6b3e51c84eed4656a82c4888377488b0.png
[526a0a71039246308a19aaa25e49d1ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/f092d1a75357429b9c6f741551f3b91b.png
[7f2ad30dea3f4eb7a9f27874984e5ccc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/6d2abd6ce12c45ffaed1103b5dfe1221.png
[39788c1d314b4acf84057b60cbea063e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a557148458814ab6b87749d3d624c923.png
[9e6978aa75d44b93be262fee05f8ad7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/49237a6b82e84d55a3e25b2b1d0abbfa.png
[62e8e3fb0c7748d3bbff307c85b45e53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/b199e1c676474827a055998925dbfb73.png
[c2cf10e2d8aa441081356bc12703a2ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/8ed1130990744ab4b2fd5c895aeaaef1.png
[562d17ba06384040a5d430d8d22bb8f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/50a5a7a531494ccf96dfae1b1fcb9c89.png
[69b66bdc249c484cb53fd1f0454540e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/5e9e4163b738464997d62dcd1c7cb0f8.png
[4057aefb3d274a6495ae7ffdd6faee73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a586e52a68274e4587e300abd97ee3d4.png
[972cf63c92bc4843afa9adda5df60491.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c6ff90bb308746d2bb4fd00cfac5b121.png
[dd8ee36fada44c30a62e2a7928d69754.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c881980f92e04e05b43c973ade7fbdc8.png
[7a28dc967e214ee6a4ceb89850d96566.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/638e3327255447998c0bbce1a2c8711f.png
[36abc0530fc242368f553317ca33c391.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/bcaa51c1661f4945bcd3aaaf164a03c6.png
[3432f8459356441a89d9f49b6fb9ffb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/0d9dcaa206b14221bd34f2fbd36a040d.png