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

目录
相关文章
|
1月前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
27 0
|
1天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
10 1
HTML5 Canvas发光Loading源码
|
2天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
8 1
Canvas实现超酷Loading动画HTML代码
|
10天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
10天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
10天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
10天前
|
移动开发 前端开发 HTML5
【专栏:HTML 基础篇】HTML 入门:从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML,了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构,如文档类型声明、根标签、头部和主体,以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单,帮助读者构建第一个网页。同时强调,结合CSS可实现网页的美化。
|
15天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
26 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
15天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
36 0
|
22天前
|
移动开发 搜索推荐 前端开发
HTML、XHTML和HTML5系列对比
HTML、XHTML和HTML5系列对比