HTML基础:脚本 script 标签

你好,我是云桃桃。

1枚程序媛,大专生,2年时间从1800到月入过万,工作5年买房。 分享成长心得。

255篇原创内容-公众号

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

脚本标签是 HTML 中的一种元素,用于在网页中嵌入脚本代码,主要作用是加载和执行 JavaScript 代码。通过脚本标签,可以实现对网页的交互性、动态性和功能性的增强。

那比如,从功能性来说,我们填写一个用户名,密码的表单,直接点提交,我们可以做到校验给予提示。

图片

在 HTML 页面上,通常有两种脚本标签用于加载和执行 JavaScript 代码:

1、<script> 标签: 这是最常见的脚本标签,用于在 HTML 页面中嵌入 JavaScript 代码。它可以放置在 <head> 或 <body> 中,用于在页面加载时或页面中的特定位置执行脚本。

2、<noscript> 标签: 这个标签用于提供在浏览器不支持 JavaScript 或用户禁用 JavaScript 时的替代内容。在没有 JavaScript 的情况下,<noscript> 中的内容将会被显示。

这两个标签在 HTML 页面中用于管理和处理 JavaScript 脚本的加载和执行。

实例

1、script 标签

当我们在 HTML 页面上插入 JavaScript 脚本时,可以使用 <script> 标签来实现。下面是一个简单的示例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Hello, World!</title></head><body><h1>JavaScript 示例</h1><!-- 在这里插入 JavaScript 代码 --><script>// 使用 document.write() 在页面上打印 "Hello, World!"document.write('Hello, World!')</script></body>
</html>

图片

在这个示例中,我们将 JavaScript 代码嵌入到了 <script> 标签内部,并使用 document.write() 方法在页面上打印出 "Hello, World!"。当浏览器加载这个页面时,就会执行 <script> 标签内的 JavaScript 代码,并在页面上输出 "Hello, World!"。

2、noscript 标签

当浏览器不支持 JavaScript 或者用户禁用了 JavaScript 时,可以使用 <noscript> 标签来提供一些备用内容。下面是一个简单的示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>NoScript 示例</title></head><body><h1>JavaScript 示例</h1><!-- JavaScript 代码 --><script>// 使用 document.write() 在页面上打印 "Hello, World!"document.write('Hello, World!')</script><!-- 当浏览器不支持 JavaScript 时显示的备用内容 --><noscript><p>您的浏览器不支持 JavaScript,无法显示页面内容,请启用 JavaScript 或使用支持 JavaScript 的浏览器访问。</p></noscript></body>
</html>

在这个示例中,如果浏览器不支持 JavaScript 或者用户禁用了 JavaScript,<noscript> 标签内的内容就会被显示出来,提醒用户启用 JavaScript 或者使用支持 JavaScript 的浏览器。

那我们浏览器默认没有禁用,可以怎么演示呢?按照如图设置禁用 js。

图片

图片

然后,刷新页面,这时候发现 script 里面的 hello world 不会出现了,noscript 里面的内容出现了。效果出来以后,记得把这个禁用 js 交互 的勾选给取消掉,否则访问其他页面可能就会出现交互异常了。

总结

脚本的作用,包括但不限于以下 4 个方面:

1、实现动态内容: 脚本标签可以用于动态生成、修改或删除 HTML 元素,从而实现页面内容的动态更新和交互。比如,通过 JavaScript 脚本,我们可以动态地向页面中添加新的评论,用户提交评论后,页面会实时更新显示最新的评论内容。

2、处理用户输入: 通过脚本标签,可以对用户的输入进行验证、处理和响应,例如表单提交前的数据验证等。比如,验证我们输入的邮箱是否正确,手机号是否合规,地址是否匹配等。

3、与服务器通信: 可以通过 AJAX 或 Fetch API 等技术与服务器进行通信,从而实现数据的异步加载、更新和交换。

