精华内容
下载资源
问答
  • 理解动态HTML.ppt
    2021-06-13 13:55:26
    更多相关内容
  • 1.静态网页和动态网页的区别不在于: 会不会动 2.静态网页和动态网页的区别在于: 静态网页是一次编写后直接放在服务器上,服务器不用编译,就可以直接运行,修改网页内容麻烦,后期不会有大的改动。修改网页...

    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中数组的对象

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

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

    展开全文
  • 本节课的实验内容主要分为三个板块:HTML,CSS,JavaScript,其中,我对HTML技术的应用得到了熟练运用,并对其他动态网页设计方法进行了大致的了解。HTML是Hypertext Markup Language的英文缩写,即超文本标记语言。它...
  • 静态网页与动态网页理解

    千次阅读 2016-12-11 22:09:45
    静态网页的工作原理 静态网页也称为普通网页,是相对网页而言的。静态网页不是指网页中的元素都是静止不动的,而是指网页文件中没有程序代码,只有HTML(超文本标记语言)标记,一般后缀为.htm、.html、.shtml或.xml...

    静态网页的工作原理

        静态网页也称为普通网页,是相对网页而言的。静态网页不是指网页中的元素都是静止不动的,而是指网页文件中没有程序代码,只有HTML(超文本标记语言)标记,一般后缀为.htm、.html、.shtml或.xml等。在静态网页中,可以包括GIF动画,鼠标经过Flash按钮时,按钮可能会发生变化。

        静态网页一经制成,内容就不会再变化,不管何人何时访问,显示的内容都是一样的。

        如果要修改网页的内容,就必须修改其源代码,然后重新上传到服务器上。

        对于静态网页,用户可以直接双击打开,看到的效果与访问服务器是相同的,即服务器参加与否对页面的内容是不会有影响的。这是因为在用户访问该网页之前,网页的内容就已经确定,无论用户何时、以怎样的方式访问,网页的内容都不会再改变。

    静态网页的工作流程可以分为以下4个步骤。

    1. 编写一个静态文件,并在Web服务器上发布;
    2. 用户在浏览器的地址栏中输入该静态网页的URL(统一资源定位符)并按回车键,浏览器发送请求到Web服务器;
    3. Web服务器找到此静态文件的位置,并将它转换为HTML流传送到用户的浏览器;
    4. 浏览器收到HTML流,显示此网页的内容;

    在步骤2 - 4中,静态网页的内容不会发生任何变化。其工作原理图,如下所示。

    image

     

    动态网页的工作原理

        动态网页是指在网页文件中除了HTML标记以外,还包括一些实现特定功能的程序代码,这些程序代码使得浏览器与服务器之间可以进行交互,即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同,一般为.asp、.aspx、cgi、.php、.perl、.jsp等。动态网页可以根据不同的时间、不同的浏览者显示不同的信息。常见的留言板、论坛、聊天室都是用动态网页实现的。

        动态网页相对复杂,不能直接双击打开。动态网页的工作流程分为以下4个步骤。

    1. 编写动态网页文件,其中包括程序代码,并在Web服务器上发布;
    2. 用户在浏览器的地址栏中输入该动态网页的URL并按回车键(Enter),浏览器发送访问请求到Web服务器;
    3. Web服务器找到此动态网页的位置,并根据其中的程序代码动态建立HTML流传送到用户浏览器;
    4. 浏览器接收到HTML流,显示此网页的内容;

    从整个工作流可以看出,用户浏览动态网页时,需要在服务器上动态执行该网页文件,将含有程序代码的动态网页转化为标准的静态网页,最后把静态网页发送给用户。其工作原理图,如下所示。

    image

    展开全文
  • JSP动态网站设计案例教程(第2版)教案完整版(含该书的教学大纲)
  • 介绍动态网页与静态网的区别。然大家更好的理解网页在添加过程中的区别。
  • 静态网页和动态网页的区别 动态网页和静态网页的区别,首先要分别了解两个概念,就是什么是静态网页,什么是动态网页,并且学会区分哪些是静态哪些是动态。 静态网页: (1)静态网页不能简单地理解成静止不动的...
  • 如上网页效果用js很容易实现,但用纯css实现此动态功能,意在加深对hover和position定位的理解。与大家分享,欢迎指正。 可以看到,这种效果底层是a标签,hover状态中凭空弹出一个解释框,我们称为元素2。那么要想让...
  • 动态网站制作课件

    2018-03-14 11:06:23
    动态网站制作相关课件,帮助初学者更好的掌握动态网页的制作方法,能够有效地更好理解
  • 在实际例程去验证书本上的理论能加深你对理论的理解;二是学会总结,把学习、运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识。以下是笔者在学习...
  • 理解动态HTML教学的设计理解动态HTML教学的设计优质课展台2012年10月底,江南大学举办的“国培计划”高中信息技术教师研修班在无锡市天一中学开课,听了由夏燕萍和马畅两位老师上的两节《理解动态HTML》的同题异构课...

    理解动态HTML教学的设计

    理解动态HTML教学的设计

    优质课展台

    2012年10月底,江南大学举办的“国培计划”高中信息技术教师研修班在无锡市天一中学开课,听了由夏燕萍和马畅两位老师上的两节《理解动态HTML》的同题异构课。两位老师的教学方式各有千秋,在同一教学内容的处理方面显现了各自的特点,我们又邀请了湖南的张葵老师为此次同课异构的两节课做了点评。

    ● 教材分析

    《理解动态HTML》是教育科学出版社出版的高二选修《网络技术应用》第五章第二节。第四章是“建设主题网站”,本章所学的技术正好能够用在主题网站上,可以使网页更加生动活泼,具备更丰富、更个性化的交互功能。本章的第一节《认识动态网页》主要阐述了“动态HTML”、“动态网页”的概念以及“动态网页和静态网页的比较”等问题,并且教会学生使用FrontPage自带的“动态HTML效果”来实现一些简单的网页特效。本节课的内容分为两部分,分两课时来上。第一课时主要介绍动态HTML的核心技术,着重讲解客户端脚本语言和JavaScript的概念,以及使用JavaScript脚本的两种方式。第二课时则是介绍CSS层叠样式表的概念和三种使用方式,为第三节《应用动态HTML》的教学做好铺垫。

    ● 学生分析

    通过第四章以及本章第一节的学习,学生已经对网页、HTML标记语言及动态HTML等概念有了比较清晰的认识,也掌握了基本的网页设计技能。为了承前启后,并且激发学生的兴趣,本节课提供了两个主题网站,请学生为其添加动态效果。由于是借班上课,主题网站是笔者的学生做的,开课班的学生对网站内容不完全熟悉,操作起来稍有难度。学生一般会对网页代码产生畏难情绪,而本节课的重点并不在JavaScript脚本语言上,只要求学生能在网页源代码中识别JavaScript脚本,并能将脚本代码插入到网页的适当位置即可。因此,对知识与技能的要求并不高,但要将脚本运用得恰到好处,对学生的技术运用能力有一定的挑战。

    ● 教学目标

    知识与技能目标:初步了解动态HTML的三个核心技术;理解客户端脚本语言和JavaScript的概念;学会在HTML中嵌入JavaScript脚本,并能做适当修改;学会建立JavaScript脚本文件,并能在网页中调用;能够根据网页的内容、风格选择适当的网页特效。

    过程与方法目标:通过半成品加工掌握JavaScript脚本的使用方法;通过学习网站,学会自主学习,掌握知识及技能;通过作品交流,培养表达、交流和鉴赏能力。

    情感态度与价值观目标:通过网页欣赏和制作,培养发现美、欣赏美和创造美的意识和能力;通过学习和应用客户端脚本,培养严谨、细致的学习习惯,体验技术的魅力和价值,提高学习兴趣;通过作品交流,增进同学间互动,学会分享和倾听,体验成功喜悦和同学友谊。

    ● 教学重、难点

    重点:客户端脚本和JavaScript的概念,网页中使用JavaScript脚本的两种方法。

    难点:动态HTML和客户端脚本的概念,JavaScript脚本代码的识别及修改。

    ● 教学策略

    本节课采用基于学习网站的自主学习方式,引导学生主动探索动态HTML的奥秘,理解客户端脚本语言及JavaScript代码的概念,学会在网页中运用JavaScript脚本的两种方式,并运用到练习网站中,最后通过作品交流来分享技术和成果。在新课导入中,以两个有趣的动态网页为例,揭示动态HTML的三大核心技术,用以激发学生兴趣。在知识要点中,教师简明扼要地介绍了相关概念和技术要领。在学习活动中,教师循序渐进地安排了三个任务,分别是嵌入JS脚本、自选脚本及调用JS文件的练习。在作品交流中,教师要求学生介绍并演示自己在练习网站中所用的JS效果,分享练习感受,并推荐其他学生的作品。

    ● 教学过程

    1.情境导入(5分钟)

    师:请同学们打开浏览器,访问学习网站http://00/,使用学号登录网站。打开左侧“新课导入”栏目,查看两个动态网页实例及技术揭秘,并验证。

    学生登录网站并访问相应网页。学生打开实例一:Happy halloween(万圣节快乐),如图1,网页一中会弹出两个对话框,还能用鼠标让南瓜图片跳舞。查看网页一的源代码,查找关键词“Script”和“Document”。学生打开实例二:Slide Bar(网页调色板),如图2,可以移动网页二中的三个滑块,实现调色板功能。查看网页二的源代码,找到关键词“Script”、“Document”及“Style”。

    教师解释关键词的含义,引入动态HTML的三大核心技术:客户端脚本(Script)、文档对象模型(DOM)和层叠样式表(Style)。

    2.新知导学及学习活动(35分钟)

    (1)新知导学

    教师打

    展开全文
  • 静态网页和动态网页的区别

    千次阅读 2018-09-09 08:24:22
    2、为了让静态web页面显示更加好看,使用javascript/VBScript/ajax(AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。)但是这些特效都是在客户端...
  • JSP动态网页技术

    千次阅读 2020-07-13 11:52:53
    Jsp是动态网页技术,jsp是一个servlet(jsp底层是java,需要进行编译,编译之后的文件就是一个java的servlet类) Jsp是html和java代码的结合版的网页 以jsp为后缀的文件就是一个jsp脚本。 jsp文件的工作原理 转换为...
  • 关于动态网页的一些理解

    千次阅读 2011-05-20 14:14:00
    动态网页是指网页文件里包含了程序代码,通过后台数据库与Web服务器的信息交互,由后台数据库提供实时数据更新和数据查询服务。动态网页是是与静态网页相对应的,也就是说,网页 URL的后缀不是.htm、.html、.shtml、...
  • 内容简介:《PHP动态网站开发实例教程》课程标准一、课程定位本课程是计算机类及相关专业的核心课程,是培养学生Web服务器端动态页面设计能力的支撑课程。本课程主要培养学生的动态页面设计能力,该课程综合PHP语言...
  • JSP的全名是Java Server Pages,是一种动态网页技术标准。如果从直观的角度来讲,JSP技术其实就是在HTML文件中插入Java语言和JSP标记,从而使网页成为一个动态网页动态网页 到底什么是动态网页呢?动态网页不是它...
  • Nginx动态网站LNMP

    千次阅读 2020-01-11 17:55:37
    什么是LNMP ...LNMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写。 即Linux+Nginx+Mysql+PHP网站服务器架构 这四种软件均为免费开源软件,组合到一起,成为一个免费、...
  • 动态网页和静态网页的区别,首先要分别了解两个概念,就是什么是静态网页,什么是动态网页,并且学会区分哪些是静态哪些是动态。 静态网页: (1)静态网页不能简单地理解成静止不动的网页,他主要指的是网页中没有...
  • nodejs 爬取动态网页

    万次阅读 2018-06-25 09:40:35
    npm install request -save 注意因为头条是动态网页,所以无法用 cheerio 来分析网页,所以只需要这一个包就足够了 创建文件 创建一个 image 文件夹用于保存图片数据。 创建一个 js 文件用来写程序。比如 ...
  • PPT文档,共170页。 介绍ASP的内置对象,主要内容包括Request对象、Response对象、Application对象、Session对象、Server对象和ObjectContext对象。...读者还需进一步理解ASP如何通过调用其内置对象来实现基本操作。
  • 5.2 理解动态HTML 第五章 动态网页制作 1下列哪些动态效果使用了动态网页技术? A 鼠标指针指向后文字变成绿色? B 打开某网站时自动弹出一个新窗口 C 网页中不断变化的GIF动画? ? D 网页中自动更新的日期 2 网页打开...
  • 52 理解动态HTML.ppt

    2021-06-13 16:20:49
    52 理解动态HTML5.2 理解动态HTML 实现网页动态效果 构成动态HTML的核心技术: 什么是客户端脚本语言? 最常用的客户端脚本语言 JavaScript VBScript 什么是JavaScript? 面向浏览器的网页脚本编程语言 Javascript...
  • 静态网页与动态网页的区别

    千次阅读 2017-07-26 18:18:10
    静态网页和动态网页各有特点,网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少,如果网站功能比较简单,内容更新量不是很大,采用纯静态网页的方式会更简单,反之一般要采用动态网页技术来...
  • 三种动态网页技术的简要分析

    万次阅读 2016-11-25 22:12:37
    动态网页技术可以非常方便地处理用户的请求,在Web开发中它们的地位是非常重要的。目前比较流行的动态网页技术有JSP、ASP、PHP等,下面分别简要介绍这些技术的特点。1 ASP技术ASP技术是基于.NET平台的一种动态网页...
  • 《《让网页动起来----动态HTML》教学案例.doc》由会员分享,可免费在线阅读全文,更多与《《让网页动起来----动态HTML》教学案例》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、vaScrit代码。...
  • 动态网页数据抓取

    千次阅读 2019-11-15 15:06:49
    动态网页数据抓取 一、网页 1.传统网页: 如果需要更新内容,则需要重新加载网页。 2.动态网页: 使用AJAX则不需要加载更新整个网页,实现部分内容更新。 二、什么是AJAX? AJAX(Asynchronouse JavaScript ...
  • 小伙伴们知道如何在java栈中内存动态扩展吗?这是虚拟机中的一个概念,下面让我们一起来看看该如何实现吧。一、内存概念在java中,我们一般会简单把java内存区域划为两种:堆内存与栈内存。其实这种划分是比较粗粒度...
  • 爬取Ajax动态加载和翻页时url不变的网页+网站案例

    万次阅读 多人点赞 2018-01-30 15:13:37
    最近在爬取一个网页的时候,遇到了需要对对多页表格的爬取,但是在对表格进行翻页的时候,url的地址并不会改变,而且网页的源代码中只有当前加载页出现的表格内容,并没有其余页所对应的的内容,所以一开始纠结了很...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 228,530
精华内容 91,412
关键字:

动态网页的理解