DHTML（动态HTML）前台页面技术介绍
一、 DHTML（动态HTML）前台页面技术介绍
1、 DHTML介绍
DHTML包含以四个方面的内容：
（1）、HTML 4.0 ：超文本标记语言，网页文档的主体，以文本文件形式存储，由浏览器翻译后展现出丰富多彩的页面。
（2）、CSSL：客户端脚本语言，主要有JavaScript(JS)，VBScript(VBS)，JScript。Netscape主要支持JS，IE主要支持JS，VBS和JScript。
（3）、DOM：文档对象模型，是W3C推广的web技术标准之一，它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)，这些都可以通过CSSL来进行控制。
（4）、CSS：层叠样式表单，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，用来弥补HTML在排版上的所受的限制导致的不足，它是DOM的一部分。可通过CSSL动态地改变CSS属性，从而改变页面视觉效果。
2、 CSS样式表介绍
CSS是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
在一个网页中可以分为外部CSS样式表、内嵌CSS样式表和内部CSS样式表。
（1）、外部CSS样式表(External Styles Sheet)模式，它通过一个独立的CSS样式表文字文件(扩展名通常为CSS)控制其他Web页，也就是说，只要在需要指定样式的Web页中，设置一个链接至该CSS样式表文件即可，而且之后只要改变此CSS样式表内容，即可同时改变所有链接至该CSS样式表的Web页样式。
（2）、内嵌CSS样式表(Embedded Styles Sheet)模式，它直接在HTML＜body＞标签前设置一个样式标签，而这个设置会直接影响该Web页的样式设置。
（3）、是内部CSS样式表(Internal Styles Sheet)模式，它直接对HTML里的任何单一对象(如文字、图像等)进行样式设置。CSS样式表直接定义的样式，只会影响单一选取的内容文字，而不会影响整个Web页的样式设置。
3、 JavaScript介绍
最常用的一种客户端脚本语言，用于在浏览器端实现业务逻辑和开发交互式的 Web 页面，并在浏览端进行解释执行。
与css样式表一样,javascript也分为外部js，页面js和标签内嵌js。
这里你分别作个描述
4、 一个完整的HTML文件介绍
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"><!—meta标签只能放在head标签中，用于向服务器和客户端传达关于文档的隐藏信息--!>
<link href="css.css" type="text/css" rel="stylesheet"><!--引用外部CSS样式表文件--!>
<script type="text/javascript" src="test.js"></script><!--引用外部JS文件--!>
<style type="text/css"><!--内嵌CSS样式--!>
.table1{
color:#ff0000;
width:500px;
height:200px;
}
</style>
<title>我的标题</title>
<script language="javascript"><!—内嵌javascript程序--!>
function abc(value){
alert(value);
}
</script>
</head>
<body><!--文档主体开始--!>
<center>
<form name="form1" method="post" action="abc.jsp">
<table class="table1" border="2" id="tb">
<tr>
<td width="50%">1111</td>
<td width="50%">1111</td>
</tr>
<tr>
<td width="50%">2222</td>
<td width="50%">2222</td>
</tr>
</table>
<input type="button" class="button1" onclick="abc(this.value)" value="确定">
<input type="button" style="background-color:#0000ff;color:#ff0000;width:150px" onclick="test()" value="改变表格属性">
</form>
</center>
</body>
</html>
5、 HTML、CSS、DOM和JavaScript四者之间的关系
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