4、实现特效和动画: 利用脚本标签,可以实现各种动态效果和动画,提升用户体验。

总的来说,脚本标签为网页开发者提供了一种强大的工具,使他们能够通过 JavaScript 脚本实现丰富多彩、交互性强的网页功能。本章主要简单了解写法,后续在 JS 模块会有更深入的学习。

好了,以上,本文完。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS(二)---【常见属性、复合属性使用】

零.前言 本篇文章主要阐述CSS常见属性、复合属性&#xff0c;更多前置知识请见作者其它文章&#xff1a; CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客 1.CSS属性 CSS的属性有上百个&#xff0c;但是我们并不需要全部学习&#xff0c;只要我们学习一部分…

MuJoCo 入门教程(一)

系列文章目录 前言 一、简介 MuJoCo 是多关节接触动力学&#xff08;Multi-Joint dynamics with Contact&#xff09;的缩写。它是一个通用物理引擎&#xff0c;旨在促进机器人、生物力学、图形和动画、机器学习以及其他需要快速、准确地仿真铰接结构与环境交互的领域的研究和开…

数据结构(初阶)第二节:顺序表

从本文正式进入对数据结构的讲解&#xff0c;开始前友友们要有C语言的基础&#xff0c;熟练掌握动态内存管理、结构体、指针等章节&#xff0c;方便后续的学习。 顺序表&#xff08;Sequence List&#xff09; 线性表的概念&#xff1a;线性表&#xff08;linear list&#xff…

手写简易操作系统(二十二)--时间管理

前情提要 上一节我们实现了硬盘的驱动&#xff0c;本来这一节打算实现文件系统的&#xff0c;但是文件系统中有个时间属性&#xff0c;所以这里我们先实现操作系统的时间管理。 一、除法 我们的系统是一个32位的系统&#xff0c;在编译一些除法的时候编译的时候没问题&#…

保持ssh断开后,程序不会停止执行

保持ssh断开后&#xff0c;程序不会停止执行 一、前言 笔者做远程部署搞了一阵子&#xff0c;快结项时发现一旦我关闭了ssh连接窗口&#xff0c;远程服务器会自动杀掉我在ssh连接状态下运行的程序。 这怎么行&#xff0c;岂不是想要它一直运行还得要一台电脑一直打开ssh连接咯…

曲线降采样之道格拉斯-普克算法Douglas–Peucker

曲线降采样之道格拉斯-普克算法Douglas–Peucker 该算法的目的是&#xff0c;给定一条由线段构成的曲线&#xff0c;找到一条点数较少的相似曲线&#xff0c;来近似描述原始的曲线&#xff0c;达到降低时间、空间复杂度和平滑曲线的目的。 附赠自动驾驶学习资料和量产经验&…

【C语言】“vid”Microsoft Visual Studio安装及应用(检验内存泄露)

文章目录 前言安装包获取配置VLD完成 前言 我们在写代码时往往容易存在内存泄漏的情况&#xff0c;所以存在这样一个名为VLD的工具用来检验内存泄漏&#xff0c;现在我来教大家安装一下 安装包获取 vld下载网址&#xff1a;https://github.com/KindDragon/vld/releases/tag/…

YOLOv8结合SCI低光照图像增强算法!让夜晚目标无处遁形!【含端到端推理脚本】

这里的"SCI"代表的并不是论文等级,而是论文采用的方法 — “自校准光照学习” ~ 左侧为SCI模型增强后图片的检测效果,右侧为原始v8n检测效果 这篇文章的主要内容是通过使用SCI模型和YOLOv8进行算法联调,最终实现了如上所示的效果:在增强图像可见度的同时,对图像…

【中文视觉语言模型+本地部署 】23.08 阿里Qwen-VL:能对图片理解、定位物体、读取文字的视觉语言模型 (推理最低12G显存+)

