html必知必会-html内嵌JavaScript和文件路径

文章目录

  • HTML JavaScript
  • HTML `<script>` 标签
  • JavaScript 的简单示例
  • HTML `<noscript>` 标签
  • HTML 文件路径
  • 绝对文件路径
  • 相对文件路径
  • 总结


HTML JavaScript

JavaScript 使 HTML 页面更具动态性和交互性。

示例

<!DOCTYPE html>
<html>
<body><h1>My First JavaScript</h1><button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
单击我以显示日期和时间</button><p id="demo"></p></body>
</html> 

HTML <script> 标签

HTML <script> 标签用于定义客户端脚本 (JavaScript)。

<script> 元素要么包含脚本语句,要么通过 src 属性指向外部脚本文件。

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

要选择 HTML 元素,JavaScript 最常使用 document.getElementById() 方法。

此 JavaScript 示例将“Hello JavaScript!”写入 id=“demo” 的 HTML 元素:

示例

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

JavaScript 的简单示例

以下是 JavaScript 可以执行的一些示例:

示例
JavaScript 可以更改内容:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

示例
JavaScript 可以更改样式:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

示例
JavaScript 可以更改属性:

document.getElementById("image").src = "picture.gif";

HTML <noscript> 标签

HTML <noscript> 标签定义要向已在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容:

