（1）head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件
当遇到script标签的时候
浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）
如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行，执行完毕后将控制权交给浏览器渲染引擎
（2）当head中代码解析完毕，会开始解析body中的代码
如果此时head中引用的外部文件没有下载完，将会继续下载
浏览器解析body代码中的元素，会按照head中声明一部分样式去解析
如果此时遇到body标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript
解析完毕后将控制权交还给浏览器渲染引擎。
当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后，css会重新渲染整个页面的html元素。
（3）按照之前的描述，<script>写到body标签内靠后比较好，
因为JavaScript 会 *** 作html元素， 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
但是我们经常将<script>写到head中，body中不会有大量的js代码，body中的html代码结构会比较清晰
window.onload： 等待页面中的所有内容加载完毕之后才会执行
$(document).ready()： 页面中所有DOM结构绘制完毕之后就能够执行
可以这样理解：window.onload 和 $(document).ready()/$(function(){})相当于 写在body 内 最靠后的<script>代码段
方法：1、直接贴图：在界面上贴一个gif动态等待效果图片，gif图片获取方式：网上找素材，会ps的可以自己制作<img src="wait.gif" />
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：
这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制
下面提供一个CSS3绘制的范例
3、CSS的代码如下：
<style>
.loading {
width:0
height:0
border-right:20px solid #fff
border-top:20px solid #000
border-left:20px solid #fff
border-bottom:20px solid #000
border-radius: 20px
-moz-border-radius: 20px
-webkit-border-radius: 20px
}
.loading {
animation: bganim 0.6s linear 0s infinite
-moz-animation: bganim 0.6s linear 0s infinite
-webkit-animation: bganim 0.6s linear 0s infinite
}
@keyframes bganim {
from { transform:rotate(0deg)} to { transform:rotate(360deg)}
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}
}
</style>
4、<label>CSS3效果</label>，<div class="loading"></div>
效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现
5、使用js等待效果插件(如：spin.js)
6、JS代码如下：
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
}
var target = document.getElementById('img_wait')
var spinner = new Spinner(opts).spin(target)
7、html代码的引用：<div id="img_wait"></div>
8、打开测试，效果如下
html的head区域中加上<script language="javascript">location.replace("http://192.168.1.201") </script>即可<html>
html代码如下：
<head>
<title>页面跳转</title>
<script language="javascript">location.replace("http://192.168.1.201") </script>
</head>
<body>
</body>
</html>
扩展资料：
网页HTML代码大全
文件类型 <HTML></HTML>（放在档案的开头与结尾）
文件主题 <TITLE></TITLE>（必须放在「文头」区块内）
文头 <HEAD></HEAD>（描述性资料，像是「主题」）
文体 <BODY></BODY>（文件本体）
（由浏览器控制的显示风格）
标题 <H?></H?>（从1到6，有六层选择）
标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
区分 <DIV></DIV>
区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块 <BLOCKQUOTE></BLOCKQUOTE>（通常会内缩）
强调 <EM></EM>（通常会以斜体显示）
特别强调 <STRONG></STRONG>（通常会以加粗显示）
引文 <CITE></CITE>（通常会以斜体显示）
码 <CODE></CODE>（显示原始码之用）
样本 <SAMP></SAMP>
键盘输入 <KBD></KBD>
变数 <VAR></VAR>
定义 <DFN></DFN>（有些浏览器不提供）
地址 <ADDRESS></ADDRESS>
大字 <BIG></BIG>
小字 <SMALL></SMALL>
与外观相关的标签（作者自订的表现方式）
加粗 <B></B>
斜体 <I></I>
底线 <U></U>（尚有些浏览器不提供）
删除线 <S></S>（尚有些浏览器不提供）
下标 <SUB></SUB>
上标 <SUP></SUP>
打字机体 <TT></TT>（用单空格字型显示）
预定格式 <PRE></PRE>（保留文件中空格的大小）
预定格式的宽度 <PRE WIDTH=?></PRE>（以字元计算）
向中看齐 <CENTER></CENTER>（文字与图片都可以）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）