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. 【转】jqGrid学习之介绍

    JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情.   ...

  2. SimpleDateFormat的线程安全问题与解决方案

    SimpleDateFormat 是 Java 中一个常用的类,该类用来对日期字符串进行解析和格式化输出,但如果使用不小心会导致非常微妙和难以调试的问题. 因为 DateFormat 和 Simple ...

  3. 第十篇 一个利用反射实现的Excel导出

    前些天写了个导出Excel的公共类,因为项目中也需要上传Excel,没有利用Office组件,(PS:Office在上传文件时候,Excel进程无法关闭,会导致上传和打开失败)有的说利用Kill把进程 ...

  4. Python基础入门教程（4）（数据类型）

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...

  5. Jmeter+Badboy实战经验二（使用jmeter）

    1. 新建线程组: TestPlan--添加--Threads(Users)--线程组

  6. npm学习总结

    1.npm run [scripts name]的作用及意义: npm 局部安装的工具包不能像全局安装那样直接执行命令行,但可写成命令行执行语句,通过npm run来运行,该命令可将node_modu ...

  7. HTML确认密码

    html确认密码   今天准备分享一个小知识点,就是确认登录界面 <body ><form>输入户名: <input type="text" name ...

  8. 网络安全实验室 注入关通关writeup

    URL:http://hackinglab.cn 注入关  [1] 最简单的SQL注入username = admin' or ''='password随便什么都可以直接可以登录 [2] 熟悉注入环境 ...

  9. 1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果

    1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 4 ...

  10. Java线程池ExecutorService

    开篇前,我们先来看看不使用线程池的情况: new Thread的弊端 执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override ...