最近研究FCK，在\fckeditor\editor\css\behaviors目录下看到2个htc文件，好奇的打开看看，有的象js函数，有的又好像是标签之类的东西，以前都没见过，于是在网上搜了下。。。

一搜，90%以上的不是我想要的东西，HTC好像是一个手机名字，当然不是我想要的咯！然后在百度百科里看到了我想要的东西。摘录如下：（http://baike.baidu.com/view/972605.htm）

htc的全称就是Html Components，由微软在IE5.0后开始提供的一种新的指令组合，它可以把某种特定功能的代码封装在一个组件之中，从而实现了代码的重复使用，据说是用来代替activex和applet的.

从 Internet Explorer 5 开始引入了 HTML 组件的概念， HTML 组件也是 Internet Explore 5.5 一个革命性的突破。 Microsoft 的目的是用它取代 ActiveX 控件。HTML 组件是封装的对象，也像 ActiveX 控件一样是“自包含”的，可以在开发完后发布给任何人。HTC 文件并不仅仅是将一个 HTML 文件的扩展名换成 .htc，它含有脚本和 HTC 定制元素的集合。

在 HTML 文件中，HTC 拥有和页面中其他的 DHTML 元素一样的访问方式。这就意味着所有 HTC 元素都可以通过 id 属性在脚本中调用，也就是说 HTC 元素的属性、方法都可以通过脚本来进行灵活的运用。

您可以通过下面几种方式来执行 DHTML 行为：

定义属性和方法。在 HTC 中分别使用 PUBLIC:PROPERTY 和 PUBLIC:METHOD 元素来定义 HTC 的属性和方法。
定义事件：通过 EVENT 元素定义，使用元素的 fire () 方法在它们所在的页面里 引发这些事件。事件的环境可以通过 createEventObject () 方法设置。
在它们所在的页面里访问 DHTML 对象模型。HTC 中的 object 元素返回它所附属的元素， 通过这个对象，HTC 能访问他所在的文档及其对象模型 (属性、方法和事件)。
接受通报。当使用 ATTACH 元素时，浏览器向 HTC 通报标准 DHTML 事件和两个 HTC 专有 事件，oncontentready 和 ondocumentready。

以下是http://www.jzxue.com/Html/htmlcss/122220043287996.html上的一个例子：

Quote
说明:
HTC是HTML component的缩写,
是IE5.0的主要扩展之一,
除了具备一般组件的可重用优点之外,
还具有易于开发使用等优点,
因为需要引入外部文件,这里就不举例了,宝库里有例子.

控件和组件
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀。

关于demo，我看到一些表单的输入框，有鼠标滑过效果，或者背景变色或者边框变色。使用:hover很容易实现，可惜MS IE7以前的浏览器不能支持，那么就单独给IE5.+使用HTC定义鼠标行为。其实这个实用JS实现也挺容易，我就想拿HTC练练手。

下面是代码

XHTML结构来自ALA的Prettier Accessible Forms。这里多说一嘴，建议大家以后做表单的时候多采用下面的结构，Strict型xhtml建议<form>下不可以直接放置表单元素。而用<ol>来组织多个表单也是合理的。

 
  
  1. <fieldset>  
  2. <legend>Delivery Details</legend>  
  3. <ol>  
  4. <li>  
  5. <label for="name">Name<em>*</em></label>  
  6. <input id="name" />  
  7. </li>  
  8. <li>  
  9. <label for="address1">Address<em>*</em></label>  
  10. <input id="address1" />  
  11. </li>  
  12. <li>  
  13. <label for="address2">Address 2</label>  
  14. <input id="address2" />  
  15. </li>  
  16. <li>  
  17. <label for="town-city">Town/City</label>  
  18. <input id="town-city" />  
  19. </li>  
  20. <li>  
  21. <label for="county">County<em>*</em></label>  
  22. <input id="county" />  
  23. </li>  
  24. <li>  
  25. <label for="postcode">Postcode<em>*</em></label>  
  26. <input id="postcode" />  
  27. </li>  
  28. <li>  
  29. <fieldset>  
  30. <legend>Is this address also your invoice   
  31. address <em>*</em></legend>  
  32. <label><input type="radio"   
  33. name="invoice-address" /> Yes</label>  
  34. <label><input type="radio"   
  35. name="invoice-address" /> No</label>  
  36. </fieldset>  
  37. </li>  
  38. </ol>  
  39. </fieldset> 
 
  
HTC:input.htc
 
  
 
  
  1. <PUBLIC:COMPONENT>  
  2. <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />  
  3. <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />  
  4. <SCRIPT LANGUAGE="JScript">  
  5. <!--  
  6. function Hilite()  
  7. {  
  8. // save original values 
  9. element.style.border = "1px #f60 solid";  
  10. element.style.background = "#f5f5f5";  
  11. }  
  12.  
  13. function Restore()  
  14. {  
  15. // restore original values 
  16. element.style.border = "1px #ccc solid";   
  17. element.style.background = "#fff";  
  18. }  
  19. -->  
  20. </SCRIPT>  
  21. </PUBLIC:COMPONENT> 
 
  
CSS
 
  
 
  
  1. <style type="text/css">  
  2. <!--  
  3. *{color:#666; font-size:11px;font-family:Arial, Helvetica, sans-serif;}  
  4. body{text-align:center;}  
  5. fieldset{border:1px #eee solid; width:310px; margin:0 auto; padding:8px; text-align:left;}  
  6. legend{padding:4px;}  
  7. fieldset label{float:left; width:70px; text-align:right;padding:0 10px;}  
  8. fieldset ol{list-style:none; margin:0; padding:0;}  
  9. fieldset ol li{clear:both; line-height:20px;}  
  10. fieldset ol li fieldset{width:280px;}  
  11. input{behavior:url(input.htc); border:1px #ccc solid; background:#fff; width:160px;}/*Only for ie 5.0+*/  
  12. label input{width:14px;height:14px;border:0;} /*For input type is Radio*/  
  13. input:hover{border:1px #f60 solid;background:#f5f5f5;}/*For orther browsers*/  
  14. em{color:#ff0000;}  
  15. -->  
  16. </style>