对于动态网页和静态网页的理解，以及提供例子说明

1.静态网页和动态网页的区别不在于：

会不会动

2.静态网页和动态网页的区别在于：

静态网页是一次编写后直接放在服务器上，服务器不用编译，就可以直接运行，修改网页内容麻烦，后期不会有大的改动。修改网页内容时，需要从服务器上把代码拷贝下来，然后把代码放在编辑器中，修改想要更改的内容，操作不便。

动态网页可以不用修改网页代码，在网页代码不变的情况下，操作数据库或者其他步骤后，就可以更改网页内容。

下面举例说明：

我建一张表格，分别用静态页面和简单的动态页面来直观的感受为什么要使用动态页面。

静态网页：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><table border="1" width="80%" style="margin: 0 auto;"><caption>用户列表</caption><thead><th>编号</th><th>用户名</th><th>昵称</th><th>头像</th><th>操作</th></thead><tbody id="adminBody"><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>操作员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>生產员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr><tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr></tbody></table>
</body>
</html>

网页效果图

想要修改网页要怎么修改呢？

自己手动在网页上面修改，一个个去更改，对于产品在不断改变的网站来说，相当麻烦。静态网页适合不需要更改的网站。

简单的动态网页：

表格的表头不需要改变，所以写成静态/写死，表格的内容需要改变，所以要动态创建。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><table border="1" width="80%" style="margin: 0 auto;"><caption>用户列表</caption><thead><th>编号</th><th>用户名</th><th>昵称</th><th>头像</th><th>操作</th></thead><tbody id="adminBody"><!-- <tr style="text-align: center;"><td>1</td><td>admin</td><td>管理员</td><td><img src="./images/1.jpg" width="50px" height="50px" alt=""></td><td><input type="button" value="刪除"></td></tr> --></tbody></table>
</body>
<script src="./data.js"></script>
<script src="./list.js"></script></html>

data.js

var users = [{userId: 1,userName: 'zhangsan',likeName: '張三',heading: './images/1.jpg',},{userId: 2,userName: 'lisi',likeName: '李四',heading: './images/2.jpg',},{userId: 3,userName: 'wangwu',likeName: '王五',heading: './images/3.jpg',},{userId: 1,userName: 'zhangsan',likeName: '張三',heading: './images/1.jpg',},{userId: 2,userName: 'lisi',likeName: '李四',heading: './images/2.jpg',},{userId: 3,userName: 'wangwu',likeName: '王五',heading: './images/3.jpg',},{userId: 1,userName: 'zhangsan',likeName: '張三',heading: './images/1.jpg',},{userId: 2,userName: 'lisi',likeName: '李四',heading: './images/2.jpg',},{userId: 3,userName: 'wangwu',likeName: '王五',heading: './images/3.jpg',},{userId: 1,userName: 'zhangsan',likeName: '張三',heading: './images/1.jpg',},{userId: 2,userName: 'lisi',likeName: '李四',heading: './images/2.jpg',}];

list.js:

window.onload = function() {tableInit();
}function tableInit() {var tbody = document.getElementById("adminBody");for (var i = 0; i < users.length; i++) {var tr1 = document.createElement("tr"); //创建元素tr1.style.textAlign = "center";//编号var td1 = document.createElement("td");td1.innerHTML = users[i].userId;tr1.appendChild(td1); //添加元素tbody.appendChild(tr1);//用户名var td2 = document.createElement("td");td2.innerHTML = users[i].userName;tr1.appendChild(td2); //添加元素tbody.appendChild(tr1);//昵称var td3 = document.createElement("td");td3.innerHTML = users[i].likeName;tr1.appendChild(td3); //添加元素tbody.appendChild(tr1);//头像var td4 = document.createElement("td");var img = document.createElement("img");img.src = users[i].heading;td4.appendChild(img);img.style.width = "50px";img.style.header = "50px";td4.appendChild(img); //添加元素tr1.appendChild(td4);tbody.appendChild(tr1);//操作var td5 = document.createElement("td");var inputDel = document.createElement("input");inputDel.type = "button";inputDel.value = "删除";//setAttribute,设置自定义inputDel.setAttribute("userId", users[i].userId);inputDel.onclick = function() {window.alert("我要被删除了吗，id" + this.getAttribute('userId'));}td5.appendChild(inputDel);tr1.appendChild(td5);}}

网页效果：

想要修改网页要怎么修改呢？

页面上面不需要改动

只需要改变data.js中数组的对象

这样就不需要在网页上面直接修改代码了，省了很多事。

想要改变网页内容的话，把数组里面的各个对象改一改就可以了。

对于动态网页和静态网页的理解，以及提供例子说明相关推荐

动态网页和静态网页的区别是什么？
动态网页和静态网页的区别,首先要分别了解两个概念,就是什么是静态网页,什么是动态网页,并且学会区分哪些是静态哪些是动态. 静态网页: (1)静态网页不能简单地理解成静止不动的网页,他主要指的是网页中没 ...
Python爬虫: 单网页所有静态网页动态网页爬取
Python爬虫: 单网页所有静态网页动态网页爬取前言:所有页代码主干均来自网上!!!感谢大佬们. 其实我对爬虫还挺感兴趣的,因为我玩instagram(需要科学上网),上过IG的人都知道IG虽 ...
动态网页和静态网页的差异
本节介绍本节主要为大家介绍什么是动态网页,什么是静态网页,如果你已经了解了这部分内容,那么可以跳过此篇博文. 静态网页我们说静态网页的内容是无法随着用户的行为而改变网页本身的内容,是固定的,这个内 ...
动态网页和静态网页的区别
在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像. ...
动态网页和静态网页之间的区别？
静态网页和静态网页的区别: 程序是否在服务器端运行,是重要标志.在服务器端运行的程序.网页.组件,属于动态网页,它们会随不同客户.不同时间,返回不同的网页.运行于客户端的程序.网页.插件.组件,属于静 ...
利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息服务器端:验证发来的账号信息,然后给出反馈客户端和服务器类似两人沟 ...
如何用动态网页生成静态网页？
一般主页如果访问量大,会做成htm的静态网页形式,定时更新. 我的想法是主页是一个index.aspx文件,然后生成一个index.htm静态文件. 用户访问的时候就可以访 ...
python 静态网页_Python静态网页爬虫相关知识
想要开发一个简单的Python爬虫案例,并在Python3以上的环境下运行,那么需要掌握哪些知识才能完成一个简单的Python爬虫呢? 爬虫的架构实现爬虫包括调度器,管理器,解析器,下载器和输出器. ...
dreamweaver网页设计作业制作学生NBA篮球网页 WEB静态网页作业模板大学生校园篮球网页代码 dw个人网页作业成品

对于动态网页和静态网页的理解，以及提供例子说明

对于动态网页和静态网页的理解，以及提供例子说明相关推荐

最新文章

热门文章