了解一下HTML中的script标签

了解一下HTML中的script标签

稍微学习过一点网页编写的同学都知道,网页中的js代码应该写在 script 标签中,但是为什么要这么做呢?本文就介绍一下script标签

script 标签

最初,网景公司想要在浏览器中展示使用js的html文件,但是又不想影响这个文件在其他浏览器中的显示效果,于是创造了 script 标签

我们都知道标签可以在里面添加属性,script标签有下面的属性:

async 表示立即下载该脚本,不应该妨碍界面中其他操作src 表示要执行这个脚本的外部文件,可选charset src指定的外部文件的字符集defer 脚本延迟到文档解析显示完成之后执行,可选language 已经废弃type 重要,用于替代language属性,默认为text/javascript,所以这个参数一般不需要可以指定。

    // 属性设置    function SayHi(){        alert("Hi");    }
// 必须写成下面的样子

注意:

立即学习“前端免费学习笔记(深入)”;

在解释器对script标签中的代码求值完毕之前,页面中的其余内容都不会被浏览器加载或者显示带有src的标签中如果还有js代码将被忽略,所以写了src就不该在其中再写代码了尽量使用外部文件写js,尽量少的使用内嵌js,这样一来维护方便,js都在一个地方,而来如果两个页面使用了同一个js,它可以缓存

script 标签位置

本来标签应该放在header里面,但是因为放在header中,在加载js的时候,页面还不会渲染(页面只有加载到body才会开始渲染),导致页面出现较长时间的白,所以现在我们放在body的最后

...

在script中加入defer属性之后,放到header中理论上也可以达到延迟执行的目的,但是由于不同浏览器对于defer的支持不同(执行顺序不确定,内嵌的js不支持defer等),最好我们还是按照上面的写法写在body的最后

async属性也是为了解决脚本异步加载的问题,同样也是不支持嵌入的js脚本,本来它跟defer的区别是 defer 按顺序加载,async不按顺序加载,但是在实际使用中,浏览器对于这个属性的支持也不一样,两个属性都不能保证脚本的顺序执行以及在DOMContentLoaded之前执行,所以在浏览器彻底支持之前,最好还是不要用这个属性了。

标签

当浏览器禁用js或者浏览器根本不支持js(当然现在这种很少了),需要平稳退化,所以需要noscript标签

它的作用是,当发生上面提到的情况的时候,显示noscript中的内容,看下面的例子

                                        

本页面需要浏览器支持(启用)JavaScript

注意如果浏览器启用了JS,则这个标签里的内容不会显示。

推荐教程:HTML教程、JavaScript视频教程

以上就是了解一下HTML中的script标签的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1548515.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
一分钟了解Html中CSS的三种链接方式
上一篇 2025年12月21日 20:00:44
onclick在html中用法是什么
下一篇 2025年12月21日 20:00:47

