当前位置：首页 > wzjs >正文

银行网站建设方案视频网站推广优化

wzjs 2025/7/30 21:19:33

银行网站建设方案视频,网站推广优化,泰安新闻网今日头条,设计专业新手网站目录静态页面和动态页面的区别1.JavaScript的引入方式1.1外部JavaScript1.2内部JavaScript1.3元素属性JavaScript本章使用到的方法一个简单的 JavaScript 程序 “HTML 控制网页的结构，CSS 控制网页的外观，而 JavaScript 控制网页的行为” 静态页面和动态…

静态页面和动态页面的区别

不是 “会动” 的页面就叫动态页面，页面加入了 JavaScript 也不一定是动态页面，静态页面和动态页面的区别在于。是否与服务器进行数据交互，简单来说就是，是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的四种情况都不一定是动态页面：

带有音频和视频
带有Flash动画
带有CSS动画
带有JavaScript动画

1.JavaScript的引入方式

外部 JavaScript
内部 JavaScript
元素事件 JavaScript

1.1外部JavaScript

外部 JavaScript 是最理想的 JavaScript 引入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 在head中引入 --><script src="index.js"></script>
</head>
<body><!-- 在body中引入 --><script src="index.js"></script>
</body>
</html>

注：对于 CSS 来说，外部 CSS 文件只能在 head 中引入。不过对于 JavaScript 来说，外部 JavaScript 文件不仅可以在 head 中引入，还可以在 body 中引入。

此外还有一点需要注意，引入外部 CSS 文件使用的是 link 标签，而引入外部 JavaScript 文件使用的是 script 标签。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入外部CSS --><link rel="stylesheet" href="index.css"><!-- 引入外部 JavaScript --><script src="index.js"></script>
</head>
<body>
</body>
</html>

rel="stylesheet"：指定该文件是一个样式表。

在 HTML 中，使用相对路径时，一般情况下不需要加 ./ 前缀，除非你希望显式地表示当前目录。

1.2内部JavaScript

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 在head中引入 --><script>// 内部JavaScriptalert("head内部JavaScript");</script>
</head>
<body><!-- 在body中引入 --><script>// 内部JavaScriptalert("body内部JavaScript");</script>
</body>
</html>

实际上 <script></script> 是一种简写形式，它其实等价于：

<script type="text/javascript"></script>

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">document.write("Hello World!");</script>
</body>
</html>

在这里插入图片描述

document.write()表示在页面中输出一个内容。

1.3元素属性JavaScript

指的是在元素的 “事件属性” 中直接编写 JavaScript 或函数调用

直接编写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="按我" onclick="alert('Hello!')">
</body>
</html>

函数调用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function myalert(){alert("Hello");}</script>
</head>
<body><input type="button" value="按我" onclick="myalert()">
</body>
</html>

本章使用到的方法

document.wirte() 在页面输出内容
alert() 弹出对话框

一个简单的 JavaScript 程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){alert("欢迎光临");}window.onbeforeunload = function(){var e = event || window.event;e.returnValue = "确定离开当前页面吗？";}</script>
</head>
<body>
</body>
</html>