javascript改变文本内容产生的文本内容大小问题

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
                body{background-color:white;}
                h1,p,h2{color:blue;background-color:#eeeeee;}
            </style>

        </head>
        <body>
            <h1 id="html_text">HTML Title</h1>
            <p>HTML write</p>

            <button type="button" onclick="alert('test')">Click please!</button>
            <p align="center">
                <button type="button" onclick="change_title()">ChangeTitle</button>
            </p>
            <script trype="text/javascript">

                function change_title(){
                    x=document.getElementById("html_text");
                    x.innerHTML="<h2>JavaScript Title</h2>";
                    //此处是无心之举误写了标签<h2>原来的目的是只改变前面title <h1>的文本内容，可是运行结果不理解为什么文本内容字体变大了？？？求各位大神解惑，效果图附上
                }

                document.write("<p>Javascript write</p>");

            </script>   
        </body>
    </html>

点击changetitle按钮前：
图片说明

点击后：图片说明

应该是做了两遍放大，点击后的内容就是h1把h2包容到里面了，h2有自己的放大，h1还会继续放大

http://www.divcss5.com/html/h328.shtml 关于标签还需要去仔细看一看知道每一个标签是干什么的