javascript代码写在哪里？＜body＞和＜head＞里面的js有什么区别？

最新推荐文章于 2023-12-11 19:18:37 发布

原创最新推荐文章于 2023-12-11 19:18:37 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文详细探讨了JavaScript的三种常见使用方式：内嵌于HTML body中立即执行，置于<head>中事件触发执行，以及外部js文件引用。了解如何根据需求选择合适的脚本位置以优化性能。

Javascript写在哪里？概括起来就是三种形式：

内部：Html网页的Body中；
内部：Html网页的head中；
外部：外部JS文件里。

1、Javascript写在Body中

当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。

2、Javascript写在head中

有时候并不需要一载入HTML就运行Javascript，而是用户点击了HTML中的某个对象，触发了一个事件，才需要调用Javascript。这时候，通常将这样的Javascript放在HTML的head里。

3、Javascript写在外部js文件中

将Javascript程序放到一个后缀名为.js的文本文件里。

在HTML里引用外部文件里的Javascript，应在Head里写一句，其中src的值，就是Javascript所在文件的文件路径。

最后：

head中脚本: 需调用才执行的脚本或事件触发执行的脚本。把脚本放在head中时，可以保证脚本在任何调用之前被加载。

body中脚本: 页面被加载时执行的脚本，通常被用来生成页面的内容。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wang2love

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML 基础标签——结构化标签＜html＞、＜head＞、＜body＞

Allen-

11-01

1654

在 HTML 文档中，使用特定的结构标签可以有效地组织和管理网页内容。这些标签不仅有助于浏览器正确解析和渲染页面，还能提高网页的可访问性和搜索引擎优化（SEO）。以下是几个重要的 HTML 文档结构标签的详细介绍，包括它们的作用、常见用法和最佳实践。在之前的文章中，我们有提到过标签以及标签、标签，他们是 HTML 的基本结构元素，同时也属于文档结构标签。在本文中除了这几个标签之外，还主要讲了两个重要的标签：和

JavaScript脚本标签通常放置在HTML文件的`＜head＞`或`＜body＞`部分

BitSlinger的博客

10-01

248

由于脚本文件是通过网络下载的，如果脚本文件比较大或者服务器响应时间较长，那么页面加载的速度可能会受到影响。这在某些情况下是很有用的，例如当脚本需要在页面加载完成之前进行一些初始化操作或者修改页面的样式。这样做的好处是，页面的内容会先加载和渲染，然后再下载和执行脚本文件，从而提高了页面的响应速度和用户体验。在编程中，脚本标签的位置对于脚本的执行和页面加载时间都有一定的影响。部分，脚本的下载和执行会阻塞页面的渲染，用户可能会看到一个空白的页面或者长时间的加载状态。总结起来，脚本标签的位置取决于你的需求。

参与评论您还未登录，请先登录后发表或查看评论

JS代码放在head和body中的区别分析

12-10

那么有什么不同呢？先看一个例子：一个二级级联动态下拉列表框，一级分类（即大类别）id=”vSort0″. 代码如下: <head> function changelocation(id) {…………} </head> <body><select class=”input1″ id=”vSort0″ name=”vSort0″ onChange=”changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);” style=”width:100px;”>……省略……</sele

JavaScript 写在head, body的区别

jeiwt的专栏

11-28

6119

