整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML5中，可以使用MathML（Mathematical Markup Language）来显示数学公式。MathML是一种XML语言，它允许在HTML文档中嵌入数学公式。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>MathML Example</title>
</head>
<body>
<p>展示简单的数学公式：</p>
<math>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
<mo>=</mo>
<mi>z</mi>
</mrow>
</math>
</body>
</html>
网页展示效果如下
展示简单的数学公式：
x+y=z
在上面的例子中，使用`<math>`标签来包含数学公式，使用`<mrow>`标签来定义公式的行，使用`<mi>`标签来定义变量，使用`<mo>`标签来定义运算符。可以根据需要添加其他标签和属性来创建更复杂的数学公式。
除了MathML之外，还可使用JavaScript库（例如MathJax）来在HTML5中显示数学公式。这些库允许使用LaTeX语法（LaTeX 常用语法汇总 - 知乎）来编写数学公式，并将其转换为HTML格式。这种方法更加灵活和易于使用，但需要加载额外的JavaScript文件。
希望这可以以此为开始，在HTML5中学习使用数学公式。
avaScript 资源大全内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等
管理着 JavaScript 库，并提供读取和打包它们的工具。
JavaScript 的模块或加载系统。
模板引擎允许您执行字符串插值。
Flux是Facebook用来构建客户端Web应用的应用架构
Web 数据可视化工具
也有一些很棒的收费库，如 amchart、plotly 和 highchart。
处理文件的库。
函数式编程库扩展了 JavaScript 的能力。
响应式程序库扩展了 JavaScript 的能力。
数据结构库用于构建一个更复杂的应用。
日期库。
字符串库。
本地化和国际化 JavaScript 库
指示加载状态的库。
除了上述这些库，还有收藏在 Codepen 的，另外还有 Ajaxload，Preloaders 和 CSSLoad 这些生成器。
就在我正准备录制下个系列视频的时候，发现何方的个人小站-Markdown 工具页面下面出现了大面积的空白（如下图 1）。 这是什么情况？我第一反应可能是我忘了给代码或预览的窗口添加 overflow: auto 导致元素的整个长度直接推在了元素流里面。
图1 - 下面出现大面积空白
但当我看了代码和界面以后发现是对的（如下图 2），并没有忘记添加 overflow: auto。而且我查看 body 元素的时候发现高度是正常的，并没有包含下面空白区域的高度。这时候我感觉可能是 Edge 浏览器的 Bug。于是我试了 Chrome、Firefox、Safari 以及 Linux 和 Windows 中的各种浏览器，都能复现这个问题。确定了不是浏览器的 Bug。
图2 - overflow: auto
于是我又查看了 html 元素的高度，发现在 html 高度竟然是包含了空白区域高度的（如下图 3）。到这个时候我就确定一定是有什么元素浮动到了元素流里面，而且这个元素一定是不可见或非常小的，这就只能逐个排查可能的元素。
图3 - html 高度
在我排查过程中发现如果把预览关掉或不预览 HTML 渲染结果（见下图 4），只预览 HTML 代码的情况下是没有空白问题的。这就可以确定是 Markdown 的渲染结果出现了问题。但渲染结果是 Markdown 解析器生成的，这又增大了排查的难度。
图4 - 关闭预览
这个时候我突然想起来，浏览器的开发都工具是可以查看页面 3D 结构的。在复合图层里面并没有看出什么问题(见下图 5)。但当我查看 3D DOM 结构（见下图 6）并把视频拉到最下面是发现了问题——在最下面出现了几条东西。点击 3D 视图可以跳转到对应的 dom 结果里面，原来导致页面空白的罪魁祸首是公式（见下图 7）。
图5 - 3D视图复合图层
图6 - DOM结构
我在 Markdown 生成 HTML 的时候使用的是 katex 来渲染公式，默认情况下它会生成两套 DOM 结构，一套 mathml 用于读屏软件或搜索引擎等识别这是公式、另一套是 html 它用于渲染显示我们看到的公式。
为了不让 mathml 和 html 同时显示出现，katex 把 mathml 设置成了 position: absolute 且只有一个像素大小。
.katex-mathml { clip: rect(1px, 1px, 1px, 1px); border: 0; height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}图7 - 公式DOM结构
问题就出在了 position: absolute 上面，因为我们的预览容器是 overflow: auto 的。在可滚动的容器里面如果存在绝对定位的元素，这个元素就会脱离容器出现在主元素流里面。也就是说如果容器没有溢出滚动的时候这个元素该出现在哪儿，在有溢出滚动的时候它还在那儿。这就造成了它前面出现的空白。
知道了问题原因也就好解决了，三种改动较小的方案1：
*请认真填写需求信息，我们会在24小时内与您取得联系。
