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

简介: 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>


HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)(下):https://developer.aliyun.com/article/1420268

目录
打赏
0
0
0
0
56
分享
相关文章
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
126 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
65 34
HTML5 SVG实现可爱的小鸟卡通动画3D特效
HTML5 SVG实现可爱的小鸟卡通动画
62 29
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
60 29
|
1月前
html5+svg太空人404动画模板源码
html5+svg太空人404动画模板源码
44 17
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
18 1
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
54 5
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
40 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码

热门文章

最新文章