一般来说，放在里的会比放在先执行。在head标签里的代码会在页面还未开始绘制之前解析并执行，在body里的代码则会在页面渲染的同时在读取到这段代码的时候就被执行了。 alert('我是head中的代码片段：\n' +'i1引用:'+document.getElementById('i1') +"\ni2引用:"+document.getElementById('i2')

Js放在head和body中的区别

sinat_24413951的博客

09-17

859

在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用的时候才执行。一、区别浏览器解析html是从上到下的。如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码： windows.onl

Javascript写在哪里

builderwfy的专栏

01-06

4431

Javascript程序可以放在：HTML网页的<body></body>里 HTML网页的<head></head>里外部.js文件里 Javascript在<body></body>之间 当浏览器载入网页Body部分的时候，就执行其中的Javascript语句，执行之后输出的内容就显示在网页中。 <html> <head></head> <body> <script type="text/javascript"> ....<br

javaScript放在<head>和<body>的区别

JAVAGirl

04-03

437

javaScript放在和的区别：在HTML body部分中的JavaScript会在页面加载的时候被执行。在HTML head部分中的JavaScript会在被调用的时候才执行。 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 body 部分中的脚本: 当页面被加...

在 html 页面上编写 javascript 代码时，应编写在 (B ) 标签中间 A. <javascript></javascript> B. <script></script> C. <head></head> D. <body></body>

06-17

在HTML页面上编写...JavaScript代码通常插入在`<head>`标签中，以便在文档加载时执行，或者放在`<body>`标签的底部，以确保页面结构先加载完毕再执行脚本。但直接指定放置位置的话，`<script>`是最准确的选择。

<html><head><meta charset="utf-8"></head><script src="/main.js" type="text/javascript"></script><body>Access disabled!</body></html>

09-23

- 在这个代码中，`<head>`只有`<meta charset="utf - 8">`，然后`</head>`后有`<script>`标签，然后是`<body>`标签。 - 问题：`<script>`标签在`<head>`和`<body>`之间，不在`<head>`或`<body>`内。标准结构中，...

js放在body里面还是html外面,JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制...

weixin_29022821的博客

07-14

1086

(点击上方公众号，可快速关注)作者：德来网址：http://segmentfault.com/a/1190000004292479一、从一个面试题说起面试前端的时候我喜欢问一些看上去是常识的问题。比如：为什么大家普遍把放到导航栏的下面，结果是这样的：从上面的Timeline我们可以看出：首屏时间和DomContentLoad事件没有必然的先后关系所有CSS尽早加载是减少首屏时间的最关键js的下载...

JS放在head和body的区别

weixin_34384681的博客

09-07

2243

2019独角兽企业重金招聘Python工程师标准>>> ...

js写在head与写在body有什么区别

weixin_30662539的博客

08-06

237

javascript代码写在<head>里面：由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定）javascript代码写在<body>里面：这里可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值），Javascript代码务必在标签的后面jav...

javascript 代码放在head和body的区别

weixin_34122810的博客

11-22

164

详见：http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1，在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。 2，在body中时，直接加载并执行典型的区别：如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。例如： [html] view plaincop...

javascript(js)放在head和body的区别

nyykxboy的专栏

11-27

903

转载自：http://www.itbkc.com/?post=93 1：将JavaScript标识放置...在头部之间，使之在主页和其余部分代码之前预先装载；比如对*.js文件的提前调用。也就是说把代码放在区在页面载入的时候，就同时载入了代码，你在区调用时就不需要再载入代码了，速度就提高了，这种区别在小程序上是看不出的，当运行很大很复杂的程序时，就可以看出了。 2：当然也可以将JavaSc

JavaScript放在body还是head中？

m0_57236802的博客

04-19

1444

中，浏览器在解析页面的同时可能需要执行 JavaScript。这可能导致页面渲染被阻塞，从而影响加载速度和用户体验。如果 JavaScript 代码是关键性的，即在页面加载时立即需要执行，那么可以将它放在。然而，根据不同的需求和最佳实践，通常推荐将 JavaScript 放在。总之，根据不同的需求和最佳实践，通常推荐将 JavaScript 放在。然而，在某些特殊情况下，你可能需要将脚本放在。尽管如此，在某些情况下，将 JavaScript 放在。中可能导致错误，因为所需的元素在脚本执行时尚未加载。

js放到head之间和body之间的区别

power_guoxinzhao的专栏

10-13

1201

在做web项目中，js是我们必不可少的一样前台语言。通常我们编写js有两种方式；一种是将js 放置<head></head> 之间一种是将js 放置<body></body> 之间。那么这两种到底有什么区别呢？ 1.放在head之间的js是会在加载页面的过程进行读取也就是说在整个页面加载完成之前就进行了读取。放在body是在页面加...

JS代码放在head和body中的区别分析总结**

weixin_47071411的博客

09-10

495

JS代码放在head和body中的区别分析 1.在收藏夹里面收藏了三个回答不错 2.放在head里的js分析 3.放在body里面的js分析 4.一些总结

JavaScript的书写位置。

z13903931414的博客

12-11

1187

在选择JavaScript的放置位置时，应考虑脚本的大小和对页面加载速度的影响。同时，如果JavaScript代码需要等待页面完全加载才能运行（例如，如果它需要访问DOM元素），那么最好将JavaScript放置在。区域的底部，可以确保在页面完全加载完成后再运行JavaScript代码，避免因JavaScript代码运行而阻塞页面的加载。区域中，可以确保在页面完全加载之前不会阻塞或运行JavaScript代码。这是一种常用的方法，因为它可以缓存JavaScript文件，提高页面加载速度。

JS代码放在head和body的区别

cq546389274的博客

11-16

1016

js代码放在head和body的区别在代码中看到body里可以放脚本，而head里也可用脚本，放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取，经过自己的总结发现他们的区别如下：一、在head主体里写，如果有方法体，那么就是在客户点击的时候触发，如果没写方法体，比如引入的js文件，那么在加载页面前就预加载了。

JSP 有<head>的话一定也要有<body>吗

最新发布

12-06

<think>首先，用户的问题是：在JSP中使用<head>标签时是否一定需要使用<body>标签？即，<head>标签是否可以独立于<body>标签使用？参考引用中提供的信息： - 引用[1]提到JSP常用标签如<jsp:include>、<jsp:param>和<jsp:forward>。 - 引用[2]讨论了在JavaScript中使用JSP标签的示例，其中有一个HTML结构包括<head>和<body>标签。 - 引用[3]、[4]、[5]讨论了自定义JSP标签的创建和使用，包括标签助手类、TLD文件和标签生命周期。用户的具体问题不是关于JSP标签的，而是关于标准HTML标签在JSP中的使用：<head>和<body>标签。在HTML规范中，<head>和<body>标签是HTML文档结构的一部分。一个标准的HTML文档应该包含以下基本结构： <html> <head>  </head> <body>  </body> </html> 在HTML5中，有些标签如<head>和<body>是可选的，但为了兼容性和清晰性，通常建议包括它们。 - <html>标签：是根元素。 - <head>标签：包含元数据、样式表、脚本等。 - <body>标签：包含可见内容。在JSP中，由于JSP最终被编译成Servlet并输出HTML，所以HTML规则同样适用。也就是说，在JSP页面中，<head>和<body>标签的使用遵循HTML标准。用户问：使用<head>时是否必须使用<body>？在HTML规范中： - <head>标签不能独立于<html>标签使用；它必须是<html>的子元素。 - <body>标签也是<html>的子元素，与<head>同级。 - 在HTML5中，<html>、<head>和<body>标签在某些情况下可以省略，但浏览器会隐式创建它们。然而，为了代码清晰和避免错误，通常显式包括它们。具体到<head>和<body>： - 你可以有一个<head>标签而没有一个<body>标签吗？技术上，在HTML中，如果你在<head>之后没有任何内容，浏览器可能会忽略它，但这不是标准做法。一个有效的HTML文档应该有一个<body>标签，即使它是空的。 - 例如，如果你只写： <html> <head> <title>Test</title> </head> </html> 这可能会在浏览器中渲染，但<body>是隐含的或空的。实际上，浏览器会创建一个空的<body>。在JSP中，同样的事情：JSP输出HTML，所以规则相同。从引用中，引用[2]的示例显示了完整的结构： <html> <head> <title>JS脚本中插入JSP标签Demo</title> <script src="/static/js/含有JSP标签的JS脚本.js.jsp"></script> <script type="text/javascript"> // TODO </script> </head> <body> 正文 </body> </html> 这表明在JSP中，<head>和<body>是分开的。现在，回答用户的问题：是否必须使用<body>当使用<head>？ - 严格来说，在HTML规范中，<head>和<body>都是<html>的子元素，所以如果你使用<head>，你应该也使用<body>来包含实际内容。但<body>可以包含内容或为空。 - 在实践中，你可以省略<body>标签，但浏览器会隐式创建它。例如，如果你写： <html> <head> <title>Test</title> </head> </html> 浏览器会处理为有一个空的<body>。在JSP中，由于JSP可能包含动态内容，最好遵循标准结构。另外，引用[5]提到JSP标签的生命周期，但那是关于自定义标签，与<head>和<body>无关。所以，核心答案：在JSP中使用<head>标签时，并不绝对强制使用<body>标签，但强烈推荐包括<body>标签以符合HTML标准，确保页面正确渲染。如果<body>被省略，浏览器可能会隐式添加它，但为了代码清晰性和避免潜在问题，最好显式包括它。结构化回答： 1. 解释HTML结构：在HTML中，<head>和<body>标签是文档的基本部分，<head>用于元数据，<body>用于内容。 2. 在JSP中：JSP页面最终生成HTML，所以相同规则适用。 3. 是否必须：不是绝对必须，但最佳实践是包括两者。省略<body>可能导致不可预测的渲染。 4. 从引用中，引用[2]的示例展示了同时使用<head>和<body>。最后，生成相关问题，如指令所述。回答结构： - 清晰、逐步解释。 - 使用中文。 - 添加引用标识，如果引用内容相关。在回答中，引用[2]直接相关，因为它展示了JSP中使用<head>和<body>的示例。所以，在回答末尾添加[^2]。然后生成相关问题。相关问题应该基于当前主题，例如HTML结构在JSP中、JSP最佳实践等。 </think> ### JSP中使用<head>标签是否必须使用<body>标签？在JSP页面中，`<head>`标签和`<body>`标签都是HTML规范的一部分，JSP最终会被编译成Servlet并输出HTML内容，因此需要遵循HTML标准。以下是逐步分析： 1. **HTML文档结构要求**： - 一个完整的HTML文档（包括HTML5）通常包含根元素`<html>`，其子元素包括`<head>`和`<body>`标签。 - `<head>`标签用于定义文档的元数据（如标题、样式表、脚本），而`<body>`标签用于包含页面可见内容。 - 尽管HTML5允许某些标签（如`<html>`、`<head>`和`<body>`）在特定条件下省略（浏览器会隐式创建它们），但**显式包含`<body>`标签是推荐的最佳实践**。如果只使用`<head>`而省略`<body>`，浏览器可能自动添加一个空的`<body>`，但这可能导致渲染不一致或兼容性问题[^2]。 2. **在JSP中的具体表现**： - JSP页面本质是动态生成HTML的工具，因此规则与静态HTML一致。例如，引用[2]中的示例展示了标准的JSP结构，其中`<head>`和`<body>`同时存在： ```html <html> <head> <title>JS脚本中插入JSP标签Demo</title> <script src="/static/js/含有JSP标签的JS脚本.js.jsp"></script> </head> <body> 正文 </body> </html> ``` 这证明了在JSP中，`<head>`通常与`<body>`配对使用以确保页面完整性。 - 如果JSP页面只包含`<head>`（例如，仅用于加载全局脚本或样式），而无需显示内容，理论上可以省略`<body>`。但这样做不推荐，因为： - 可能违反HTML验证标准。 - 某些浏览器或设备可能无法正确处理隐式`<body>`，导致脚本或样式失效。 - JSP自定义标签（如引用[5]提到的标签生命周期）可能依赖于完整的文档结构。 3. **结论**： - **不是绝对强制**：从技术上讲，在JSP中使用`<head>`标签时，不严格强制必须同时使用`<body>`标签，因为浏览器会尝试自动修复结构。 - **强烈推荐使用**：为了代码可读性、跨浏览器兼容性和遵循最佳实践，**应在使用`<head>`时显式包含`<body>`标签**（即使`<body>`内容为空）。这能避免潜在错误，并确保页面在各种环境下正确渲染[^2]。总之，在JSP开发中，始终使用完整的HTML结构（包括`<html>`、`<head>`和`<body>`）是最可靠的方法。

javascript代码写在哪里？＜body＞ 和＜head＞里面的js有什么区别？

javascript代码写在哪里？＜body＞和＜head＞里面的js有什么区别？