HTML资料的执行顺序(和javascript混合时)
日期：2014-05-17 浏览次数：20580 次
HTML在浏览器端是解释执行的,这在另一方面告诉我们代码是顺序的读取下来的.
我在IE,FireFox分别做过实验:
实验1.(保存为test1.html)
实验的HTML主要代码块是:
<body onload="fun1">
<form action="test1.html" method="get" onsubmit="fun3()">
<input type="text" name="text1" value="text" />
<script type="text/javascript">
window.alert("body中的一个窗口");
function fun1()
{
window.alert("载入中调用的窗口");
}
function fun2()
{
window.alert("普通按钮弹出的窗口");
}
function fun3()
{
window.alert("提交表单时弹出的窗口");
}
</script>
<input type="button" name="btn" value="button1" onclick="fun2()" />
<input type="submit" name="submit" value="submit1" />
</form>
</body>
测试结果是:1 显示输入文本框
????????????????? 2 显示弹出窗口 "body中的一个窗口"
????????????????? 3 确定弹出窗口后显示另外两个按钮
????????????????? 4 调用onload事件显示弹出窗口 "载入中调用的窗口"
????????????????? 到这里页面显示完毕.
????????????????? 当我们单击"btn"时,弹出窗口 "普通按钮弹出的窗口"
????????????????? 当我们单击"submit"时:
????????????????? 5 弹出窗口 "提交表单时弹出的窗口"
????????????????? 6 重新载入页面,重复1-4步
实验2 保存为test2.html
主要代码
<body>
<a href="test1.html">Link1</a>
<a href="test1.html">Link2</a>
<a href="test1.html">Link3</a>
<script type="text/javascript">
document.write("链接数量: "+ document.all.links.length+"<br/>");
</script>
<a href="test1.html">Link4</a>
<a href="test1.html">Link5</a>
<a href="test1.html">Link6</a>
<script type="text/javascript">
document.write("链接数量: "+ document.all.links.length+"<br/>");
</script>
</body>
实验结果是:
3
6
总结:HTML文件的执行顺序:1.顺序的(包括javascript脚本)
??????????????????????????????????????2.onload事件的触发在页面载入完之后
