1. dhtml
  1. 首页
  3. 百科
  5. 发动机系统
  7. dhtml
dhtml

dhtml

目录导航

简介

DHTML 是一种使 HTML 页面具有动态特性的艺术。

DHTML 是一种创建动态和交互 WEB 站点的技术集。

对大多数人来说，DHTML 意味着 HTML、CSS和 JavaScript 的组合。

分类

DHTML建立在原有技术的基础上，可分为三个方面：

一是HTML(XHTML)，也就是页面中的各种页面元素对象，它们是被动态操纵的内容；

二是CSS，CSS属性也是动态操纵的内容，从而获得动态的格式效果；

三是客户端脚本(例如JavaScript)，它实际操纵Web页上的HTML和CSS。

使用DHTML技术，可使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML使网页设计者可以动态操纵网页上的所有元素——甚至是在这些页面被装载以后。利用DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定位。DHTML还可使网页设计者在网页上显示外部信息，方法是将元素捆绑到外部数据源(如文件和数据库)上。所有这些功能均可用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。这是因为一切功能都包含在HTML文件中，随着对网页的请求而一次性下载到浏览器端。

作用

可见，DHTML技术是一种非常实用的网页设计技术。实际上，DHTML早已广泛地应用到了各类大大小小的网站中，成为高水平网页必不可少的组成部分。

DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者当你点击一个超链后会自动生成一个下拉式的子超链目录。这就是 Dynamic HTML（动态HTML），它是近年来网络发展进程中最具实用性的创新之一。它是一种通过各种技术的综合发展而得以实现的概念，这些技术包括Java Script , VBScript, Document Object Model (文档对象模型)，Layers和Cascading Style Sheets ( CSS样式表)等。

注释

DHTML支持的滤镜

属性

参数

描述

例子

alpha

opacity

finishopacity

style

startx

starty

finishx

finishy

允许您设置元素的透明度

filter:alpha(opacity=20,finishopacity=100,style=1,startx=0, starty=0,finishx=140,finishy=270)

blur

add

direction

strength

使元素模糊

filter:blur(add=true,direction=90,strength=6);

chroma

color

使指定的颜色透明

filter:chroma(color=#ff0000)

fliph

none

水平反转元素

filter:fliph;

flipv

none

垂直反转元素

filter:flipv;

glow

color

strength

使元素发光

filter:glow(color=#ff0000,strength=5);

gray

none

用黑白色来呈现元素

filter:gray;

invert

none

用反转的颜色和亮度值来呈现元素

filter:invert;

mask

color

呈现带有指定背景色和透明前景色的元素

filter:mask(color=#ff0000);

shadow

color

direction

呈现带有阴影的元素

filter:shadow(color=#ff0000,direction=90);

dropshadow

color

offx

offy

positive

呈现带有阴影的元素

filter:dropshadow(color=#ff0000,offx=5,offy=5,positive=true);

wave

add

freq

lightstrength

phase

strength

把元素呈现为波浪状

filter:wave(add=true,freq=1,lightstrength=3,phase=0,strength=5)

xray

none

使用黑白色显示带有反转色和亮度值的元素

filter:xray;

例子

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<html>

<head>

<style>

h2

{

width:100%;

}

</style>

</head>

<body>

<h2style="filter:glow()">发光</h2>

<h2style="filter:blur()">模糊</h2>

<h2style="filter:fliph()">FlipH</h2>

<h2style="filter:flipv()">FlipV</h2>

<h2style="filter:shadow()">阴影</h2>

<h2style="filter:dropshadow()">阴影</h2>

<h2style="filter:wave(Strength=2)">波浪</h2>

<p>注释：如果元素的width属性没有设置，那么滤镜不会起作用。</p>

</body>

</html>

在 Netscape 4.x 以及 Internet Explorer 4.x 的 DHTML 技术

Netscape 4.x

跨浏览器 DHTML

Internet Explorer 4.x

JSS（JavaScript 样式表）（允许您控制不同的 HTML 元素如何显示）

Layers（允许您控制元素的定位和可见性）

CSS1

CSS2（允许您控制不同的 HTML 元素如何显示）

CSS Positioning (允许您控制元素的定位和可见性)

JavaScript

可视滤镜（允许您向文本和图形应用可视效果）

动态 CSS（允许您控制元素的定位和可见性）

只要各种浏览器所创建的属性特征和技术不被其他的浏览器支持，使用 DHTML 进行编码就会产生问题。某个网页在一款浏览器中看上去很棒，在另一款中却非常糟糕。

W3C

属性

参数

描述

例子

alpha

opacity

finishopacity

style

startx

starty

finishx

finishy

允许您设置元素的透明度

filter:alpha(opacity=20,finishopacity=100,style=1,startx=0, starty=0,finishx=140,finishy=270)

blur

add

direction

strength

使元素模糊

filter:blur(add=true,direction=90,strength=6);

chroma

color

使指定的颜色透明

filter:chroma(color=#ff0000)

fliph

none

水平反转元素

filter:fliph;

flipv

none

垂直反转元素

filter:flipv;

glow

color

strength

使元素发光

filter:glow(color=#ff0000,strength=5);

gray

none

用黑白色来呈现元素

filter:gray;

invert

none

用反转的颜色和亮度值来呈现元素

filter:invert;

mask

color

呈现带有指定背景色和透明前景色的元素

filter:mask(color=#ff0000);

shadow

color

direction

呈现带有阴影的元素

filter:shadow(color=#ff0000,direction=90);

dropshadow

color

offx

offy

positive

呈现带有阴影的元素

filter:dropshadow(color=#ff0000,offx=5,offy=5,positive=true);

wave

add

freq

lightstrength

phase

strength

把元素呈现为波浪状

filter:wave(add=true,freq=1,lightstrength=3,phase=0,strength=5)

xray

none

使用黑白色显示带有反转色和亮度值的元素

filter:xray;

相关百科
返回顶部
产品求购 求购