整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
