【温故而知新】HTML5新标签canvas、MathML

文章目录

  • 一、概念
  • 二、新标签
  • 三、canvas
  • 四、SVG
  • 五、MathML

一、概念

HTML5是HTML的最新版本，它引入了许多新的元素和功能，以适应现代网页开发的需求。以下是HTML5的一些主要特点：

  1. 新增语义元素：HTML5引入了许多新的语义元素，如<header>、<footer>、<article>、<section>等，这些元素有助于提高网页的结构化和可访问性。
  2. 媒体支持：HTML5引入了<audio>和`元素，使得开发者可以在网页上直接嵌入音频和视频内容，而不需要依赖第三方插件。
  3. Canvas绘图：HTML5引入了<canvas>元素，使得开发者可以使用JavaScript在网页上绘制图形和动画。
  4. 语义化标签：HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如，使用<nav>元素表示导航链接，使用<article>元素表示独立的内容等。
  5. 交互性：HTML5提供了更多的API和事件处理程序，使得开发者可以创建更加交互式的网页和应用。例如，拖放功能、文件上传和下载、地理定位等。
  6. 离线和存储：HTML5提供了离线存储和会话存储功能，使得开发者可以在用户的设备上存储数据，以便在离线时使用。
  7. 更好的表单控制：HTML5改进了表单元素和输入类型，使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具，它为开发者提供了更多的功能和灵活性，使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

二、新标签

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>定义命令按钮，比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框，比如提示框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>定义
元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域
<mark>定义带有记号的文本。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt>定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>定义文档中的节（section、区段）。
<time>定义日期或时间。
<wbr>规定在文本中的何处适合添加换行符。
<audio>定义音频内容
<video>定义视频（video 或者 movie）
<source>定义多媒体资源 <video> 和 <audio>
<embed>定义嵌入的内容，比如插件。
<track>为诸如<video> 和 <audio>元素之类的媒介规定外部文本轨道。
<datalist>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output>定义不同类型的输出，比如脚本的输出。
<canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

三、canvas

Canvas是HTML5的一个功能，它是一个可以用于绘制图形、动画和游戏等的元素。以下是一个简单的Canvas案例代码，可以在页面上绘制一个矩形：

<!DOCTYPE html>
<html><head><title>Canvas Example</title><style>#canvas {border: 1px solid black;}</style></head><body><canvas id="canvas" width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// 设置绘制矩形的颜色和大小ctx.fillStyle = "red";ctx.fillRect(50, 50, 200, 100);// 在矩形上绘制文字ctx.font = "20px Arial";ctx.fillStyle = "white";ctx.fillText("Hello, Canvas!", 70, 100);</script></body>
</html>

在这个例子中，我们首先创建了一个Canvas元素，并设置了它的宽度和高度。然后通过JavaScript获取到这个Canvas元素的上下文（context），并设置了绘制矩形的颜色和大小，使用fillRect()方法绘制了一个红色的矩形。最后，使用fillText()方法在矩形上绘制了一段文字。

四、SVG

SVG（Scalable Vector Graphics，可伸缩矢量图形）是一种基于XML语法的矢量图形格式，它可以用于在网页上绘制丰富的矢量图形和动画。以下是一个简单的SVG案例代码，可以在页面上绘制一个圆形：

<!DOCTYPE html>
<html><head><title>SVG Example</title></head><body><svg width="400" height="300"><circle cx="200" cy="150" r="100" fill="red" /><text x="180" y="160" fill="white">Hello, SVG!</text></svg></body>
</html>

在这个例子中，我们使用了<svg>标签创建了一个SVG元素，并设置了它的宽度和高度。在SVG元素中，我们使用<circle>标签创建了一个圆形，cx和cy属性用于设置圆心的坐标，r属性用于设置半径，fill属性用于设置填充颜色。然后，使用<text>标签创建了一段文字，x和y属性用于设置文字的起始位置，fill属性用于设置文字的颜色。

SVG的语法相对简单，可以通过直接在HTML文件中嵌入SVG代码来绘制图形。除了基本的图形元素，SVG还支持路径、图像、渐变等更多高级特性，可以实现更复杂的图形和动画效果。

五、MathML

MathML（Mathematical Markup Language，数学标记语言）是一种基于XML语法的数学标记语言，用于在网页中表示和展示数学公式和符号。以下是一个简单的MathML案例代码，可以在页面上显示一个简单的数学公式：

<!DOCTYPE html>
<html><head><title>MathML Example</title></head><body><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>x</mi><mo>+</mo><mi>y</mi></mrow><mo>=</mo><mn>5</mn></math></body>
</html>

在这个例子中，我们使用了<math>标签来创建一个MathML元素，并在其中使用了一系列MathML标签来表示数学公式。<mrow>标签用于创建一个行，并在其中使用<mi>标签表示变量或标识符，<mo>标签表示运算符，<mn>标签表示数字。通过组合这些标签，我们可以构建出复杂的数学公式。

MathML也支持更多的数学元素和属性，用于表示更复杂的数学表达式和结构。在支持MathML的浏览器中，MathML代码会被解析和渲染成可视化的数学公式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/626661.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql 5.7 函数汇总

mysql 5.7 函数汇总

mysql 5.7 函数汇总&#xff0c;以下内容由chatgpt中文网 动态生成,助力开发找我 MySQL 5.7 提供了许多内置函数&#xff0c;用于各种数据库操作和数据处理。以下是一些常用的 MySQL 5.7 函数的汇总&#xff1a;字符串函数&#xff1a;CONCAT(): 连接两个或多个字符串。 GROUP…
阅读更多...
Ubuntu开机自动挂载硬盘

Ubuntu开机自动挂载硬盘

前言&#xff1a; 因为我的电脑是WIN10 Ubuntu18.04双系统&#xff0c;且两个系统都装在C盘上&#xff0c;而D盘作为数据和代码存储盘&#xff0c;经常会开机就被访问&#xff0c;例如上一次关机前用VS Code访问D盘代码&#xff0c;然后下一次开机的时候打开VSCode发现打不开…
阅读更多...
ChatGPT 和文心一言哪个更好用？

ChatGPT 和文心一言哪个更好用？

文心一言的答案&#xff1a; 在人工智能技术的不断发展下&#xff0c;聊天机器人已经成为我们日常生活和工作中不可或缺的一部分。其中&#xff0c;ChatGPT和文心一言是两款备受关注的聊天机器人&#xff0c;它们各自具有独特的优点和适用场景。本文将就这两个聊天机器人进行简…
阅读更多...
在window宿主机访问WSL2内部署的服务

在window宿主机访问WSL2内部署的服务

目录 在window宿主机访问 WSL2 内部署的服务&#xff08;其他&#xff09;在 WSL2 内查看 windows&#xff08;宿主机&#xff09;的IP地址 windows内置了Linux系统&#xff08;WSL&#xff09;。 在window宿主机访问 WSL2 内部署的服务 在WSL下部署的项目&#xff0c;比如端口…
阅读更多...
C#基础-资源清理-终结器与IDisposable

C#基础-资源清理-终结器与IDisposable

内容借鉴-C#8.0本质论 终结器 终结器 (finalizer) 允许程序员写代码来清理类的资源。与使用new操作符显式调用构造函数不同&#xff0c;终结器不能从代码中显式调用。没有和new对应的操作符 (比如像delete这样的操作符)。相反&#xff0c;是垃圾回收器负责为对象实例调用终结…
阅读更多...
使用git工具把项目文件上传到github 的操作

使用git工具把项目文件上传到github 的操作

先打开git-bash进入操作界面 cd D: 进入d盘 mkdir myrepo 创建文件 cd myrepo 进入本地仓库文件 git init 初始仓库 &#xff08;rm -rf .git 取消 git init 命令。&#xff09; git add . git status &#xff08;显示你修改的文件具体是哪些&#xff0…
阅读更多...
智能分析网关V4基于AI视频智能分析技术的周界安全防范方案

智能分析网关V4基于AI视频智能分析技术的周界安全防范方案

一、背景分析 随着科技的不断进步&#xff0c;AI视频智能检测技术已经成为周界安全防范的一种重要手段。A智能分析网关V4基于深度学习和计算机视觉技术&#xff0c;可以通过多种AI周界防范算法&#xff0c;实时、精准地监测人员入侵行为&#xff0c;及时发现异常情况并发出警报…
阅读更多...
text expressing

text expressing

文章目录 前言文本表示1文本特征概念介绍2 文本特征选择方法3 文本表示方法 text expressing3.1 One Hot(独热)编码3.2 TF-IDF 模型3.3 Word2Vec 参考链接&#xff1a; 前言 文本是一种非结构化的数据信息&#xff0c;是不可以直接被计算的。 文本表示的作用就是将这些非结构…
阅读更多...
解密SHFileOperation

解密SHFileOperation

解密SHFileOperation 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在今天的文章中&#xff0c;我们将揭开Windows文件操作的神秘面纱&#xff0c;介绍一款强大而神…
阅读更多...
powershell的help

powershell的help

打开win10 的powershell窗口&#xff0c;输入help命令&#xff0c;可以得到如下说明&#xff1a; 有了help系统&#xff0c;可以方便地了解关于powershell的详细说明。
阅读更多...
文献阅读(速读)：Automating Deep Neural Network Model Selection for Edge Inference

文献阅读(速读)：Automating Deep Neural Network Model Selection for Edge Inference

目录 论文简介动机&#xff1a;为什么作者想要解决这个问题&#xff1f;贡献&#xff1a;作者在这篇论文中完成了什么工作(创新点)&#xff1f;规划&#xff1a;他们如何完成工作&#xff1f;自己的看法(作者如何得到的创新思路) 论文简介 作者 Bingqian Lu、Jianyi Yang、Lydi…
阅读更多...
cesium设置近地天空盒 天空会倾斜

cesium设置近地天空盒 天空会倾斜

上篇文章讲解了如何设置近地天空盒&#xff0c;效果出来了还是发现天空是斜的 https://blog.csdn.net/m0_63701303/article/details/135618244 效果&#xff1a; 这里需要修改Cesium.skyBox的代码&#xff0c;代码如下直接全部复制组件内调用即可 skybox_nearground.js&…
阅读更多...
申请代码签名证书有什么需要注意的地方？

申请代码签名证书有什么需要注意的地方？

在申请代码签名证书之前&#xff0c;开发者需要注意一些重要的地方&#xff0c;以确保申请顺利进行并保证证书的有效性和安全性。 首先&#xff0c;选择可信赖的认证机构&#xff08;CA&#xff09;是非常重要的。认证机构是颁发代码签名证书的机构&#xff0c;其信誉和声誉直接…
阅读更多...
《GreenPlum系列》GreenPlum初级教程-04GreenPlum数据类型

《GreenPlum系列》GreenPlum初级教程-04GreenPlum数据类型

第四章 GreenPlum数据类型 1.基本数据类型 1.1 数值类型 类型名称存储空间描述范围smallint2字节小范围整数-32768 ~ 32767integer4字节常用的整数-2147483648~2147483647bigint8字节大范围的整数-9223372036 854 ~9223372036854decimal变长用户声明精度&#xff0c;精确无限…
阅读更多...
分布式光伏运维平台在提高光伏电站发电效率解决方案

分布式光伏运维平台在提高光伏电站发电效率解决方案

摘要&#xff1a;伴随着能源危机和环境恶化问题的日益加重&#xff0c;科技工作者进一步加大对新能源的开发和利用。太阳能光伏发电作为新型清洁能源的主力军&#xff0c;在实际生产生活中得到了广泛的应用。然而&#xff0c;光伏发电效率偏低&#xff0c;成为制约光伏发电发展…
阅读更多...
机器学习算法实战案例：LSTM实现单变量滚动风电预测

机器学习算法实战案例：LSTM实现单变量滚动风电预测

文章目录 1 数据处理1.1 数据集简介1.2 数据集处理 2 模型训练与预测2.1 模型训练2.2 模型滚动预测2.3 结果可视化 答疑&技术交流机器学习算法实战案例系列 1 数据处理 1.1 数据集简介 实验数据集采用数据集5&#xff1a;风电机组运行数据集&#xff0c;包括风速、风向、…
阅读更多...
【软件测试学习笔记3】缺陷管理

【软件测试学习笔记3】缺陷管理

执行结果和预期结果不一样&#xff0c;就叫缺陷&#xff0c;俗称bug 1.软件缺陷判定标准 少功能&#xff1a;软件未实现需求&#xff08;规格&#xff09;说明书中明确要求的功能 功能错误&#xff1a;软件出现了需求&#xff08;规格&#xff09;说明书中指明不应该出现的错…
阅读更多...
cookie、Web Storage

cookie、Web Storage

前端知识汇编 1. cookie1.1 cookie的限制1.2 cookie的构成1.3 JavaScript中的cookie1.4 子cookie1.5 使用cookie的注意事项 2. Web Storage2.1 Storage类型2.2 sessionStorage对象2.3 localStorage对象2.4 存储事件2.5 限制 1. cookie cookie是客户端与服务器端进行会话时使用…
阅读更多...
自写代码来理解 get_global_id 和 get_global_size

自写代码来理解 get_global_id 和 get_global_size

<2022-01-24 周一> 《OpenCL编程指南》第三章 自写代码来理解get_global_id和get_global_size 使用本书第三章中关于输入信号卷积的代码来进行理解&#xff0c;见随书代码“src/Chapter_3/OpenCLConvolution”&#xff0c;附代码如下&#xff1a; // // Book: O…
阅读更多...
webpack打包可视化分析工具:webpack-bundle-analyzer

webpack打包可视化分析工具:webpack-bundle-analyzer

在对webpack项目进行优化的时候,可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构,能快速定位需要优化的地方,对开发者非常友好 下载安装 下载依赖包 npm i webpack-bundle-analyzer 使用 const BundleAnalyzerPlugin require(webpack-bundle-analy…
阅读更多...
最新文章

Copyright @ 2022~2023