JavaScript脚本可以放在HTML文档任何需要的位置。一般来说,可以在<head>与</head>、<body>与</body>标记对之间按需要放置JavaScript脚本代码。

一、放在<head>与</head>标记对之间

放置在<head>与</head>标记对之间的JavaScript脚本代码一般用于提前载入以响应用户的动作,一般不影响HTML文档的浏览器显示内容。如下是其基本文档结构:

 1 <html>
2 <head>
3 <title>放置在<head>与</head>标记对之间</title>
4 <!--直接写JavaScript代码-->
5 <script type="text/javascript">
6 //JavaScript代码
7 </script>
8 <!--引入外部脚本-->
9 <script type="text/javascript" src="1.js"></script>
10 </head>
11 <body>
12 </body>
13 </html>

二、放置在<body>与</body>标记对之间

JavaScript脚本也可以放置在<body>与</body>标记对之间,可根据需要写多个独立的脚本代码段并与HTML代码结合在一起。

 1 <html>
2 <head>
3 <title>放置在<body>与</body>标记对之间</title>
4 </head>
5 <body>
6 <!--直接写JavaScript代码-->
7 <script type="text/javascript">
8     //JavaScript代码
9 </script>
10 <!--引入外部脚本-->
11 <script type="text/javascript" src="1.js"></script>
12 </body>
13 </html>

注意:在<head>和<body>标签内可以有多个代码块,只要放在<script type="text/javascript">与</script>之间或者引入外部脚本即可。同时,JavaScript脚本也可以放在其他任意HTML标签之间,如<div>、<p>、<span>等。

说明:浏览器一般是从上到下渲染HTML,当遇到JavaScript代码时,浏览器将发生阻塞(不再解析后面的任何代码,包括HTML和JavaScript),有些浏览器在阻塞期间不会解析该JavaScript后面的HTML代码,必须等到该JavaScript代码执行完毕,才继续解析。如果将JavaScript放置在<head>...</head>或者<body>...</body>之间,经常会发生会发生这种现象:浏览器先是呈现一部分页面,再呈现后边的页面,中间间隔时间明显。这样带来的明显结果就是用户体验差。

因此,如无特殊要求,我们强烈建议将JavaScript代码置于<body>...</body>的最后。如:

<body>
<!--HTML代码-->
<script type="text/javascript">
</scirpt>
<script type="text/javascript" src="1.js"></scirpt>
</body>

原文链接:http://www.itxueyuan.org/view/6297.html

嵌入javascript脚本的位置的更多相关文章

  1. smarty模板中如何嵌入javascript脚本

    [官方网站](http://www.php100.com/manual/smarty/) 在smarty文件里直接写javascript代码时候,造成500错误. javascript代码有很多的{} ...

  2. JavaScript脚本在页面中放置的位置

    JavaScript脚本通常放置在三个位置: 1.head部分JavaScript脚本. 2.body部分JavaScript脚本. 3.单独以.js结尾的文件中的JavaScript脚本. 客户端会 ...

  3. JavaScript脚本语言基础(一)

    导读: JavaScript代码嵌入HTML文档 JavaScript代码运行方式 第一个实例 JavaScript的三种对话框 定义JavaScript变量 JavaScript运算符和操作符 Ja ...

  4. JavaScript脚本语言基础(四)

    导读: JavaScript和DOM DOM文档对象常用方法和属性 DOW文档对象运用 JSON数据交换格式 正则表达式 1.JavaScript和DOM [返回] 文档对象模型(Document O ...

  5. JavaScript脚本语言基础(三)

    导读: 数学对象(Math) 数组对象(Array) 字符串对象(String) 日期对象(Date) js对象是属性和方法的集合.JavaScript中的所有事物都是对象,如:字符串.数值.数组.函 ...

  6. Windows桌面或服务器环境下嵌入JavaScript支持(JSRT)

    很多人比较关注Google的JS V8 JavaScript引擎,确实Google最近很高调.但这个库在Windows下使用确实有点难度,即使在Linux嵌入,也需要下载gyp,编译安装,然后再下载v ...

  7. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

  8. 可嵌入的脚本引擎 Jx9

    Jx9是一个可嵌入的脚本引擎,基于JSON实现了图灵完备(Turing complete)的编程语言. Jx9 是那些需要流行和高效率脚本支持应用程序(比如:游戏.数据库系统,文本编辑器,网络应用程序 ...

  9. javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执 ...

随机推荐

  1. SaberRD之直流工作点分析

    直流工作点分析(DC Operating Point Analysis)用于确定电路的静态工作点. 静态工作点的概念来源于三极管的电流放大特性.三极管放大电路中,当交流输入信号为零时,电路处于直流工作 ...

  2. 2017-2-21 C#基础 if条件语句,作用域

    今天学了if 条件语句和作用域.作用域可以用一句话来概括:儿子可以用爹的所有东西,爹不可以用儿子的任何东西.If条件语句我用几个练习题来解释. 1."请输入年份:" 判断是否是闰年 ...

  3. Asp.Net MVC学习总结(二)——控制器与动作(Controller And Action)

    一.理解控制器 1.1.什么是控制器 控制器是包含必要的处理请求的.NET类,控制器的角色封装了应用程序逻辑,控制器主要是负责处理请求,实行对模型的操作,选择视图呈现给用户. 简单理解:实现了ICon ...

  4. smarty模板基础3 *缓存数据*

    缓存数据,这个并不是暂存的缓存,而是写入了内存的缓存 通过一个例子来书写:缓存数据 一.书写php和html页面的基本功能 既然是用smarty模板,那么前端和后端要分开写了 (1)php页面 < ...

  5. TypeScript设计模式之备忘录、命令

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  6. Troubleshooting OpenStack Bug- 每天5分钟玩转 OpenStack(162)

    这是 OpenStack 实施经验分享系列的第 12 篇. 问题描述 客户报告了一个问题:对 instance 执行 migrate 操作,几个小时了一直无法完成,不太正常. 问题分析 遇到这种情况, ...

  7. wemall app商城源码中基于PHP的通用的树型类代码

    wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...

  8. 1583: [Usaco2009 Mar]Moon Mooing 哞哞叫

    1583: [Usaco2009 Mar]Moon Mooing 哞哞叫 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 244  Solved: 126 ...

  9. 非服务器的定期校正时间 Anacron

    与服务器不同,编程和办公用计算机不是连续24小时运行的.开关机的时间不固定,类似较时这样的任务无法保证运行. 对于这类机器,可以考虑使用 Anacron 进行设置. 在 Archlinux 中, An ...

  10. MVC+Spring.NET+NHibernate .NET SSH框架整合

    在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MVC框架以后太灵活了(相比之前的web Form),嗯,关于.NET中的MVC框架我 ...