动态html文档（html怎么做动态页面）

本篇文章给大家谈谈动态html文档，以及html怎么做动态页面对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、jquery 或 js 如何动态创新html文档？
• 2、什么是静态HTML，什么是动态的？区别是什么？
• 3、什么是静态HTML？什么是动态的HTML？二者有什么区别？
• 4、怎么动态创建.html文件
• 5、如何实现动态添加Html文档中Form项

jquery 或 js 如何动态创新html文档？

JS

是客户端语言脚本是运行在浏览器上的

JQ

是基于

js脚本

开发的语言框架。

二者都是运行在浏览器上也就是HTML页面中，

如果要创建新的HTML文档是不行的

。JS

JQ只能实现创建

HTML标签

js语法

*.html();

JQ语法

$().html();

什么是静态HTML，什么是动态的？区别是什么？

静态HTML即普通HTML文档是由标记集合构成的,这些标记以规范的方式决定了页面在浏览器中的显示.它们是以页面的结构和内容为基础,浏览器会自动对这些标记译码并显示,工作就结束了.静态HTML网页的布局无法动态地随浏览器的改变而改变.例如,当用户在浏览时改变窗口的大小,文本会被刷新,但图像的大小并不会随之改变.当然,静态HTML也可以存在一些动态的内容,但它们都是被动的,没有交互性或者交互性有限. 动态HTML是一组技术，是一种新的思想方法，它被设计用来创造和显示更多的交互性网页，包括动态样式，动态内容，2D布局，数据捆梆和多媒体效果等等。 动态HTML (DHTML) 是一门令人兴奋的新技术，它完全克服了传统 HTML 的不足，极具发展前景。DHTML使用一个文件对象模型 (DOM) 来扩充 HTML 语言，使得 WEB 页面的所有元素及其属性都可以实时存取， 从而允许你使用脚本动态地修改页面元素，而这些都不需要 WEB 服务器的干预。使用 DHTML 完全能够设计出复杂的，动态的，交互式的 WEB 页面，使我们的WEB 页面将因此而变得更为生动和精彩。DHTML目前正在发展中，尚没有形成一个标准。Microsoft 和 Netscape 两大公司对 DHTML 各有自己的看法，尽管两大公司都使用了很多相同的技术术语，并引用相同的已发表和提议的标准集合，但在具体实现中，两者不能统一。Netscape 是增加一些新的标记(主要是Layer, Ilayer等)，而 Microsoft 是对现有的标记增加一些新的属性。由此引起的问题是在Internet Explorer上正常运行的动态网页，在 Netscape 上可能会不正确运行；反之亦然。W3C 目前正在努力开发一种标准使它能与所有的平台和浏览器兼容。

什么是静态HTML？什么是动态的HTML？二者有什么区别？

静态HTML指：使用单纯的HTML或者结合CSS制作的包括图片、文字等的只供用户浏览但不包含任何脚本、不含有任何交互功能的网页。

动态的HTML指：网页不仅提供给用户浏览，网页本身还有交互功能，存在着在脚本如JAVASCRIPT，并利用某种服务器端语言如PHP等实现如用户注册，用户登录，上传文件，下载文件等功能。

动态页面可以人机互动，静态只能回服务器的数据库再回到页面。

怎么动态创建.html文件

以最简单的新闻网页为例，先是做一个模板页，假定其中3个地方要动态更换的：标题，内容，日期，哪么模板中这3个地方都要用特殊的名称表示。 要生成html页时，先读入html模板页，再查询数据库，把查询到标题，内容，日期的实际值替换模板中的特殊名称，并按规则命名另存这个文件。 以上是动态生成html页的基本原理，实际工作中，可灵活处理，比如一次性生成所有页，或者发布一个生成一个，可以用一个模板，也可以根据类别用3个5个模板。模板可以保存为文件文件，也可保存在数据库中等等。

如何实现动态添加Html文档中Form项

