当前位置： 首页 > news >正文

论＜script＞ 标签可以直接写在 HTML 文件中的哪些位置？(可以将 ＜script＞ 标签直接插入到 HTML 文件的任何位置)

news 文章来源：https://blog.csdn.net/qq_51980838/article/details/133361057 2024/10/31 7:21:49

可以将 <script> 标签直接插入到 HTML 文件的任何位置，以在相应位置执行 JavaScript 代码。

以下是几个示例：

1.<head> 元素内部：在 <head> 元素内部放置 <script> 标签时，脚本将在页面加载过程中被下载和解析，但在页面内容渲染之前执行。这意味着脚本可能会在页面结构加载完成之前运行，对于需要在页面加载前执行的代码（如设置全局变量、加载外部资源等），可以将 <script> 放置在 <head> 内。

示例：

<!DOCTYPE html>
<html>
<head><title>Script in head</title><script src="script.js"></script>
</head>
<body><!-- 页面内容 -->
</body>
</html>

2.<body> 元素结尾处：将 <script> 标签放置在 <body> 元素的结尾处（</body> 前），脚本将在页面内容加载完毕后执行。这样可以确保脚本在页面元素解析和渲染完成后执行，避免阻塞页面加载。

示例：

<!DOCTYPE html>
<html>
<head><title>Script at the end of body</title>
</head>
<body><!-- 页面内容 --><script src="script.js"></script>
</body>
</html>

3.直接在 HTML 文件的顶部使用 <script> 标签：

示例：

<!DOCTYPE html>
<html>
<head><title>Script outside head and body</title>
</head>
<body><!-- 页面内容 -->
</body><script>// JavaScript 代码function greet() {alert('Hello, world!');}
</script></html>

这种写法会在页面加载时立即执行脚本，因此脚本的执行可能会阻塞页面加载。所以，如果脚本较长或需要下载额外的资源时，用户可能会在页面加载过程中看到延迟。

无论将 <script> 放置在哪个位置，其中的 JavaScript 代码都会在浏览器解析到该标签时立即执行。一般来说，将 <script> 标签放在 <head> 内可能会导致页面加载时的阻塞，在脚本加载和执行期间，用户可能会看到空白页面。因此，更常见的做法是将脚本放在 <body> 结尾处，以确保页面内容能够快速呈现给用户。

在 HTML 标签之外，一般不建议直接写入 <script> 标签，因为它将被视为无效的内容。

相关文章：

论＜script＞ 标签可以直接写在 HTML 文件中的哪些位置？(可以将 ＜script＞ 标签直接插入到 HTML 文件的任何位置)

可以将 <script> 标签直接插入到 HTML 文件的任何位置&#xff0c;以在相应位置执行 JavaScript 代码。 以下是几个示例&#xff1a; 1.<head> 元素内部&#xff1a;在 <head> 元素内部放置 <script> 标签时&#xff0c;脚本将在页面加载过程中被下载和…...

编程日记 2023/9/30 21:32:45

【MySQL进阶】--- 存储引擎的介绍

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】&#x1f388; 本专栏旨在分享学习MySQL的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 目录 一、什么…...

编程日记 2023/9/30 21:31:43

self-XSS漏洞SRC挖掘

本文由掌控安全学院 - 一朵花花酱 投稿 Markdown是一种轻量级标记语言&#xff0c;创始人为约翰格鲁伯&#xff08;John Gruber&#xff09;。它允许人们使用易读易写的纯文本格式编写文档&#xff0c;然后转换成有效的 XHTML&#xff08;或者HTML&#xff09;文档。这种语言吸…...

编程日记 2023/9/30 21:29:42

1859. 将句子排序

目录 一、题目 二、代码 一、题目 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 二、代码 定义了一个vector<vector<string>> v(MAX);采用const string& word : v[k] word 就会依次取得 v[k] 中的每个元素&#xff08;v[k][0],…...

编程日记 2023/9/30 21:27:40

普通学校，普通背景，普通公司，不普通总结。

作者&#xff1a;阿秀 InterviewGuide大厂面试真题网站&#xff1a;https://top.interviewguide.cn 这是阿秀的第「313」篇原创 小伙伴们大家好&#xff0c;我是阿秀。 可能很多人点开牛客、知乎、B站&#xff0c;一看帖子的标题都是"某985xxxx"、"不入流211xxx…...

编程日记 2023/9/30 21:26:39

Flink之Watermark生成策略

