＜script＞标签在html不同位置的影响

最新推荐文章于 2023-09-27 18:45:50 发布
最新推荐文章于 2023-09-27 18:45:50 发布
阅读量650 收藏
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57981155/article/details/124806835
版权

     通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置在不同的地方，会对 JavaScript 代码的正常执行有一定影响。

一、放置在<head>标签中

   由于 HTML 文档是由浏览器从上到下依次载入的，如果你将JavaScript代码放置在<head>标签里时，JavaScript无法从<body>标签中获取所需要的元素，就会出现DOM还未被页面渲染，JavaScript无法执行的情况。

    所以将JavaScript代码放置在<head>标签中，一般用于提前载入以响应用户的动作，不影响HTML 文档的浏览器显示内容，可以保证脚本在任何调用之前被加载。

二、放置在<body>标签中

位于<body>标签内的<script>标签，可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值），需要将<script>标签放在该网页元素之后。

三、放置在<body>标签后

当准备解释这里的JavaScript代码时，整个网页已经加载完毕了，所以这里最适合放需要立即执行的命令，而自定义函数之类的则不适合。

 

 

 

 

  

 

 

 

 

 

 

 

 

 

 

阿桔ins
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你真的了解html吗？--之script标签介绍
西瓜地
12-28 7647
一．属性：src：该属性指定外部JavaScript文件的地址，可以跨域。如果指定了该属性，那么script标签中的内容就会被忽略。 type：指定所使用的脚本语言，可以覆盖默认的脚本语言（即在中定义的脚本类型）开发者必须指定该属性，该属性没有默认值。 language：（不赞成使用），指定script标签的内容所使用的脚本语言，该属性的值是一些语言的标示符，但是由于语言的
javascript代码放在html中不同位置的区别
树上骑个猴的博客
04-06 3463
浏览器解析html是从上到下的 js代码可以出现在 HTML 的任意地方 使用window.onload函数，可以减少错误发生（这个函数就是在文档加载完成之后立即加载js代码） window.onload = function(){/*要执行的js代码*/} 1.放置在head标签中 在HTML head部分中的js代码会在被调用的时候才执行（页面加载完成之前读取）。 当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执
html面试题：关于h5文档中script标签所处位置带来的影响
lalala_dxf的博客
02-06 587
当把标签放在尾部时（body结束标签前），确实会先解析完整个页面再进行下载js文件，这样确实能解决放在head标签中带来的页面卡顿问题，但如果遇到一些页面渲染高度依赖于js的网页，那么页面的显示效果就相对不好了，所以将script放在尾部也不是最优解。的，当发现script的时候，会先下载已经发现的这些script标签对应的js文件，下载完之后才会继续向下解析，如果没有下载完js，那么浏览器就会暂停其他标签的解析工作，并且。，是谁先加载完到时执行的时候谁就先执行（2）js文件的执行是在文档所有的。
脚本可以放在html外,关于把script脚本放在html结束标签外的运行结果？？？
weixin_42449339的博客
06-20 719
杨__羊羊在哪里放置 JavaScript 代码？通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。放置于之间将 JavaScript 代码放置于 HTML 文档的标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下...
script标签放在页面头部和尾部的区别
weixin_47316183的博客
11-02 4828
script标签放在页面头部和尾部的区别 一般script标签会被放在头部或尾部。头部就是里面，尾部一般指里 ------放在各个位置的区别 1.标签放置在标签内部时： 　　将script放在里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS，且浏览器下载JS时，就block掉解析其他HTML的工作。将script放在头部，会让网页
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
用正则取出html页面中script段落里的内容
10-31
在 HTML 页面中，Script 段落是指 `<script>` 标签之间的内容，这些内容通常是 JavaScript 代码，用于控制 HTML 页面的行为和样式。 Script 段落的内容可以是任何类型的代码，从简单的 JavaScript 语句到复杂的框架...
浅谈script在html中的摆放位置
09-28
在HTML文档中，`<script>`标签用于引入JavaScript代码或者外部JS文件，它们的位置对于页面的加载和执行顺序有着重要影响。本文将深入探讨`<script>`在HTML中的最佳摆放位置，以及为什么需要考虑这个位置。 HTML文档...
HTML页面不认标签,怎么办?
12-25
HTML页面不认<script type="text/template">标签,怎么办? 比如 <script type="text/template"> ... </script> 以上代码,HTML浏览器不能解析,报错. 怎么办? 我来教给你如何变相的让他认这个type.
VUE渲染后端返回含有script标签的html字符串示例
10-16
本篇文章将详细介绍如何在Vue应用中安全地渲染后端返回的包含`<script>`标签的HTML字符串。 首先，我们要理解为什么不能直接使用Vue的`v-html`指令或者原生JavaScript方法（如`innerHTML`或`appendChild`）来处理...
HTML内部引用JavaScript和外部引用JavaScript
qq_44716544的博客
09-19 2145
1.内部JavaScript的语法如下： <html> <head> <title>标题</title> <script language="javascript" type="text/javascript"> javascript代码 </script> </head> </html> 在语法中<script>标签中有两个属性，分别是language和type.两个属
关于script在head内报错，在body内可以执行的原因
lanheit的博客
03-13 1638
script代码在head内无法执行，会报错的原因是你的DOM元素还未生成，当浏览器下载完js是发现为空就不会再向下执行body，而html页面是在执行了body之后才会显示。 javascript本身就是单线程的，在没有使用两个属性（async和defer）的情况下，只要吧script代码块放到body下面，也就是的前面就可以正常执行。 参考下面的代码 <html lang="en"> <head> <title>九九乘法表</title>
script标签的位置及影响
The_Best_Hacker的博客
10-09 615
【一】&lt;script&gt;&lt;/script&gt;存放的位置 &lt;head&gt;&lt;/head&gt;之间 &lt;body&gt;&lt;/body&gt;之间 &lt;/body&gt;之后  【二】&lt;script&gt;&lt;/script&gt;存放的地方会产生什么影响 1.在&lt;head&gt;&
在HTML中使用javaScript
m0_70648941的博客
09-12 2594
整数与空值=整数 字符串与空值=字符串。整数与布尔型=整数 字符串与布尔型=字符串。整数与字符串=字符串 小数与空值=小数。小数与字符串=字符串 布尔型与空值=整数。2.代码可以编写在 head,body,body外,html外。
html5范围选择,在HTML5里用Scoped属性限定CSS的作用范围
weixin_39994806的博客
06-03 208
HTML5的变革给我们带来了大量非常有用的新属性，比如placeholder, download, hidden，等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力。特别的，有一个新的属性，它能让我们控制多个元素的属性，就是：scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效，具体说，就是存放这段style样式的元素的子元素生效，下面来看看它的...
论＜script＞ 标签可以直接写在 HTML 文件中的哪些位置？(可以将 ＜script＞ 标签直接插入到 HTML 文件的任何位置)
qq_51980838的博客
09-27 1252
标签时，脚本将在页面加载过程中被下载和解析，但在页面内容渲染之前执行。这意味着脚本可能会在页面结构加载完成之前运行，对于需要在页面加载前执行的代码（如设置全局变量、加载外部资源等），可以将。所以，如果脚本较长或需要下载额外的资源时，用户可能会在页面加载过程中看到。这种写法会在页面加载时立即执行脚本，因此脚本的执行可能会阻塞页面加载。内可能会导致页面加载时的阻塞，在脚本加载和执行期间，用户可能会看到。这样可以确保脚本在页面元素解析和渲染完成后执行，避免阻塞页面加载。脚本将在页面内容加载完毕后执行。
jS代码写在html什么位置,3种JavaScript代码书写位置和注意事项
weixin_36484814的博客
06-05 7212
在网页中编写JavaScript代码时，有3种书写位置，分别是行内式、内嵌式(也称为嵌入式)和外部式(也称为外链式)，下面分别进行讲解。1. 行内式行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中(也就是以on开头的属性，如onclick)。下面通过具体操作步骤进行演示。(1)创建一个简单的HTML页面，将文件命名为demo01.html。(2)编写demo01.htm...
＜script＞放在head内和body内的区别
Q1368089323的博客
12-13 2314
1.区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。 例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效 2.JavaScript的位置 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分
第一节总结
ywt201010的博客
09-12 377
JavaScript是基于对象一种具有解释性用于客服端的脚本语言 1.JavaScript的数据类型 基本数据类型： 数值数据类型(number) 布尔类型(boolean) 未定义数据类型 (undefined) 空数据类型(null) 引用数据类型： 字符串类型(string) Array数组类型 对象类型(Object) （同时使用typeof运算符可以查看变量的数据类型） 2.JavaScript编写规范 JS代码写在标签内 JavaScript一般放在<head&
<script>标签
最新发布
03-15
<script>标签是HTML中用于插入JavaScript代码的标签。通过在<script>标签中编写JavaScript代码，可以实现网页的动态效果和交互功能。以下是一些关于<script>标签的介绍： 1. 插入位置：可以将<script>标签放置在HTML文档的<head>或<body>部分，用于在页面加载时执行脚本或在特定事件触发时执行脚本。 2. 外部脚本：可以使用<script>标签引入外部的JavaScript文件，通过src属性指定外部文件的路径。例如：<script src="script.js"></script>。 3. 内联脚本：可以直接在<script>标签内编写JavaScript代码，不需要引入外部文件。例如：<script>alert("Hello, World!");</script>。 4. 事件处理：可以在<script>标签中编写事件处理函数，用于响应用户的操作或页面的事件。例如：<script>function handleClick() { alert("Button clicked!"); }</script>。 5. 异步加载：可以使用async或defer属性来控制脚本的加载和执行方式。async属性表示脚本异步加载，不会阻塞页面的渲染；defer属性表示脚本延迟加载，会在文档解析完毕后执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值