如果你对Html比较熟悉的话肯定知道有个form/form的HTML标记。在form与/form之间有诸如类型(type)为Text、Password、Button、Submit、Reset等的标记(元素)。我们这里所说的动态的添加Form项就是指动态的添加Form/Form中的Text元素。那么如何去实现动态的添加Form项呢？ 我们先分析分析实现动态添加form项的思路。 如果是让您自己或用诸如FrontPage、DreamWeaver静态编写Html文档来增加一个又一个类型为text的form元素的话。您肯定是写完第一个类型为text的form元素后，再会加入第二个类型为text的form元素，就这样一直加到满足数目条件为止。我们先不说在加一个新的类型为text的元素时，应该将已经存在且有内容、类型也为text的其他form元素也显示出来。上面所说的通过静态编写Html文档来增加类型为text的form元素的方法，其实就是我们在ASP程序文件中实现动态添加类型为text的form元素的基本思路。如何去得到已经存在且有内容、类型也为text的其他form元素的内容呢？在ASP程序中通过request.form("TextFieldName")可以得到。其中的"TextFieldName"是指form/form中名字为"TextFieldName"的项。就是指forminput type=text name="TextFieldName"/form中的"TextFieldName"。 现在我们知道如何得到了表单的内容了，那么我们就可以通过这种方法来得到已经存在且有内容、类型为text的form元素的值了。再在显示这些已经有值的text项时，我们就可以把所得到的值赋给相应的项。接下来，我们又会想如何去知道一共有多少个有内容、类型为text的form项呢？我们可以通过以下这种方法来得到。那就是通过request.form("TextFieldName")的Count属性来得到。这是因为在得到表单中多个类型为Text并且同名的form元素时，我们能得到的是一组值，也就说它们的值是放在一个名为TextFieldName的集合之中。而此时的count属性就是统计这个集合中同类元素的数目的，这样我们就可以知道一共有多少个这样的类型为text的form元素了，并且可以用循环语句与count属性取出集合各自的值。您可能会问：那么我们又如何才能得到这个集合中每一个名为TextFieldName类型为text的form的元素的值呢？在此之前我们先定义一个变量I，它的初始值为1，其实这个变量I就是我们在做循环时的变量。接下来我们就可以通过request.form("TextFieldName")(I)的方法来获取每一个名为TextFieldName的类型为text的form元素的值了。还有一点要注意，就是我们在将已经有值、类型也为text的form元素的值取出赋给相应项并显示出来的时候，我们还应该再增加一个新的类型为text的form项。为什么呢？这是为了让我们还可以再接着继续添加新的值。不然的话，在取出所有已经有值的类型为text的form元素后，您就没有继续添加新值的地方了，那也就成不了动态添加Html文档中Form项了。所以呢，您一定不能忘记这很重要的一点。现在我们知道如何取得这些满足条件的类型为text的form的元素数目了，也知道如何分别获取它们各自的值了。那么我又如何去控制只仅仅将已经有值、类型为text的form的元素呢？以及我们倒底如何去实现上面所说的一切呢？那么接下来我会给出它的源代码，并且会在有些地方加上注释或给出解释。'/*DynamicAddForm.asp文件的源代码开始点*/%@ Language=VBScript %%'----------------------------------------------'Author : WaiWai(歪歪)'Created Date : 2000-2-20'File Name : DynamicAddForm.ASP'Description : Dynamic Add Form's Text Fields.'All Rights Reserved.所有权归City Club.'----------------------------------------------%HTMLHEADMETA NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"titleDynamic Add Form Text Elements./titlestyle type="text/css"!--td { font-size: 9pt}body { font-size: 9pt}select { font-size: 9pt}A {text-decoration: none; color: #003366; font-size: 9pt}A:hover {text-decoration: underline; color: #FF0000; font-size: 9pt}--/style/HEADBODYtable border="1" cellspacing="0" height=400 width=98% bordercolorlight="#5E5E00" bordercolordark="#FFFFEC" bgcolor=LightGrey align=center valign=top %if trim(Request.Form("List")) = "显示已有项" then '/*其中的trim()函数是去掉Request.Form("List")两边的空格*/ '/*当您点击了名为"显示已有项"的按钮时，我们将会看到所有已经有值的类型为text的form项*/Response.Write "tdformcenter已经存的元素内容是:" "/tdtr" for I = 1 to Request.Form("items").Count '/*已经存在的Text类型的数目*/Response.Write "td align=center" Request.Form("items")(I) "/tdtr"nextif trim(Request.Form("newItem"))"" thenResponse.Write "td align=center" trim(Request.Form("newItem")) Response.write "input type=button name='Back' value='Back' Response.write "style='font-size:12pt' onClick='window.history.back()''/*点击了Back按钮后就会返回上一页，也就是添加类型为text的Form项所在的页*/Response.write "/form/tdtr"end ifelse '/*此时表明用户是点击了名为"添加"按钮，要进行添加操作*/Response.Write "td align=centerform action=DynamicAddForm.asp method=post/td"for I = 1 to Request.Form("items").Count '/*此时的操作是循环显示出已经存在且产有值的类型为text的form元素*/'/*Request.Form("items").Count为已经存在的Text类型的数目*/'/*我们可以在此处加入对所添加内容的条件判断。如判断所添加内容的长度是否小于3等.*/Response.Write "td align=centerinput type=text name=items value='"Response.write Request.Form("items")(I) "'/tdtr"'/*此步是将所得到某一有值的类型为text的form元素的值显示出来*/nextif trim(Request.Form("newItem")) "" then'/*此步的目的是检查是否用户在添加新的类型为text的form元素处有没有添加新值，*/'/*有则将此值赋给name=items的类型为text的form元素，并显示出来。*/Response.Write "td align=centerinput type=text name=items value='"Response.Write trim(Request.Form("newItem")) "'"Response.Write "br/tdtr"Response.Write "td align=centerinput type=text name=newItem" Response.write "value=''/tdtr"'/*此处是添加一个名为newItem类型为text的form元素，让用户可以继续进行添加操作。*/else '/*此时表明用户在添加新的类型为text的form元素处并没有添加新的值，所以就只能列出*/'/*一个名为newItem类型为text的form元素，让用户可以继续进行添加操作。*/Response.Write "td align=centerinput type=text name=newItem value=''/td"end if%trtd align=centerbrinput type=submit name="List" value="显示已有项" style="font-size:12pt"input type=submit name="Add" value="添加" style="font-size:12pt" /form/td%end if%/table/BODY/HTML'/*DynamicAddForm.asp文件的源代码结束点*/ 您在看了这些源代码后，可能会注意到有两个类型都为text的form项元素：一个名字为items、一个名字为newItem。为什么呢？这是因为我们要区别哪些是用户通过点击添加按钮、并且输入了新值后得到的，哪些是我们为了让用户能够有地方可以输入新值的类型为text的form项元素。这样我们就能很清楚的在循环时只列出用户已经添加的、有值的类型为text的form项元素了。这就是我们为什么把它们命名成不同的名字的缘故，是不是很妙呢？呵呵 :-)。其实这种方法的关键在于利用了request.form("TextFieldName")的Count属性和request.form("TextFieldName")(I)的方法，才使得我们更容易的获取名为TextFieldName的类型为text的form项元素的数目和分别获取它们的值。这两种方法的用处很大，可以大大的简化我们所要编写的代码。大家一定要记住了这两种用法。下面我再给出一个没有用到这两种用法的ASP程序源代码，大家比较比较，体会一下为什么上面的代码要好。 '/*DynamicAddForm2.asp文件的源代码开始点*/%@ Language=VBScript %%'----------------------------------------------------'Author : WaiWai(歪歪)'Created Date : 2000/1/13'File Name : DynamicAddForm.ASP'Description : Dynamic Add Form's Text Fields.'All Rights Reserved.所有权归City Club'----------------------------------------------------%HTMLHEADMETA NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"/HEADstyle type="text/css"!--td { font-size: 9pt}body { font-size: 9pt}select { font-size: 9pt}A {text-decoration: none; color: #003366; font-size: 9pt}A:hover {text-decoration: underline; color: #FF0000; font-size: 9pt}--/styletitleAdd new mail server site. All Rights Reserved./titlescript language=javascriptfunction mycheck(tt) {alert("afd")return false}/scriptBODY topmargin=12form name=form1 method=posttable border="1" cellspacing="0" height=400 width=98% bordercolorlight="#5E5E00" bordercolordark="#FFFFEC" bgcolor=LightGrey align=center valign=toptd align=center colspan=5 valign=top height=30h4追加新邮件服务器信息/h4/tdtrtd align=center valign=top height=10font style="font-size:11pt"条数/font/tdtd align=center valign=top height=10 width=43%font style="font-size:11pt"邮件服务器URL/font/tdtd align=center valign=top height=20 width=17%font style="font-size:11pt"用户名参数变量/font/tdtd align=center valign=top height=20 width=17%font style="font-size:11pt"密码参数变量/font/tdtd align=center valign=top height=20 width=17%font style="font-size:11pt"站点名称/font/tdtrtd colspan=5 valign=top height=30font color=blue[ * * * Example: * * * ]br0.990.net/prog/login?userpass990.net/font/tdtr%if trim(Request.form("num"))="" then '/*此时表示用户首次打开此ASP页，所以所得的num为空，并显示出相应的输入界面供用户输入信息'其中的num值是为来记录类型为text的form元素的数目，与第一个代码文件中的 'request.form("items").Count效果一样.*/'/*First time open this page.*/Response.Write "td align=center valign=top1./td"Response.Write "input type=hidden name=num value=1"Response.Write "td align=center valign=top "Response.Write "input type=text size=40 name=url1/td"Response.Write "td align=center valign=top input type=text size=12 id=text1 name=user_var1/td" vbcrlfResponse.Write "td align=center valign=top input type=text size=12 id=text2 name=pw_var1/td"Response.Write "td align=center valign=top input type=text size=12 id=text2 name=sitename1/tdtr"else'/*Add new*/'Response.Write "td align=center valign=top" trim(Request.Form("num")) "./td"'/*Loop Start*/Response.Write "td colspan=5 valign=top"for I = 1 to cint(trim(Request.Form("num")))+1%%=I%.%if I10 then '/*此处的目的是为了保证前10个元素与后89个元素缩进相同的宽度*/% %elseif I100 and I9 then%%end if%%if Icint(trim(Request.Form("num")))+1 thenurl="url" I '/*生成如url1,url2......的字符串*/user_var = "user_var" Ipw_var = "pw_var" Isitename = "sitename" Iif trim(request.form(url))"" and trim(Request.Form(user_var))"" and_ trim(Request.Form(pw_var))"" and trim(Request.Form(sitename))"" then %input type=text size=40 name=%=url% value=%=trim(request.form(url))%input type=text size=12 id=text1 name=%=user_var% value=%=trim(Request.Form(user_var))%input type=text size=12 id=text2 name=%=pw_var% value=%=trim(Request.Form(pw_var))%input type=text size=12 id=text2 name=%=sitename% value=%=trim(Request.Form(sitename))%br% else%scriptalert("邮件服务器URL、用户名参数变量、密码参数变量、站点名称中有空值！")window.history.back()/script% exit forend ifelse%input type=text size=40 name=url%=I%input type=text size=12 id=text1 name=user_var%=I%input type=text size=12 id=text2 name=pw_var%=I%input type=text size=12 id=text2 name=sitename%=I%br %end ifnext'/*Loop End*/end if%/tdtrtd colspan=5 align=center height=20input type=button value="追加" style="font-size:11pt"onclick="{document['form1'].action='DynamicAddForm.ASP';document.form1.submit();}"input type=Button value="保存" style="font-size:11pt"onclick="document['form1'].action='SaveNew.asp';document.form1.submit();"input type=button value="返回控制台" style="font-size:11pt"onClick="window.location='PostOfficeConsole.asp'"/td/table%if trim(Request.Form("num"))"" then '/*当开始给第一个类型为text的form元素添加了值的时候开始记录text类型元素的数目*/%input type=hidden name=num value=%=cint(trim(Request.Form("num")))+1%%end if%/form/BODY/HTML'/*DynamicAddForm2.asp文件的源代码结束点*/ 现在大家都看到了这两种方法各自实现的程序源代码了。您有什么想法呢？呵呵，是不是觉得第一个程序代码要比第二个程序代码简洁的多呢。我们在第一个程序代码中是在得到同名类型为text的form元素的值时用到了request.form("TextFieldName")的Count属性来统计到目前为止一共有多少个这样的form元素。而在第二个程序代码中，我们是通过form/form中类型为hidden的元素来保存和得到这个数的。还有一点值得再提一次，那就是把这些类型为text的form元素的名字都命名成同一名字。这就可以避免在第二个程序代码中诸如“url="url" I”的部分了。当然了，这个做法在是知道request.form("TextFieldName")有Count这个属性的前提下才会想到的了。所以第一个程序代码的优点在于它充分利用了在获取同名同类型的form元素的值时的Count属性和值的取法。呵呵，解决问题的好思路与方法是基于对所用工具有着充分了解的基础之上的。。所有这些的关键是我们要不断的去做，这样我们才能更好的领悟和了解，学习到、有着更好更妙的方法。

动态html文档的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html怎么做动态页面、动态html文档的信息别忘了在本站进行查找喔。