文档章节

DHTML(动态HTML)前台页面技术介绍

 至简6
发布于 2014/08/11 23:26
字数 986
阅读 554
收藏 3

一、 DHTML(动态HTML)前台页面技术介绍

1、 DHTML介绍

DHTML包含以四个方面的内容:

1)、HTML 4.0 :超文本标记语言,网页文档的主体,以文本文件形式存储,由浏览器翻译后展现出丰富多彩的页面。

2)、CSSL:客户端脚本语言,主要有JavaScript(JS)VBScript(VBS)JScriptNetscape主要支持JSIE主要支持JSVBSJScript

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)模式,它直接在HTMLbody>标签前设置一个样式标签,而这个设置会直接影响该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、 HTMLCSSDOMJavaScript四者之间的关系

© 著作权归作者所有

上一篇: node.js 简介之一
下一篇: css样式表---2
粉丝 3
博文 9
码字总数 23165
作品 0
绵阳
程序员
私信 提问
Python爬虫(十九)_动态HTML介绍

JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言。它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文件,甚至运行网页游戏。 我们可以在网页源...

小七奇奇
2017/12/21
0
0
xml xhtml html dhtml的区别

1)XML   XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,X...

chem_dev
2015/07/24
104
0
使用DOM来创建页面元素的一些问题

在IE中使用DOM方式来动态创建页面元素的时候,我发现了一些问题。记录于此,如果您有好的意见欢迎提供,如果您也遇到此问题,希望能有助你解决。 对于动态HTML编程,IE实现了两套模型:一套是...

唐玄奘
2017/12/27
0
0
Ajax_Asynchronous javascript and XML

Ajax 是 Asynchronous javascript and XML(异步的JavaScript与XML技术)的缩写,是由HTML、javascript技术、DHTML和DOM组成。 —javascript 代码是运行 Ajax 应用程序的核心代码,帮助改进与...

张德德
2015/05/06
0
0
HTML-加速、再加速

作者:听风 文章来源:eNet技术学院 web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容...

晨曦之光
2012/03/09
169
0

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
31分钟前
4
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
45分钟前
90
5
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部