使用html代码写数学公式

最新推荐文章于 2024-04-27 21:55:17 发布

温馨冬阳

最新推荐文章于 2024-04-27 21:55:17 发布

阅读量5.1k

点赞数 5

分类专栏： html小实例文章标签： html

本文链接：https://blog.csdn.net/qq_42290216/article/details/117957440

版权

html小实例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们可能在项目中会遇到需要写入数学公式，会有些特殊的字符，今天和大家分享下我在项目中写入的一个数学公式实例

使用html代码写入数学公式：

效果是这样的：
在这里插入图片描述
上代码，大家有类似的可以参照一下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.26.20/antd.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.26.20/antd.min.js"></script>
</head>
<body>
    <style type="text/css">
        .formula_p{
            font-size: 16px;
            border-bottom: 1px dashed #ccc;
            padding:10px 0;
        }
    </style>
    <div id="app"></div>
    <script type="text/babel">  
        class MessageBox extends React.Component{  
            
        render = ()=>{  
            return ( 
                <div style={{width:'90%',margin:'45px auto 0'}}>
                    <div>
                        <div className='formula_p' style={{display:'flex'}}>
                            <div>&tau; = &nbsp;</div>
                            <div>
                                <div style={{fontSize:'16px',marginTop:'5px'}}>
                                    <div style={{lineHeight:'12px'}}>&sum;&nbsp;sgn (e<sub>j</sub>-e<sub>i</sub>)</div>
                                    <div style={{fontSize:'10px'}}>i&lt;j</div>
                                </div>
                            </div>
                        </div>
                         <div className='formula_p'  style={{display:'flex',alignItems:'center'}}>
                            <div>w<sub>m</sub> = &nbsp;</div>
                            <div>
                                <div style={{textAlign:'center'}}>a<sub>1</sub></div>
                                <div style={{borderTop:'1px solid black',textAlign:'center'}}>
                                    <div style={{textAlign:'center'}}>a<sub>m</sub></div>
                                </div>
                            </div>
                        </div>
                        <div className='formula_p' style={{display:'flex',alignItems:'center'}}>
                            <div>d<sub>ij</sub>= </div>
                            <div>
                                <span style={{fontSize:'30px'}}>√</span>
                                <div style={{borderTop:'1px #999 solid',display:'inline-block',verticalAlign:'top',marginTop:'2px'}}>
                                    <div style={{display:'flex',alignItems:'center'}}>
                                        <div style={{display:'flex',alignItems:'center'}}>
                                            <div style={{fontSize:'24px'}}>( </div>
                                            <div>
                                                <div style={{textAlign:'center'}}>a<sub>j</sub>-a<sub>i</sub></div>
                                                <div style={{borderTop:'1px solid black',textAlign:'center'}}>
                                                    <div style={{textAlign:'center'}}>a<sub>n</sub>-a<sub>1</sub></div>
                                                </div>
                                            </div>
                                            <div><span style={{fontSize:'24px'}}> )</span><sup>2</sup>+</div>
                                        </div>
                                        <div style={{display:'flex',alignItems:'center'}}>
                                            <div style={{fontSize:'24px'}}>( </div>
                                            <div>
                                                <div style={{textAlign:'center'}}>e<sub>j</sub>-e<sub>i</sub></div>
                                                <div style={{borderTop:'1px solid black',textAlign:'center'}}>
                                                    <div style={{textAlign:'center'}}>max<sub>k</sub>(e<sub>k</sub>)-min<sub>k</sub>(e<sub>k</sub>)</div>
                                                </div>
                                            </div>
                                            <div><span style={{fontSize:'24px'}}> )</span><sup>2</sup></div>
                                        </div>
                                    </div>
                                </div>
                             </div>
                        </div>
                        <div className='formula_p' style={{display:'flex'}}>
                            <div>s = </div>
                            <div>
                                <div style={{fontSize:'16px',marginTop:'5px'}}>
                                    <div style={{lineHeight:'12px'}}>&sum;&nbsp;w<sub>i</sub>w<sub>j</sub>d<sub>ij</sub> &middot; sgn (e<sub>j</sub>-e<sub>i</sub>)</div>
                                    <div style={{fontSize:'10px'}}>i&lt;j</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            )  
            }  
        }
        ReactDOM.render( <MessageBox/>,document.getElementById('app'))
    </script>
</body>

附上一个我找到的超实用链接：各种计算公式符号和特殊符号的网页HTML代码

温馨冬阳

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
使用html代码写数学公式

我们可能在项目中会遇到需要写入数学公式，会有些特殊的字符，今天和大家分享下我在项目中写入的一个数学公式实例使用html代码写入数学公式：效果是这样的：上代码，大家有类似的可以参照一下：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title></title> <script crossorigin src="https://un
复制链接

扫一扫