在Flink1.12以后,watermark默认是按固定频率周期性的产生. 在Flink1.12版本以前是有两种生成策略的: AssignerWithPeriodicWatermarks周期性生成watermarkAssignerWithPunctuatedWatermarks[已过时] 按照指定标记性事件生成watermark 新版本API内置的watermark策略 单调递增的…...

编程日记 2023/9/30 21:23:34

提升API文档编写效率，Dash for Mac是你的不二之选

在编写和开发API文档的过程中&#xff0c;你是否经常遇到查找困难、管理混乱、效率低下等问题&#xff1f;这些都是让人头疼的问题&#xff0c;但现在有了Dash for Mac&#xff0c;一切都将变得简单而高效。 Dash for Mac是一款专为API文档编写和管理设计的工具&#xff0c;它…...

编程日记 2023/9/30 21:15:23

无人注意，新安装的 Ubuntu 23.04 不支持安装 32 位应用

导读新安装的 Ubuntu 23.04 不支持安装 32 位应用。 无人注意&#xff0c;新安装的 Ubuntu 23.04 不支持安装 32 位应用 有用户报告&#xff0c;在新安装的 Ubuntu 23.04 上从 Ubuntu 仓库安装的 Steam 客户端是不工作的。在 Ubuntu 23.04 中使用了基于 Flutter 的新安装程序…...

编程日记 2023/9/30 21:14:21

全面横扫：dlib Python API在Linux和Windows的配置方案

前言 在计算机视觉和人工智能领域&#xff0c;dlib是一个备受推崇的工具库。它为开发者提供了强大的图像处理、机器学习和深度学习功能。在计算机视觉项目中&#xff0c;配置dlib Python API是一个重要的初始步骤。本文将引导读者详细了解在Linux和Windows系统上安装和配置dli…...

编程日记 2023/9/30 21:13:21

30种编程语言写国庆节快乐，收藏后改改留着拜年用

文章目录 核心代码版多行代码单行代码 核心代码版 Python&#xff1a;print(“国庆节快乐&#xff01;&#xff01;&#xff01;”)C&#xff1a;printf(“国庆节快乐&#xff01;&#xff01;&#xff01;”);C&#xff1a;cout<<“国庆节快乐&#xff01;&#xff01;…...

编程日记 2023/9/30 21:12:19

SpringBoot2.7.9 配置文件加载方式

ConfigDataLocationResolver接口方法说明 isResolvable: 判断是否是需要转换的资源 resolve: 将单个ConfigDataLocation转换为ConfigDataResource集合&#xff0c;在激活环境配置之前加载&#xff0c;也就是profile文件加载之前加载 resolveProfileSpecific: 将单个ConfigDataL…...

编程日记 2023/9/30 21:10:17

详解C语言—文件操作

目录 1. 为什么使用文件 2. 什么是文件 3. 文件的使用 文件指针 文件的打开和关闭 三个标准的输入/输出流&#xff1a; 4. 文件的顺序读写 对字符操作&#xff1a; fputc&#xff1a; fgetc&#xff1a; 练习复制整个文件&#xff1a; 对字符串操作&#xff1a;…...

编程日记 2023/9/30 21:09:16

IntelliJ IDEA 常用快捷键一览表

目录 1-IDEA的日常快捷键 第1组&#xff1a;通用型 第2组&#xff1a;提高编写速度&#xff08;上&#xff09; 第3组&#xff1a;提高编写速度&#xff08;下&#xff09; 第4组&#xff1a;类结构、查找和查看源码 第5组&#xff1a;查找、替换与关闭 第6组&#xff1a…...

编程日记 2023/9/30 21:06:13

cola 架构简单记录

cola 是来自张建飞&#xff08;Frank&#xff09;的偏实现的技术架构&#xff0c;里面的业务身份和扩展点也被MEAF引用&#xff0c;cola本身由java 实现、但其实可以是一种企业通用的技术架构。 业务身份来源 https://blog.csdn.net/significantfrank/article/details/8578556…...

编程日记 2023/9/30 21:05:13

FFmpeg常用结构体分析

目录 1.AVFormatConext 2.AVInputFormat 3.AVStream 4.AVCodecContext 5.AVPacket 6.AVCodec 7.AVFrame 8.AVIOContext 9.URLProtocol 10.URLContext 1.AVFormatConext AVFormatConext是一个贯穿全局地数据结构&#xff0c;AVFormatConext结构包含很多信息&#xff0c…...

编程日记 2023/9/30 21:04:11

