文章目录
- 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">
相对文件路径
相对文件路径指向相对于当前页面的文件。
在以下示例中,文件路径指向位于当前网站根目录下的图像文件夹中的文件:
示例
<img src="/images/csdn.jpg" alt="csdn">
在以下示例中,文件路径指向位于当前文件夹中的图像文件夹中的文件:
示例
<img src="images/csdn.jpg" alt="csdn">
在以下示例中,文件路径指向位于当前文件夹上一级文件夹中的图像文件夹中的文件:
示例
<img src="../images/picture.jpg" alt="Mountain">
总结
本文介绍了的html内嵌JavaScript和文件路径使用,如有问题欢迎私信和评论