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

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

2024-02-02 75

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

HTML5内联SVG

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

<body>
    <svg  id = "circle"  height = "200" xmlns="http://www.w3.org/2000/svg" version="1.1" >
        <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  />
  </svg>
</body>

SVG_矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
        <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;"/>
    </svg>

SVG 与 Canvas两者间的区别

HTML5_MathML

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

MathML 实现一元二次方程

<math xmlns="http://www.w3.org/1998/Math/MathML">
        <!-- mrow:包裹一个或多个表达式 -->
        <mrow>
            <mrow>
                <!-- msup：包裹上标的表达式 -->
                <msup>
                    <!-- mi:包裹字符 -->
                    <mi>x</mi>
                    <!-- mn:包裹数字 -->
                    <mn>2</mn>
                </msup>
                <!-- mo:包裹运算符 -->
                <mo>+</mo>
                <mrow>
                    <mn>4</mn>
                    <mi>x</mi>
                </mrow>
                <mo>+</mo>
                <mn>4</mn>
            </mrow>
            <mo>=</mo>
            <mn>0</mn>
        </mrow>
    </math>

HTML5_拖放（Drag 和 Drop）

拖放：即抓取对象以后拖到另一个位置。在 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 ：当元素在放置区被放置时触发。

<h5>放置区域</h5>
<div style="width:200px;height:200px;border:3px solid blue" ondragover="dragover(event)" ondrop="drop(event)">
</div>

// 当元素或选中的文本被拖到一个放置区上时触发
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存储

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

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

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

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

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

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

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)
       }

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

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介绍

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

1、根元素字体大小

html{
 font-size:16px
}

2、设置其它元素大小

#box{
    width:10rem
}

JS设置根元素字体大小

使用响应式是不能为所有设备全适配，但是用 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应用

<style>
        html,
        body {
            width: 100%;
            height: 100%;
       }
        html,
        body,
        div,
        p,
        img,
        input {
            margin: 0;
            padding: 0
       }
        .header {
            width: 100%;
            height: 1.5rem;
            padding: 0rem 5.8rem;
            box-sizing: border-box;
            background-color: #eee;
            display: flex;
            align-items: center;
       }
        .left {
            width: 1.68rem;
            height: 0.63rem;
            line-height: 0.63rem;
       }
        .center {
            flex: 1;
            padding: 0.1rem 0.3rem;
            box-sizing: border-box;
            height: 0.4rem;
       }
        .center input {
            display: block;
            width: 100%;
            height: 0.4rem;
            border-radius: 0.4rem;
            border: 0.02rem solid #ff5000
       }
        input:focus {
            outline: none;
       }
        .right {
            width: 0.8rem;
            height: 0.8rem;
            line-height: 0.8rem;
       }
        img{
            width: 100%;
            height: 100%;
       }
   </style>

<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>

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

HTML5内联SVG

SVG_矩形

SVG 与 Canvas两者间的区别

HTML5_MathML

HTML5_拖放（Drag 和 Drop）

HTML5_Web存储

HTML5_Web Workers

rem介绍

JS设置根元素字体大小

rem应用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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

HTML5内联SVG

SVG_矩形

SVG 与 Canvas两者间的区别

HTML5_MathML

HTML5_拖放（Drag 和 Drop）

HTML5_Web存储

HTML5_Web Workers

rem介绍

JS设置根元素字体大小

rem应用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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