相关推荐

  • 怎么用VSCode运行代码_VSCode执行不同语言代码的方法教程

    VSCode运行代码本质是调用语言解释器或编译器,主要通过内置终端手动执行命令、配置“运行与调试”功能一键启动、或使用语言扩展提供的快捷方式。对于Python,需安装Python扩展并选择正确解释器,可通过右上角运行按钮或调试功能执行;JavaScript/Node.js可直接在终端运行node命令…

    2026年9月3日
    300
  • VSCode怎么后台保持开启_VSCode进程后台运行教程

    答案:VSCode关闭后程序停止因其进程架构决定,关闭时主进程会终止所有子进程。实现后台运行的最佳方案是使用远程开发功能,将工作负载运行在远程服务器、WSL或Docker容器中,本地仅作为客户端,关闭本地界面不影响远程任务持续运行。 VSCode本身并没有一个“最小化到托盘并持续运行所有进程”的官方…

    2026年9月3日
    200
  • VSCode特效插件怎么设置_VSCode安装和配置界面动效与视觉增强插件教程

    答案:安装Power Mode、Custom CSS等插件可实现VSCode界面动效与视觉增强,通过扩展商店搜索、安装并配置settings.json文件,结合性能优化与实用性选择,提升编码体验。 VSCode的界面动效与视觉增强插件,本质上是通过安装特定的扩展程序来实现的。这就像给你的开发环境加了…

    2026年9月3日
    300
  • VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程

    VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程VSCode怎么写CSS文件_VSCode编写和预览CSS样式表详细教程

    首先新建.css文件并编写样式,通过链接HTML或使用Live Server插件实时预览;推荐使用CSS Peek、IntelliSense、Prettier等插件提升效率;调试可借助浏览器开发者工具,大型项目建议采用Sass、BEM命名和模块化管理。 VSCode编写CSS文件,简单来说,就是新建…

    2026年9月3日 用户投稿
    300
  • mac使用命令安装软件

    mac使用命令安装软件mac使用命令安装软件mac使用命令安装软件mac使用命令安装软件

    答案:Homebrew是macOS上高效管理命令行工具和图形应用的包管理器,通过简单命令实现软件安装、更新与卸载,支持依赖处理和Cask图形应用安装,安全可靠且可与其他语言包管理器协同使用。 在macOS上,想要通过命令来安装软件,最核心且效率最高的方式就是借助一个叫做Homebrew的包管理器。它…

    2026年9月3日 用户投稿
    300
  • VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程

    答案:彻底卸载TypeScript需禁用VSCode内置服务、卸载相关扩展并清理项目与全局的TypeScript包。首先在设置中调整typescript.tsdk路径或禁用自动类型获取,将.ts文件关联为纯文本;其次通过扩展面板卸载所有TypeScript相关插件;最后删除项目中的typescrip…

    2026年9月2日
    100
  • VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程

    首先在VSCode中创建CSS文件并编写样式,利用IntelliSense和Emmet实现智能补全与高效编码;接着通过模块化文件结构和扩展如CSS Peek管理大型项目;最后结合Live Server实时预览和浏览器开发者工具联动调试,提升CSS开发效率。 VSCode中编写CSS文件远比你想象的要…

    2026年9月2日
    200
  • VSCode的代码怎么运行_VSCode多语言代码执行方法与配置教程

    VSCode通过调用系统已安装的语言运行时来运行代码,需先安装对应语言环境,再结合扩展、集成终端或配置文件实现执行。 VSCode运行代码,说白了,它自己其实不“运行”代码,它更像是一个极其智能的遥控器和指挥中心。它利用你系统里已经安装好的各种语言运行时、编译器或解释器来完成这个任务。核心思路就是:…

    2026年9月2日
    200
  • VSCode怎么侧边显示函数_VSCode大纲视图侧边栏函数列表教程

    最直接的方式是启用VSCode的“大纲视图”功能,它能清晰列出文件中的函数、类等符号,支持快速导航与筛选,提升代码阅读与重构效率。 VSCode中想要在侧边栏看到函数列表,最直接、也是我个人觉得效率最高的方式,就是利用它的“大纲视图”(Outline View)。这个功能就像给你的代码文件画了一张清…

    2026年9月2日
    200
  • VSCode标签怎么自动补齐_VSCodeHTML/XML标签自动补全设置教程

    答案:VSCode中HTML/XML标签自动补齐失效通常由Emmet未启用、文件类型识别错误或设置冲突导致。需检查emmet.triggerCharacters和editor.quickSuggestions设置,确认文件语言模式正确,并确保emmet.includeLanguages配置合理。同时…

    2026年9月1日
    100
  • java学习应用篇|windows安装JDK及配置环境变量

    java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量

    学习前言 实际上,本系统中最有价值的内容已经在前两篇文章中介绍完毕,接下来的内容主要是对前面知识的应用。新知识层出不穷,每隔几天就会有新的概念和框架出现。我们在本系列学习中,力求通过基本的学习方法来深入探究代码的本质,这样无论将来出现什么新的知识点,我们都能迅速学习并应用。小刀的水平有限,欢迎大家在…

    2026年9月1日 用户投稿
    200
  • Python环境安装教程

    Python环境安装教程Python环境安装教程Python环境安装教程Python环境安装教程

    引言 通常我们将#%#$#%@%@%$#%$#%#%#$%@_23eeeb4347bdd26bfc++6b7ee9a3b755dd和java语言归为解释型语言,而对于c/c++则归为编译型语言。 安装Python解释器最新版本下载 官网下载(https://www.Python.org/) 选择最新…

    2026年9月1日 用户投稿
    400
  • 怎么用VSCode运行代码_VSCode代码执行与调试教程

    VSCode中运行和调试代码的核心方法包括:1. 使用内置终端手动执行命令,灵活但需重复输入;2. 通过Code Runner插件一键运行,快捷但功能有限;3. 借助语言扩展与调试器深度调试,支持断点、变量监控、调用堆栈等高级功能,适合复杂项目。配置时需安装对应语言扩展、设置解释器路径、合理使用se…

    2026年9月1日
    100
  • 网友从 Win XP 泄露源码发现的隐藏功能和趣味细节

    网友从 Win XP 泄露源码发现的隐藏功能和趣味细节网友从 Win XP 泄露源码发现的隐藏功能和趣味细节网友从 Win XP 泄露源码发现的隐藏功能和趣味细节网友从 Win XP 泄露源码发现的隐藏功能和趣味细节

    代号为 whistler 的首个 windows xp 版本,已有近 20 年的历史。然而,最近 twitter 用户 albacore 分享了一些来自 windows xp 泄露代码的隐藏功能。通过调整特定的注册表项目,你可以解锁一些有趣的视图,并体验到此前未曾见过的功能。 首先,如上图所示的“开…

    2026年9月1日 用户投稿
    200
  • Tkinter Frame

    frame 是一种在 windows 上用于分隔小区域的组件,它可以将窗口划分为不同的区域,并在这些区域中放置其他组件。此外,一个 frame 还可以进一步分割成两个或多个 frame,可以将其视为一种容器。 效果 代码语言:javascript代码运行次数:0运行复制“`javascr…

    2026年9月1日
    200
  • 使用minio搭建私有化对象存储服务

    使用minio搭建私有化对象存储服务使用minio搭建私有化对象存储服务使用minio搭建私有化对象存储服务使用minio搭建私有化对象存储服务

    在工作中,我们常常会接触到对象存储服务,但这些服务大多是云服务。对于需要对外开放的项目而言,这类服务是可行的。然而,当我们需要私有化部署时,如何继续使用对象存储呢? 这里介绍一个开源项目MinIO,使用它,我们可以轻松搭建属于自己的私有云服务。 MinIO是一个非常轻量级的服务,可以简单地与其他应用…

    2026年8月31日 用户投稿
    200
  • VSCode怎么写JS代码_VSCode编写和调试JavaScript代码的完整教程

    答案是掌握配置环境、善用编辑器功能与调试技巧。首先安装Node.js并配置VSCode的launch.json文件以支持调试,安装ESLint和Prettier等插件提升代码质量;利用代码片段、智能提示和快捷键提高编写效率;通过设置断点、使用条件断点和调用堆栈等功能进行高效调试,遇到问题可检查配置、…

    2026年8月31日
    100
  • 怎样实现一个基于 JavaScript 的简单搜索引擎?

    答案是基于JavaScript实现轻量级搜索引擎,通过预加载JSON数据、使用filter进行文本匹配,并支持多关键词与权重排序,结合输入事件实时展示结果。 实现一个基于 JavaScript 的简单搜索引擎,核心是文本匹配和快速检索。不需要复杂的后端或数据库,适合静态网站或小型应用。关键思路是:预…

    2026年8月31日
    100
  • VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程

    VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程

    答案:在VSCode中插入Markdown图片需使用语法,路径推荐用相对路径,预览依赖内置功能或扩展;可通过HTML 标签调整大小,常见问题为路径错误,建议使用Paste Image等扩展提升效率,高级效果如图文混排需结合HTML与CSS,但需注意平台兼容性。 VSCode中插入图片,特别是Mark…

    2026年8月31日 用户投稿
    100
  • Linux基本操作+命令介绍

    1.Linux基本操作1.1Linux的目录结构 windows的目录结构是带有盘符的。d: e: c: 在Xterm中输入ls / 查看Linux的顶级目录。 代码语言:javascript代码运行次数:0运行复制 1. root:该目录为系统管理员HOME目录2. bin:这个目录下放着经常使用…

    2026年8月31日
    200

发表回复

登录后才能评论
关注微信