`示例

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>

HTML 文件路径

文件路径描述文件在网站文件夹结构中的位置。

文件路径示例
路径描述

<img src="picture.jpg"> “picture.jpg”文件与当前页面位于同一文件夹中
<img src="images/picture.jpg"> “picture.jpg”文件位于当前文件夹中的图像文件夹中
<img src="/images/picture.jpg"> “picture.jpg”文件位于当前网站根目录的图像文件夹中
<img src="../picture.jpg"> “picture.jpg”文件位于当前文件夹上一级文件夹中

文件路径用于链接到外部文件,例如:

网页
图像
样式表
JavaScript

绝对文件路径

绝对文件路径是文件的完整 URL:

示例

<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="csdn">
csdn

相对文件路径

相对文件路径指向相对于当前页面的文件。

在以下示例中,文件路径指向位于当前网站根目录下的图像文件夹中的文件:

示例

<img src="/images/csdn.jpg" alt="csdn">

在以下示例中,文件路径指向位于当前文件夹中的图像文件夹中的文件:

示例

<img src="images/csdn.jpg" alt="csdn">

在以下示例中,文件路径指向位于当前文件夹上一级文件夹中的图像文件夹中的文件:

示例

<img src="../images/picture.jpg" alt="Mountain">

总结

本文介绍了的html内嵌JavaScript和文件路径使用,如有问题欢迎私信和评论

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

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

相关文章

leetcode9 -- 回文数

题目描述&#xff1a; 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&#xff0c;…

vue3前端开发-小兔鲜项目-路由缓存的更新解决办法

vue3前端开发-小兔鲜项目-路由缓存的更新解决办法&#xff01;默认情况下&#xff0c;如果我们不想办法解决这个问题&#xff0c;vue3框架有个默认的约定&#xff0c;那就是&#xff0c;当仅仅是路由参数发生变化的时候&#xff0c;框架并不会更新整个模块的内容。但是我们现在…

自训练和增量训练word2vec模型

1、自己准备训练语料文件 根据自己的业务场景准备训练数据&#xff0c;比如用户在商城上的同购行为序列或同浏览行为序列。 我们希望通过自己训练业务相关的语料word2vec模型来获得词嵌入、词相关性查询等。 1.1 准备语料库文件 # 示例&#xff1a;准备自己的一个大规模的语…

RDMA通信4:MR(Memory Region, 内存区域)基本概念和作用

MR简介 RDMA通信中MR(Memory Region)指的是由RDMA软件层在内存中规划出的一片区域&#xff0c;用于存放收发的数据。IB协议中&#xff0c;用户在申请完用于存放数据的内存区域之后&#xff0c;都需要通过调用IB框架提供的API注册MR&#xff0c;才能让RDMA网卡访问这片内存区域…

正则表达式概述

一、正则表达式概述 正则表达式&#xff08;Regular Expression&#xff0c;简称regex或regexp&#xff09;是一种强大的文本处理工具&#xff0c;它使用一种特定的模式来描述和匹配一系列符合某个句法规则的字符串。在Python中&#xff0c;我们可以使用re模块来操作正则表达式…

2.1、matlab绘图汇总(图例、标题、坐标轴、线条格式、颜色和散点格式设置)

1、前言 在 MATLAB 中进行绘图是一种非常常见且实用的操作&#xff0c;可以用来可视化数据、结果展示、分析趋势等。通过 MATLAB 的绘图功能&#xff0c;用户可以创建各种类型的图形&#xff0c;包括线图、散点图、柱状图、曲线图等&#xff0c;以及三维图形、动画等复杂的可视…

数据中台 | 3分钟带你读懂数据中台的由来

1.数据中台产生的原因 数据中台的概念起源于中国阿里巴巴集团提出的“大中台&#xff0c;小前台”战略。这一理念的核心在于通过构建强大的中台体系&#xff0c;为前端的快速创新和个性化业务需求提供强有力的支持。具体到数据中台&#xff0c;其设计初衷是为了应对企业内部数…

springboot在加了mapper之后报错

springboot在加了mapper之后报错 最后发现是spring boot版本不兼容&#xff0c;spring-boot-starter-parent换成3.0.5之后可以了

计算机基础-IO

一、裸机中的IO 我们先看下计算机的组成部分&#xff1a; 从图中我们很清楚的看到Input/Output 即为 IO&#xff0c;也就是计算机主机和外部设备进行信息的交换。 这种交换可能是磁盘IO也有可能是网络IO。 二、操作系统中的IO 操作系统分为内核态和用户态&#xff0c;且默认…

云WAF如何实现对XSS攻击的检测和阻断?

云WAF对XSS攻击的检测和阻断机制 云WAF&#xff08;Cloud Web Application Firewall&#xff09;是一种基于云平台的网络安全解决方案&#xff0c;专门设计用来保护Web应用程序免受各种网络攻击&#xff0c;包括跨站脚本攻击&#xff08;XSS&#xff09;。云WAF通过以下几个关…

活动预告|8月3日 Streaming Lakehouse Meetup · Online 与你相约!

随着大数据分析技术的发展&#xff0c;越来越多的企业采用了数据湖架构。基于 Lakehouse 的架构优势&#xff0c;结合 Flink 的 Streaming 实时流处理能力&#xff0c;Flink 推出了新一代的“Streaming Lakehouse”技术。这一技术旨在能够让数据在湖上自由流动&#xff0c;为用…

js 习题 3

文章目录 绪论12345678910 求最长公共后缀111213 最大公约数1415结语 绪论 『虽有遗憾&#xff0c;绝不后悔。』—— 「古剑奇谭」 1 let buf"";process.stdin.on("readable",function(){let chunkprocess.stdin.read();if(chunk){bufchunk.toString();} …

HTTP/1.1、1.2、1.3详细信息和主要区别

HTTP&#xff08;超文本传输协议&#xff09;是一种用于传输超文本&#xff08;例如网页&#xff09;的应用层协议。HTTP/1.1 是当前最广泛使用的版本&#xff0c;而 HTTP/2 和 HTTP/3 是其后续版本&#xff0c;旨在提高性能和效率。以下是这些版本的详细信息和主要区别 HTTP/…

从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts

项目启动 初始化vue3项目 这里建议先下载pnpm&#xff0c;下载速度更快&#xff0c;如果还没下载可以使用 npm install -g pnpm 如果遇到报错问题&#xff0c;如下 可以在命令行输入下面的指令以切换到淘宝镜像源 npm config set registry https://registry.npm.taobao.org…

2024最佳游戏引擎排行

游戏产业几十年来一直是一个大生意&#xff0c;而且发展势头迅猛。据估计&#xff0c;全球游戏市场在 2025 年每年将达到 5031.4 亿美元&#xff0c;2023 年为 3960 亿美元。 尽管如今有市面上有各种各样的解决方案&#xff0c;但游戏开发人员和管理者在选择适合他们需求的游戏…

LINUX操作系统安全

一、概述内容 操作系统负责计算机系统的资产管理&#xff0c;支撑和控制各种应用程序运行&#xff0c;为用户提供管理计算机系统管理接口。操作系统也是构成网络信息系统的核心关键组件&#xff0c;其安全可靠性决定了计算机系统的安全性和可靠性。 操作系统安全是指满足安全…

kettle从入门到精通 第八十课 ETL之kettle kettle中的json对象字段写入postgresql中的json字段

场景&#xff1a;源数据库表为mysql的其中有json字段&#xff0c;通过kettle 查询出来 插入到目标数据库 postgresql中&#xff0c;对应的表中也有json字段。。但是报错&#xff0c;提示kettle查询出来是varchar的的字段&#xff0c;无法插入到目标数据库中。 1、创建测试表。 …

golang设置远程调试

1. 目标机器构建安装dlv https://github.com/go-delve/delve go build之后将编译号的dlv命令路径添加到PATH里 2. 目标机器下载源代码并且运行dlv dlv debug --headless --listen:2345 --api-version2 --accept-multiclient 3.本机添加go remote 4. 设置断点即可

披荆斩棘:Python开发者在市场低迷期快速找到工作的策略

披荆斩棘&#xff1a;Python开发者在市场低迷期快速找到工作的策略 在瞬息万变的科技领域&#xff0c;市场低迷期对各个领域的专业人士来说都充满了挑战。Python开发者以其灵活性和专业性著称&#xff0c;但也无法完全避免经济波动的影响。然而&#xff0c;通过采取正确的策略…