项目主页&#xff1a;https://github.com/QwenLM/Qwen-VL 通义前问网页在线使用——&#xff08;文本问答&#xff0c;图片理解&#xff0c;文档解析&#xff09;&#xff1a;https://tongyi.aliyun.com/qianwen/ 论文v3. : 一个全能的视觉语言模型 23.10 Qwen-VL: A Versatile…

读取信息boot.bin和xclbin命令

bootgen读Boot.bin命令 johnjohn-virtual-machine:~/project_zynq/kv260_image_ubuntu22.04$ bootgen -read BOOT-k26-starter-kit-202305_2022.2.bin xclbinutil读xclbin命令 johnjohn-virtual-machine:~/project_zynq/kv260_image_ubuntu22.04$ xclbinutil -i kv260-smartca…

Linux权限提升总结

几个信息收集的项目推荐 运行这几个项目就会在目标主机上收集一些敏感信息供我们参考和使用 一个综合探针&#xff1a;traitor 一个自动化提权&#xff1a;BeRoot(gtfo3bins&lolbas) 使用python2运行beroot.py就可以运行程序&#xff0c;然后就可以收集到系统中的大量信…

mysql锁表问题

问题描述 偶尔应用日志会打印锁表超时回滚 org.springframework.dao.CannotAcquireLockException: ### Error updating database. Cause: com.mysql.cj.jdbc.exceptions.MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting transactionmysql锁…

vue-ueditor-wrap上传图片报错:后端配置项没有正常加载,上传插件不能正常使用

如图所示,今天接收一个项目其中富文本编辑器报错 此项目为vue2项目,富文本编辑器为直接下载好的资源存放在public目录下的 经过排查发现报错的函数在ueditor.all.min.js文件内,但是ueditor.all.min.js文件夹是经过压缩的 所以直接,将index.html中的引用路径修改为ueditor…

商城网站-礼品网站首页html+css+js+说明文档

网页设计与网站建设作业htmlcssjs 预览 说明 单页面&#xff0c;轮播图 获取&#xff1a;https://hpc.baicaitang.cn/2077.html

java的警示之有危险的行为

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;&#x1f468;&#x1f3fb;‍&#x1f393;告别&#xff0c;今天 &#x1f4d4;高质量专栏 &#xff1a;☕java趣味之旅 欢迎&#x1f64f;点赞&#x1f5e3;️评论&#x1f4e5;收藏&#x1f493;关注 &#x1f496;衷心的希…

06 | Swoole 源码分析之 Coroutine 协程模块

首发原文链接&#xff1a;Swoole 源码分析之 Coroutine 协程模块 大家好&#xff0c;我是码农先森。 引言 协程又称轻量级线程&#xff0c;但与线程不同的是&#xff1b;协程是用户级线程&#xff0c;不需要操作系统参与。由用户显式控制&#xff0c;可以在需要的时候挂起、或…

Redis中的复制功能(三)

复制 服务器运行ID 除了复制偏移量和复制积压缓冲区之外&#xff0c;实现部分重同步还需要用到服务器运行ID(run ID): 1.每隔Redis服务器&#xff0c;不论主服务器还是从服务&#xff0c;都会有自己的运行ID2.运行ID在服务器启动时自动生成&#xff0c;由40个随机的十六进制…

迈向数字化医疗:互联网医院APP开发中的设计思路与技术要点

在开发互联网医院APP时&#xff0c;需要综合考虑设计思路和技术要点&#xff0c;确保用户体验和医疗服务质量的提升。接下来&#xff0c;小编将从设计思路和技术要点两个方面进行讲解。 一、设计思路 用户导向&#xff1a;在设计互联网医院APP时&#xff0c;需要将用户体验放在…

RocketMQ 消费者源码解读:消费过程、负载原理、顺序消费原理

B站学习地址 上一遍学习了三种常见队列的消费原理&#xff0c;本次我们来从源码的角度来证明上篇中的理论。 1、准备 RocketMQ 版本 <!-- RocketMQ --> <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-s…