ChatGPT 学习笔记 | 什么是 Prompt-tuning？

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 Prompt-tuning is an efficient, low-cost way of adapting an AI foundation model to new downstream tasks without retraining the model and upd…...

编程日记 2023/9/30 21:03:11

[红明谷CTF 2021]write_shell %09绕过过滤空格 ``执行

目录 1.正常短标签 2.短标签配合内联执行 看看代码 <?php error_reporting(0); highlight_file(__FILE__); function check($input){if(preg_match("/| |_|php|;|~|\\^|\\|eval|{|}/i",$input)){ 过滤了 木马类型的东西// if(preg_match("/| |_||php/&quo…...

编程日记 2023/9/30 21:02:09

JVM学习笔记

JVM学习笔记 复习之前学的内容&#xff0c;同时补充以下知识点&#xff1a;JVM的双亲委派机制、伊甸区与老年代相关知识&#xff1b; 双亲委派机制 首先介绍Java中的类加载器 Java中的类加载器 Bootstrap ClassLoader&#xff08;启动类加载器&#xff09;&#xff0c;默认…...

编程日记 2023/9/30 20:58:05

使用 gst-element-maker 创建一个完全透传的 videofilter 插件

系列文章目录 创建 gstreamer 插件的几种方式 使用 gst-template 创建自己的 gstreamer 插件 使用 gst-plugins-bad 里面的 gst-element-maker 工具创建gstreamer 插件 使用 gst-element-maker 创建一个完全透传的 videofilter 插件 文章目录 系列文章目录前言一、使用gst-ele…...

编程日记 2023/9/30 20:56:03

华为ensp单臂路由及OSPF实验

单臂路由及OSPF实验 1.1实验背景 在这个实验中&#xff0c;我们模拟了一个复杂的网络环境&#xff0c;该网络环境包括多个子网和交换机。这个实验旨在帮助网络工程师和管理员了解如何配置单臂路由和使用开放最短路径优先&#xff08;OSPF&#xff09;协议来实现不同子网之间的…...

编程日记 2023/9/30 20:51:57

Android LiveData 介绍

Android LiveData 介绍 系列文章目录前言一、LiveData是什么&#xff1f;二、简单使用依赖测试数据准备1.创建可观察的livedata2.观察它3.更新它 总结 系列文章目录 Android LiveData 介绍&#xff08;本文&#xff09; 前言 本系列根据官网介绍Jetpack中的数据通信组件&…...

编程日记 2023/9/30 20:50:56

好看的货架效果（含3D效果）

搭配thymeleaf layui合成 货架一 1. css #gudinghuojia2F .layui-row { display: flex; justify-content: space-between; height: 100%;} #gudinghuojia2F .layui-col-xs10 {margin-right: 4%;} #gudinghuojia2F .layui-col-xs10:last-child {margin-right: 0;} .inner-ti…...

编程日记 2023/9/30 20:47:53

【每日一题】1498. 满足条件的子序列数目

1498. 满足条件的子序列数目 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums 和一个整数 target 。 请你统计并返回 nums 中能满足其最小元素与最大元素的 和 小于或等于 target 的 非空 子序列的数目。 由于答案可能很大&#xff0c;请将结果对 109 7 取余后…...

编程日记 2023/9/30 20:45:49

Go语言数据类型实例讲解 - Go语言从入门到实战

Go语言数据类型实例讲解 - Go语言从入门到实战 基础数据类型 bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint64 uintptr byte rune float32 float64 complex64 complex128类型描述bool布尔型&#xff08;bool&#xff09;&#xff1a;可以是true或f…...

编程日记 2023/9/30 20:44:48

RocketMQ 事务消息发送

目录 事务消息介绍 应用场景 功能原理 使用限制 使用示例 使用建议​ 事务消息介绍 在一些对数据一致性有强需求的场景&#xff0c;可以用 RocketMQ 事务消息来解决&#xff0c;从而保证上下游数据的一致性。 应用场景 分布式事务的诉求 分布式系统调用的特点为一个核…...

编程日记 2023/9/30 20:39:44

后端-POST请求中只需要两个参数，后端不想创建对象时

问题&#xff1a; 在前后端对接中&#xff0c;很多前端的规范是POST&#xff0c;参数放body里面&#xff0c;媒体类型是json&#xff0c;后端就需要用RequestBody去接收&#xff0c;但是后端只用接收两个对象&#xff0c;这时候后端不想创建对象&#xff0c;使用RequestParm&a…...

编程日记 2023/9/30 20:36:41

UG\NX二次开发 通过点云生成曲面 UF_MODL_create_surf_from_cloud

文章作者：里海 来源网站：《里海NX二次开发3000例专栏》 感谢粉丝订阅 感谢 Rlgun 订阅本专栏，非常感谢。 简介 有网友想做一个通过点云生成曲面的程序，我们也试一下 效果 代码 #include "me.hpp" /*HEAD CREATE_SURF_FROM_CLOUD CCC UFUN */...

编程日记 2023/9/30 20:34:38

Linux常用指令（二）

目录 一、 删除空目录&#xff08;rmdir&#xff09; 二、ln 硬链接与软链接 三、新建空文件或更新文件的时间戳&#xff08;touch&#xff09; 四、比较文件内容的差异&#xff08;diff&#xff09; 五、显示当前时间或设置系统时间&#xff08;date&#xff09; 六、显…...

编程日记 2023/9/30 20:33:34

【HUAWEI】单臂路由

目录 ​ &#x1f96e;写在前面 &#x1f96e;2.1、拓扑图 &#x1f96e;2.2、操作思路 &#x1f96e;2.3、配置操作 &#x1f363;2.3.1、LSW4配置 &#x1f363;2.3.2、R2配置 &#x1f363;2.3.3、测试网络 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &…...

编程日记 2023/9/30 20:32:34

安全学习_开发相关_Java第三方组件Log4jFastJSON及相关安全问题简介

文章目录 JNDI&#xff1a;(见图) Java-三方组件-Log4J&JNDILog4J&#xff1a;Log4j-组件安全复现使用Log4j Java-三方组件-FastJsonFastJson&#xff1a;Fastjson-组件安全复现对象转Json(带类型)Json转对象Fastjson漏洞复现&#xff08;大佬文章 JNDI&#xff1a;(见图) …...

编程日记 2023/9/30 20:28:28

建行网站注册用户名怎么填/google关键词优化排名

郑重申明&#xff1a;本文纯属Fans同学的个人见解&#xff0c;不喜勿喷。 第1种境界&#xff1a;能够使用框架开发一个具体的项目。比如使用Struts2框架开发了一个博客系统。 第2种境界&#xff1a;不仅会使用框架&#xff0c;还知道框架内部的原理。比如在开发个人博客系统时&…...

编程日记 2024/10/31 7:13:29

网站模版asp/引流推广软件

1.首先下载 mysql安装包&#xff0c; 我这里下载的mysql 5.7(免安装版) https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.24-winx64.zip 然后解压到你自己的目录中&#xff0c;我这里为 D 盘下&#xff1a; 此处&#xff0c;下下来的压缩包里面&#xff0c; data 目…...

编程日记 2024/10/31 6:44:13

网站制作软件下载/广州最近爆发什么病毒

右键工程属性 -> 配置属性 -> 生成事件 ->生成后事件&#xff0c;命令行中的路径加上双引号&#xff0c;如 copy $(ProjectDir)\export\win32\Debug\$(ProjectName).dll $(OutDir) 修改为 copy "$(ProjectDir)\export\win32\Debug\$(ProjectName).dll" &quo…...

编程日记 2024/10/31 6:33:07

怎么在ps里做网站设计/台州seo排名外包

TechEmpower第19轮编程语言框架性能排行榜2020年5月28日正式发布,详见官方博客&#xff1a;https://www.techempower.com/blog/2020/05/28/framework-benchmarks-round-19/&#xff0c;TechEmpower基准测试有许多场景(也称为测试类型)&#xff0c;此次评测多了一个综合评分选项…...

编程日记 2024/10/31 4:11:36

进一步加强区门户网站建设管理/网店运营推广中级实训

我的网站上有两个下拉菜单。使用的技术有javascript、php、mysql。City : [ ]Area : [ ]TODO:当用户选择城市时,我想查询城市中区域的数据库,并动态填充区域下拉菜单。当用户选择区域时,我想再次查询数据库中属于该特定区域和城市的结果。像这样的事情(一步一步)。------------…...

编程日记 2024/10/31 4:06:34

丽水品牌网站建设/北京网站推广机构

网络层向上只提供简单灵活的、无连接的、尽最大努力交付的数据报服务网络层不提供服务质量承诺虚电路服务和数据报服务对比4.IP协议配套的4个协议地址解析协议ARP逆地址解析协议RARP网际控制报文协议ICMP网际组管理协议IGMP5.四种不同的中间设备&#xff08;1&#xff09;物理层…...

编程日记 2024/10/31 3:11:48