转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
xml css htc 的综合运用         ★★★★

xml css htc 的综合运用

作者:闵涛 文章来源:闵涛的学习笔记 点击数:1576 更新时间:2009/4/23 14:10:08

这几个技术都不是很新了,现在还拿出来说也就是为了教教新手了呵呵,各位大虾多多指正.

css之所以出现就是为了实现数据与数据的表现形式的分离, xml则是为了无限扩展数据结构本身的限制, htc(更准确的说是behavior)进一步的把代码与表现形式分离开了

之所以要把这些已经出现了若干年的东西重新翻出来说,是因为看到最近的xHTML验证似乎比较热,其实xHTML的目的也就是更好的向XML过渡,形成一种标准化的数据形式.数据与数据表达方式,数据表达方式中的行为与样式的分离正是为了更有效率的组织数据.

让我们来看一些例子

下面的代码来自:
www.blueidea.com/bbs/NewsDetail.asp?&id=2440917

用层模拟小窗口的代码:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

可以看到,这段内容里同时有需要表达的数据,数据样式和样式的行为模式,对于只关心数据本身的修改者来说,如此多的代码会造成阅读上的困扰.让我们用前面提到的技术重整一下

//抱歉这段代码不能直接执行,因为我没有地方放置需要引用的CSS和HTC文件

<html xmlns:x >
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>xWin HTC Demo
</title>
<link rel="stylesheet" type="text/css" href="sp/css/global.css">
</head>
<body>
<x:win width=200 top=300 left=100 title="我就是传说中那个超长的窗口标题" id="win1" oncontentready="alert();">
  我就是传说中那个超长的窗口标题我就是传说
  中那个超长的窗口标题我就是传说中那个超长的窗口
  个超长的窗口标题我就是传说中那个超长的窗口标题
</x:win>
<x:win width=200 top=70 left=140 title="我就是传说中那个超长的窗口标题" id="win2">
我是窗口2<br>我是窗口2<br>我是窗口2<br>
我是窗口2<br>我是窗口2<br>我是窗口2<br>
</x:win>
<a href="javascript:win1.ShowHide();void(0);">win1</a>
<a href="javascript:win2.ShowHide();void(0);">win2</a>
</body>
</html>

这时候大家会很高兴的发现,页面变得如此简单,代码中基本上只有数据本身,几乎完全没有JS了,那么JS在哪里哪?下面是CSS文件:sp/css/global.css

x\:* {
 behavior:url(sp/htc/global.htc);
 font-Size:13px;
 line-Height:13px;
 background-Color:white;
 color:#444;
}

数据的行为也算作数据的表达样式之一呵呵,那么我们再看看htc文件

//这个代码是我自己的一个比较大的htc中摘录出来的,还包括了一个细线select

运行代码框