了解一下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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 20:00:44
下一篇 2025年12月21日 20:00:47

相关推荐

  • HTML怎么引入js文件?

    在html中可以使用标签,通过 src 属性来引入js文件。 标签用于定义客户端脚本,比如 javascript。 script标签元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。 示例: 建立一个外部的js文件(hello.js)…

    2025年12月21日
    000
  • 学会html能做什么工作

    很多朋友发现自己学了html之后不知道自己能够做什么,未来能从事什么工作,实际上这也是很正常的事情,很多朋友在学过html之后都会有这样的困惑,下面我将和大家一起谈谈。 在经过一系列的演变之后,HTML逐渐开始向商业智能、贸易、游戏、娱乐以及移动互联网等不同领域多样化地发展。因此你学习HTML可以从…

    2025年12月21日
    000
  • head标签中有什么属性?

    本篇文章给大家带来的内容是关于head标签中有什么属性?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 head 标签里有什么? 每一个 html 文档中,都有一个不可或缺的标签:  ,它作为一个容器,主要包含了用于描述 html 文档自身信息(元数据)的标签,这些标签一般不会在页面…

    好文分享 2025年12月21日
    000
  • HTML标签伪元素绑定事件的三种方式

    本篇文章给大家带来的内容是关于html标签伪元素绑定事件的三种方式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近项目中遇到点击一个图标执行某些操作的功能,本来很简单就能实现,但图标却是 ::after 伪元素实现的,在印象中好像不能直接对伪元素进行 dom 操作,可项目中有所…

    2025年12月21日
    000
  • http协议发展过程一览

    本篇文章给大家带来的内容是关于http协议一览,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 这里我只是对一些知识进行简单的整理,方便自己理解记忆,还有很多不完善的地方,更多细节,需要查看书籍或者其他文章 http协议的发展过程 HTTP 是基于 TCP/IP 协议的应用层协议。它…

    2025年12月21日 好文分享
    000
  • 页面性能优化的方法总结

    本篇文章给大家带来的内容是关于页面性能优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 互联网有一项著名的8秒原则。用户在访问web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上,加载时间…

    2025年12月21日 好文分享
    000
  • 你知道原生HTML组件是什么吗?原生HTML组件的介绍

    本篇文章给大家带来的内容是关于你知道原生html组件是什么吗?原生html组件的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 嘿!看看这几年啊,Web 前端的发展可是真快啊! 想想几年前,HTML 是前端开发者的基本技能,通过各式各样的标签就可以搭建一个可用的网站,基本交互也…

    2025年12月21日 好文分享
    000
  • Web应用中富交互的撤销与前进操作的实现方法介绍(代码)

    本篇文章给大家带来的内容是关于web应用中富交互的撤销与前进操作的实现方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在web应用中,用户在进行一些富交互行为的操作时难免会出现误操作,比如在富文本编辑器设置错了字体颜色就需要撤回,做H5活动页面的时候不小心删了一个图…

    2025年12月21日
    000
  • 如何选择Web前端模板引擎(推荐)

    本篇文章给大家带来的内容是关于如何选择web前端模板引擎(推荐),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 模板引擎负责组装数据,以另外一种形式或外观展现数据。 浏览器中的页面是 Web 模板引擎最终的展现。 无论你是否直接使用模板引擎,Web 模板一直都在,不在前端就在后端,…

    2025年12月21日
    000
  • 如何实现网页版别踩白块的游戏 (代码示例)

    本篇文章给大家带来的内容是如何使用如何实现网页版别踩白块的游戏 (代码示例) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 自己最近一直想做个小项目,但是自己代码水平太烂了,做不了大系统,索性利用毕生所学写个小游戏,哈哈哈别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一…

    2025年12月21日
    000
  • 图片懒加载是什么意思?图片懒加载的实现方法

    本篇文章给大家带来的内容是关于图片懒加载是什么意思?图片懒加载的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。其选择的重要的部分先加载,次要的部分需要的时候再加载。比如一个电商网站,首屏通常有很多的数据,…

    2025年12月21日
    000
  • 浏览器中5种常用的事件解析

    本篇文章给大家带来的内容是关于浏览器中常用的事件解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件。input 事件的一个特点,就是会…

    好文分享 2025年12月21日
    000
  • 详谈HTML中script标签(附代码)

    本篇文章给大家带来的内容是关于详谈html中script标签(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 script 元素 在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素,script 元素内部的代码从上而下依次执行。 在引…

    好文分享 2025年12月21日
    000
  • 浏览器内核以及浏览器兼容的问题分析

    本篇文章给大家带来的内容是关于浏览器内核以及浏览器兼容的问题分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、浏览器内核  Rendering Engine,中文翻译过来名称很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。 用来渲染网页内容的,将网页的内容和排版代…

    好文分享 2025年12月21日
    000
  • React中跨组件分发状态的三种方法介绍

    这篇文章给大家介绍的内容是关于react中跨组件分发状态的三种方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当我问自己第一百次时,我正在研究一个典型的CRUD屏幕:“我应该将状态保留在这个组件中还是将其移动到父组件?”。 如果需要对子组件的状态进行轻微控制。您可能也遇到了…

    2025年12月21日
    000
  • HTML对象:html一些对象属性的介绍

    这篇文章给大家分享的内容是关于html对象:html一些对象属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Form 对象 Form 对象方法 reset() :把表单的所有输入元素重置为它们的默认值。 submit() :提交表单。 立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月21日
    000
  • 瀑布流布局实现的代码

    这篇文章给大家介绍的内容是关于瀑布流布局实现的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 index.html waterfall layout @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @…

    好文分享 2025年12月21日
    000
  • 父元素标签的默认行为以及click事件之间的相互影响

    本篇文章给大家带来的内容是关于父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 开发过程中遇到问题,简单写个demo   运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标…

    2025年12月21日
    000
  • 关于http前端存储的总结

    本篇文章分享给大家的内容是关于http前端存储的总结,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到有需要的朋友。 cookie 为什么会有cookie http协议的无状态,所谓无状态即是服务器并不是知道这次的请求和上次的请求是不是同一个client发来的,就好比你经常去一家超市买东西,…

    2025年12月21日 好文分享
    000
  • 前端进行文件上传的各种方法总结(代码)

    这篇文章给大家介绍的文章内容是关于前端进行文件上传的各种方法总结(代码),有很好的参考价值,希望可以帮助到有需要的朋友。 一、通过Form表单提交上传 HTML  enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交完毕之后直接进行了跳转,这对…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信