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

news2025/2/26 9:34:48

文章目录

  • 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.coloradmin.cn/o/1960066.html

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

相关文章

iOS18使用技巧:iPhone通话录音开启教程和注意事项

今日早些时候&#xff0c;苹果为iPhone 15 Pro系列的开发者预览版用户推送了iOS 18.1 Beta1测试版的更新&#xff0c;已经注册Apple Beta版软件计划的用户只需打开设置--通用--软件更新即可在线OTA升级至最新的iOS 18.1 Beta1测试版。 说起iOS 18.1最重磅的更新&#xff0c;莫过…

Redis7-入门-安装

1.Redis是什么 REmote Dictionary Server(远程字典服务器) Remote Dictionary Server(远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数据结构&#xff0c;例如String、Hash、List、set、Sorteds…

程序员学长 | 快速学会一个算法,ANN

本文来源公众号“程序员学长”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;快速学会一个算法&#xff0c;ANN 今天给大家分享一个强大的算法模型&#xff0c;ANN。 人工神经网络 (ANN) 是一种深度学习方法&#xff0c;源自人类…

【C++BFS】1020. 飞地的数量

本文涉及知识点 CBFS算法 LeetCode1020. 飞地的数量 给你一个大小为 m x n 的二进制矩阵 grid &#xff0c;其中 0 表示一个海洋单元格、1 表示一个陆地单元格。 一次 移动 是指从一个陆地单元格走到另一个相邻&#xff08;上、下、左、右&#xff09;的陆地单元格或跨过 gr…

html+css 炫酷的流边按钮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 文…

详细教程:在Octo Browser指纹浏览器中配置IPXProxy代理IP的步骤

​Octo Browser是一款反检测指纹浏览器&#xff0c;可防止在线跟踪并保护用户隐私的网络浏览器。用户可以在Octo Browser中设置代理IP&#xff0c;来进行多账户的管理&#xff0c;降低账户关联的风险。下面以IPXProxy代理IP为例&#xff0c;告诉大家如何在Octo Browser指纹浏览…

顺序栈*链栈

逻辑结构,存储结构,运算 栈的定义 栈是只能在一端进行插入,删除操作的线性表; 栈的操作特征为先进后出,栈的逻辑结果为线性结构,是一种特殊的线性表. 栈顶:允许插入,删除 栈底:不允许插入删除 存储结构--顺序存储 (1)定义 #include<stdio.h> #define MaxSize 10 /…

哪些洗地机比较好?揭晓中国十大名牌洗地机

在当今追求高效与品质生活的时代&#xff0c;洗地机作为现代家居清洁的得力助手&#xff0c;其重要性日益凸显。为了帮助大家在众多品牌中筛选出优质之选&#xff0c;我们精心揭晓中国洗地机领域的十大名牌。这些品牌凭借卓越的性能、创新的技术以及良好的用户口碑&#xff0c;…

开启mybatis-plus日志功能

第一部分&#xff1a;配置文件增添参数 增加如下&#xff1a; configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl 第二部分&#xff1a;运行效果展示

大数据信用报告一般都是在哪里查询?

相信现在有不少人都听说过大数据信用&#xff0c;其实早在几年前&#xff0c;大数据就已经作为银行和借贷机构审核申贷人的重要途径&#xff0c;因为传统的征信报告有一定的局限性&#xff0c;无法全方位的了解申贷人的隐形负债&#xff0c;大数据信用报告的作用就显现出来了&a…

Ansys Zemax|如何模拟复杂的菲涅尔透镜

附件下载 联系工作人员获取附件 概述 这篇文章介绍了如何模拟每个菲涅尔环都由不同数据定义的复杂菲涅尔透镜。这种方法也可以用于定义复杂物体。 介绍 菲涅尔透镜与普通透镜有所区别&#xff0c;它是将普通透镜连续、光滑的表面分成一系列同心圆环&#xff0c;这些同心圆环…

手机高清录屏,快速学会的2种绝妙方法!

在移动互联时代&#xff0c;手机不仅仅是通讯工具&#xff0c;更是我们记录生活、分享经验、创作内容的得力助手。而手机高清录屏功能&#xff0c;则为我们捕捉手机屏幕上的每一帧精彩提供了便捷的方式。无论是游戏直播、教学演示&#xff0c;还是视频制作&#xff0c;手机高清…

创建自己的 Omnigraph (python篇)

Omnigraph 是 Nvidia Omniverse 中一个强大的视觉化脚本工具&#xff0c;它让开发者能够以直观和灵活的方式创建复杂的行为和交互性。通过结合 Action Graphs 和 Push Graphs&#xff0c;以及利用丰富的节点库&#xff0c;用户可以在 Omniverse 平台上构建出令人惊叹的虚拟世界…

Ubuntu虚拟机扩容笔记(各种方法都不行版)

1.背景介绍 最近需要对ubuntu的虚拟机下面的挂载根目录上的文件系统对应的硬盘进行扩容&#xff0c;在虚拟机管理平台对磁盘进行扩容后&#xff0c;在图形界面上尝试扩容&#xff1a; 尝试教程主要采用下面教程的第三种方法&#xff1a; Ubuntu22.04 Linux磁盘扩容/硬盘扩展…

【C++】学习笔记——C++11_1

文章目录 十九、C111. 统一的列表初始化{}初始化std::initializer_list 2. 声明autodecltypenullptr 4. 范围for5. STL中的一些变化新容器新方法 6. 右值引用和移动语句左值引用和右值引用 未完待续 十九、C11 1. 统一的列表初始化 {}初始化 在C98中&#xff0c;标准允许使用…

C++ map/set 函数用法解析

一 . set 1.1 set 是什么、关联/非关联式容器 se是一种关联式容器&#xff0c;主要用进行查找的工作。采用了key模型&#xff0c;判断数据在不在。不支持修改的操作。 序列式容器&#xff08;线性表&#xff09;&#xff1a;vector / list /deque&#xff08;单纯存储数据&am…

top命令从入门到精通

top命令从入门到精通 linux平台上一个可以用于性能监控、排查的神器。 响应参数 up&#xff1a;运行时长users&#xff1a;当前登陆了几个用户load average&#xff1a;运行负载 sleeping&#xff1a;休眠进程stopped&#xff1a;终止进程zombie&#xff1a;僵尸进程 us&…

Neutralinojs教程项目实战初体验(踩坑指南),干翻 electron

Neutralinojs 项目实战初体验&#xff08;踩坑指南&#xff09;&#xff0c;干翻 electron Neutralinojs 官方文档 卧槽卧槽&#xff0c;&#xff01;这个年轻人居然用浏览器把电脑关机了_哔哩哔哩_bilibili正是在下 本教程搭建的是纯原生项目&#xff0c;没有和其它前端框架…

【C++BFS】959. 由斜杠划分区域

本文涉及知识点 CBFS算法 LeetCode959. 由斜杠划分区域 在由 1 x 1 方格组成的 n x n 网格 grid 中&#xff0c;每个 1 x 1 方块由 ‘/’、‘’ 或空格构成。这些字符会将方块划分为一些共边的区域。 给定网格 grid 表示为一个字符串数组&#xff0c;返回 区域的数量 。 请注…

整理压缩JavaScript文件

你是不是会担心有专业人员通过你写的JavaScript语法来判断你的接口数据&#xff0c;今天就介绍一种可以封装你写的JavaScript的工具 环境&#xff1a;Windows10、node20.11.1、Vue/cli 5.0.8 uglify-js 是一个流行的 JavaScript 压缩工具&#xff0c;用于减少 JavaScript 文件…