完美生活 - HTML/CSS

透明Flash效果在Firefox中无法达到效果的解决办法

a@b.com (slick) — Thu, 26 Jun 2008 12:23:17 +0800

这两天在做一个网站时需要用到透明背景的Flash效果，很久以前曾经用过，没有发现不正常的现像（可能是以前使用Firefox比较少）；昨天发现在Firefox中透明的Flash效果在IE中显示正常，但是在Firefox中却显示一团黑。于是在网上搜索发现只要在Flash代码中加入一个值就可以解决了，发上来与大家一起分享，希望对您有所帮助。

原来的代码：

只要在里面加上参数并赋值：wmode="transparent"即可解决，修改之后的代码为：

关于wmode参数的具体使用有如下：

window 模式

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

CSS实现完美垂直居中

a@b.com (slick) — Sun, 26 Feb 2006 03:17:00 +0800

之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。
现在来几个例子：

一、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要
为什么？
请比较以下两个例子：
CODE:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。

二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度

三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。

.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}

可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的元素必须在

里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。

优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效

四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行

.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
}

五、整合三和四，写出支持所有浏览器的垂直居中容器！
思路是利用 IE 和非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。
最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。
推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未测试浏览器：Konqueror

范例页面：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml" xml:lang="en">

Demo:: vertical align: middle

Demo of middled vertical align

Author: Spenser Lee, Liberty Studio

Originally posted on http://www.blueidea.com/bbs/" title="BlueIdea Forum">BlueIdea Forum

Table of centents:

Single line countainer with/without a fixed height

Align multi-line container which does not have a fixed height

Simulating table layout in container with a fixed height

IE's solution

A perfect compounded sample

Case One: Single line countainer with/without a fixed height

If you only want to display a container which only holds a single line of text, you can set line-height property to height property, then set overflow to hidden.

Sample:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Core code:

.middle-demo-1{
 height: 4em;
 line-height: 4em;
 overflow: hidden;
}

Notes:

I strongly recommend you use relative size in height and line-height property. Why? You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the height is no longer equal to line-height property, thus, the layout is messed up. Using relative size as em, ex or % will let your countainer stretch with the content.

overflow: hidden is a must. Why? Same as above. Just ensure height and line-height are always equal.

Pros:

Fits in both block elements and inline elements.

Capable of all 5th-gen browsers.

Cons:

Text length is limited. Max with only one line.

Does not work well on none text contents such as images and objects.

Back

Case Two: Align multi-line container which does not have a fixed height

In this case, we should simply set a pair of fixed equivalences to padding-top and padding-bottom attribute. It works on both IE and non-IE browsers.

Sample:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.

Core code:

.middle-demo-2{
 padding-top: 24px;
 padding-bottom: 24px;
}

Pros:

Fits in both block elements and inline elements.

Works on none text contents as fine as text contents.

Capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.

Cons:

You can not assign height in this solution.

Back

Case Three: Simulating table layout in container with a fixed height

CSS offers a set of very convenient display atrribute values called display: table, display: table-row, display: table-cell and other display values begin with table-. It offers a way to simulate table layout in all elements. As a result, any element with display: table-cell, vertical-align: middle and a fixed height will display exactly like a table cell.

Sample: (You may not be able to view the effect on IE)

Core code:

.middle-demo-3{
 display: table-cell;
 height: 300px;
 vertical-align: middle;
}

Notes:

display: table-cell must work with other elements with display: table value sets in order to form a literal table. Or it might cause unexceptable bugs.

Sadly IE series (including the latest IE 7 beta) does not support any of display: table values, so it won't work in IE.

Pros:

It has the most perfect render for vertical-align: middle align.

Cons:

It only works in latest versions of non-IE browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and Safari.

Back

Case Four: IE's solution

Since IE is a lame browser when it comes to ANYTHING, so you can't use the solution above simply because IE does not recognize it at all. However, there has been nothing yet you can not code with CSS if you have already coded it with table. It even offers you possibility to layout your page that tables can not do!

So what's the solution for IE? Like what we always do: Hit IE's back with the BUGS it offers!

Sample: (You are able to view the correct result only on IE)

.middle-demo-4{
 height: 300px;
 position: relative;
}
.middle-demo-4 div{
 position: absolute;
 top: 50%;
 left: 0;
}
.middle-demo-4 div div{
 position: relative;
 top: -50%;
 left: 0;
}

See? Don't ask me why it worked. This hack is based on years of study in IE's own stupid layout model and it works very well, even in IE5 given the box width hack. I won't tell you the theory behind all these. It's my top secret, with which I solved a lot of other cross browser layout problems, and I'm not going to share it with you. But you are free to use this IE hack It's kinda handful in most occassions.

Pros:

The only perfect vertical align method in IE. It works even better then add automatic paddings.

Cons:

After all it's a CSS hack. We can avoid it if not for IE.

Back

Case Five: A perfect compounded sample

Here's the perfect compounded solution on vertical centering that works on almost all latest browsers.

Sample: (This works on almost all browsers)

I'm not going to give you the full code of this one. But it's not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in IE/non-IE CSS hackers. And actually the hacking style is not limited, so I don't want to force you to use my hacking style neither. Stop being lazy, and write the code yourself!

Browser capability:

Works on: IE6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+

On IE5, you might need to apply the box model hacker to make the height correct.

Untested: WebOmini, Konqueror.

Fails on: Other browsers not reffered in the list above.

Back

细说HTML元素的ID和Name属性的区别

a@b.com (slick) — Tue, 17 Jan 2006 22:51:00 +0800

细说HTML元素的ID和Name属性的区别

可以说几乎每个做过Web开发的人都问过，到底元素的ID和Name有什么区别阿？为什么有了ID还要有Name呢?! 而同样我们也可以得到最 classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。

上周我也遇到了ID和Name的问题，在页面里输入了一个input type="hidden"，只写了一个ID='SliceInfo'，赋值后submit，在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示，于是在 input里加了个Name='SliceInfo'，就一切ok了。

第一段里对于ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：

    用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
    用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
    用途3: 建立页面中的锚点，我们知道link是获得一个页面超级链接，如果不用 href属性，而改用Name，如：，我们就获得了一个页面锚点。
    用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
    用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
    用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数value = "value">或Meta中。

显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。

当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用 document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = "..."来添加其Name，而必须在创建Element时，使用 document.createElement('') 为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。

javascript">
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);

消息框里显示的结果是：。

javascript">
var input = document.createElement('');
input.id = 'myId';
alert(input.outerHTML);

消息框里显示的结果是：。
初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。

这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用 ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的 render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。

HTML中小meta的大作用

a@b.com (slick) — Tue, 30 Aug 2005 14:05:00 +0800

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：

name 属性

　　1、用以说明生成工具（如Microsoft FrontPage 4.0）等；

　　2、向搜索引擎说明你的网页的关键词；

　　3、告诉搜索引擎你的站点的主要内容；

　　4、告诉搜索引擎你的站点的制作的作者；

　　5、

　　其中的属性说明如下：

　　设定为all：文件将被检索，且页面上的链接可以被查询；

　　设定为none：文件将不被检索，且页面上的链接不可以被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的链接可以被查询；

　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；

　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

　　http-equiv属性

　　1、

和用以说明主页制作所使用的文字以及语言；

　　又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

　　2、定时让网页在指定的时间n内，跳转到页面http://yourlink；

　　3、可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

　　4、是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

　　5、cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

　　6、网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

　　7、强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

　　8、和设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

加快 DHTML 的一组技巧

a@b.com (slick) — Tue, 30 Aug 2005 13:43:00 +0800

动态 HTML (DHTML) 在 Microsoft® Internet Explorer 4.0 中的引入，使 Web 作者和开发人员可以使用新的编程模型。此后，Web 作者充分利用了这个强大的特性来提供动态内容、样式和定位，使 Web 用户得以体验丰富的交互式功能。DHTML 的灵活性使得通常会有多种方式可以实现您的构思。理解 Internet Explorer 的 HTML 分析和显示组件如何处理请求，可帮助您确定完成工作的最佳方法。本文介绍了某些 DHTML 功能对性能的重大影响，并提供了一些提高页面性能的技巧。

摘要：本文说明了某些 DHTML 功能对性能的重大影响，并提供了一些提高 DHTML 页面性能的技巧。

简介
 成批处理 DHTML 更改
 使用 innerText
使用 DOM 添加单个元素
 扩展 SELECT 元素中的选项
 用 DOM 更新表
 编写一次，使用多次
 请勿过多使用动态属性
 数据绑定很有效
 不要在 document 对象中设置 expando 属性
 避免切换类和样式规则
 查找父项之前，先折叠文本范围
 其他资料

简介

成批处理 DHTML 更改

在 DHTML Web 页面上，提高性能的最有效方法是改进对页面上 HTML 内容的更改。有多种方法可以更新 Web 页面，了解这一点非常重要。从客户的反馈来看，Web 作者可以应用 HTML 文本块，也可以通过使用 DHTML 对象模型（英文）或 W3C 文档对象模型 (DOM)（英文）来访问个别 HTML 元素。无论何时更改 HTML 内容，Internet Explorer 的 HTML 分析和显示组件都必须重新组织该页面的内部表现形式，重新计算文档布局和文档流，并显示这些变化。虽然实际性能由 Web 页面的内容和您所作的更改决定，但是这些操作代价都比较大。如果您应用 HTML 文本块，而不是个别访问元素，则必须调用 HTML 分析器，这将导致额外的性能开销。接受 HTML 文本的方法和属性包括 insertAdjacentHTML（英文）和 pasteHTML（英文）方法，以及 innerHTML（英文）和 outerHTML（英文）属性。

技巧 1：在一个脚本函数中对 HTML 内容进行更改。如果您的设计使用了多个事件处理程序（例如响应鼠标移动），则应集中进行更改。

HTML 分析和显示组件的另一项重要事实是：一旦脚本返回控制（例如，当脚本事件处理函数退出时，或者当调用 setTimeout（英文）等方法时），该组件将重新计算布局并显示 Web 页面。现在，您已经了解 Internet Explorer 如何处理变化，下面将开始提高 Web 页面的性能。

技巧 2：建立一个 HTML 字符串并对文档进行一次更改，而不是进行多次更新。如果 HTML 内容不是必要的，可考虑使用 innerText（英文）属性。

在以下示例中，速度较慢的方法每次设置 innerHTML 属性时都调用 HTML 分析器。要提高性能，可以先建立一个字符串，然后将其分配给 innerHTML 属性。

请显示

慢：

 divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{
divUpdate.innerHTML += "这是一个较慢的方法！";
}

快：

 var str="";
for ( var i=0; i<100; i++ )
{
str += "因为使用字符串，此方法较快！";
}
divUpdate.innerHTML = str;

有关详细信息，请参见动态内容（英文）。

使用 innerText

DHTML 对象模型通过 innerText（英文）属性访问 HTML 元素的文本内容，而 W3C DOM 则提供一个独立的子文本节点。直接通过 innerText 属性更新元素的内容，比调用 DOM createTextNode（英文）方法更快。

技巧 3：使用 innerText 属性更新文本内容。

以下示例显示了如何使用 innerText 属性提高性能。

请显示

慢：

 var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.appendChild(  document.createTextNode( "使用 createTextNode() ") );
divUpdate.appendChild( node );
}

快：

 var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 属性";
divUpdate.appendChild( node );
}

使用 DOM 添加单个元素

如前所述，应用 HTML 文本的访问方法将导致调用 HTML 分析器，从而会降低性能。因此，使用 createElement（英文）和 insertAdjacentElement（英文）方法添加元素比调用一次 insertAdjacentHTML 方法快。

技巧 4：调用 createElement 和 insertAdjacentElement 方法比调用 insertAdjacentHTML 方法快。

成批处理 DHTML 更新并调用一次 insertAdjacentHTML 方法可以提高性能，但是有时直接通过 DOM 创建元素效率更高。在下面的方案中，您可以尝试一下这两种方法并确定哪一种更快。

请显示

慢：

 for (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " 使用 insertAdjacentHTML() " );
}

快：

 var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = " 使用 insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", node );
}

扩展 SELECT 元素中的选项

对于上一条使用 HTML 文本方法的规则来说，将大量 OPTION（英文）元素添加到 SELECT（英文）中的情况是一种例外。这时候，使用 innerHTML 属性比调用 createElement 方法访问选项集合效率更高。

技巧 5：使用 innerHTML 将大量选项添加到 SELECT 元素中。

使用字符串连接操作来建立 SELECT 元素的 HTML 文本，然后使用此技巧设置 innerHTML 属性。对于数量特别大的选项，字符串连接操作也会影响性能。在此情况下，请建立一个数组并调用 Microsoft JScript® join（英文）方法来执行 OPTION 元素 HTML 文本的最终连接。

请显示

慢：

 var opt;
divUpdate.innerHTML = "";
for (var i=0; i<1000; i++)
{
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "第 " + i + " 项";
}

快：

 var str="";
divUpdate.innerHTML = str;

更快：

 var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "";
}
divUpdate.innerHTML = "";

用 DOM 更新表

使用 DOM 方法插入表的行和单元格比使用 insertRow（英文）和 insertCell（英文）方法（DHTML table 对象模型的一部分）效率更高。尤其在创建大的表时，效率上的差别更加明显。

技巧 6：使用 DOM 方法建立大表。

请显示

慢：

 var row;
var cell;
for (var i=0; i<100; i++)
{
row = tblUpdate.insertRow();
for (var j=0; j<10; j++)
{
cell = row.insertCell();
cell.innerText = "第 " + i + " 行，第 " + j + " 单元格";
}
}

快：

 var row;
var cell;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild( tbody );
for (var i=0; i<100; i++)
{
row = document.createElement( "TR" );
tbody.appendChild( row );
for (var j=0; j<10; j++)
{
cell = document.createElement( "TD" );
row.appendChild( cell );
cell.innerText = "第 " + i + " 行，第 " + j + " 单元格";
}
}

编写一次，使用多次

如果您的 Web 站点使用脚本来执行一些常用操作，可以考虑将这些功能放到独立的文件中，以便可以由多个 Web 页面重复使用。这样做，不仅可以改善代码的维护性，而且使该脚本文件保留在浏览器的缓存中，从而只需要在用户访问站点时向本地下载一次。将常用的样式规则放在独立的文件中也可以得到同样的好处。

技巧 7：通过将常用代码放到行为或独立文件中来重用脚本。

要更好地利用脚本重用功能，请将常用的脚本操作放到 DHTML 附加代码或元素行为（英文）中。行为提供了一个有效的方法，用于重用脚本和建立从 HTML 访问的组件，并使您可用自己的对象、方法、属性和事件来扩展 DHTML 对象模型。对于未使用 viewlink（英文）功能的行为，可以考虑使用 Internet Explorer 5.5 中的 lightweight（英文）行为特性进行更有效的代码封装。另外，如果您的脚本代码在一个 SCRIPT（英文）块中，会获得更高的性能。

请勿过多使用动态属性

动态属性（英文）为 Web 作者提供了一种将表达式用作属性值的方法。表达式在运行时计算，其结果值将应用于属性。这是一个强大的特性。此特性可用于减少页面上的脚本数量，但是因为必须定时重算表达式，而且该表达式经常与其他属性值相关，所以它会对性能带来消极的影响。这种情况对定位属性尤其明显。

技巧 8：限制使用动态属性。

数据绑定很有效

数据绑定（英文）是一个强大的功能，它使您可以将数据库查询的结果或 XML 数据岛（英文）的内容，绑定至 Web 页面上的 HTML 元素。您无需返回服务器提取数据，就可以提供数据排序和过滤功能，以及不同的数据视图。设想一个 Web 页面可以将公司的数据显示为折线图、条形图或饼图，还具有将数据按办公室、产品或销售阶段排序的按钮，而且所有这些功能只需要访问一次服务器就能实现。

技巧 9：使用数据绑定来提供丰富的客户端数据视图。

有关数据绑定的详细信息，请参见以下文章：

不要在 document 对象中设置 expando 属性

expando（英文）属性可以添加至任何对象。此属性非常有用，它可以存储当前 Wed 页面内的信息，并提供了另一种扩展 DHTML 对象模型的方法。例如，您可以给 DHTML 元素指定一个 clicked 属性，用此属性提示用户已经单击了哪一个元素。在引发事件时，也可以使用 expando 属性，向事件处理函数提供更多的上下文信息。无论您如何使用 expando 属性，切记不要在 document（英文）对象上设置它们。如果您这样做，则当您访问该属性时，文档必须执行额外的重算操作。

技巧 10：在 window（英文）对象上设置 expando 属性。

请显示

慢：

for (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "第 " + i + " 项";
tmp = window.document.myProperty;
}

快：

for (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "第 " + i + " 项";
tmp = window.myProperty;
}

避免切换类和样式规则

切换类和样式规则是一种代价非常高的操作，需要重新计算并调整整个文档的布局。如果您的 Web 站点使用样式表来提供内容的备用视图，可以考虑直接修改要更改的元素的 style（英文）对象，而不是修改元素的 className（英文）属性或与类关联的 styleSheet（英文）对象。

技巧 11：在更改内容的外观时，直接修改 style 对象。

查找父项之前，先折叠文本范围

TextRange（英文）对象表示用户选定或从 HTML 元素中检索的一个文本区域，例如 BODY（英文）。通过调用 parentElement（英文）方法，可以标识文本范围的父项。对于复杂的文本范围，在调用 parentElement 方法之前，先调用 collapse（英文）方法效率会更高。

技巧 12：在访问 parentElement 方法之前，先折叠文本范围。

XHTML代码规范

a@b.com (slick) — Thu, 18 Aug 2005 19:40:00 +0800

XHTML规范如下：

1.所有的标记都必须要有一个相应的结束标记

以前在HTML中，你可以打开许多标签，例如

和

而不一定写对应的

和

来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:

2.所有标签的元素和属性的名字都必须使用小写

与HTML不一样，XHTML对大小写是敏感的，和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。<h3>3.所有的XML标记都必须合理嵌套</h3>同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：/b> 必须修改为：/p> 就是说，一层一层的嵌套必须是严格对称。<h3>4.所有的属性必须用引号""括起来</h3>在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:<height=80> 必须修改为：<height="80"> 特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'"> <h3>5.把所有<和&特殊符号用编码表示</h3><ul> <li>任何小于号（<），不是标签的一部分，都必须被编码为& l t ; </li> <li>任何大于号（>），不是标签的一部分，都必须被编码为& g t ; </li> <li>任何与号（&），不是实体的一部分的，都必须被编码为& a m p; </li></ul>注：以上字符之间无空格。<h3>6.给所有属性赋一个值</h3>XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：<td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为：<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"> <h3>7.不要在注释内容中使“--”</h3>“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的: 用等号或者空格替换内部的虚线。 以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 </article> <article> <h1>用CSS实现双色相间表格</h1> a@b.com (slick) — Thu, 18 Aug 2005 15:16:00 +0800 具体代码 <html> <body> <style> .DoubleColorTable tr{ background-color:expression("#FFFFFF,#EEEEEE".split(",")[rowIndex%2]) } </style> <table width="70%" border="1" cellpadding="0" class="DoubleColorTable"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html> </article> <article> <h1>有关表格边框的css语法整理</h1> a@b.com (slick) — Mon, 01 Aug 2005 17:02:00 +0800 我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。 　　有关表格边框的css语法 　　具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。　　 1.上边框宽度 　　语法: border-top-width: <值>　　允许值: thin | medium | thick | <长度>　　初始值: medium　　适用于: 所有对象　　向下兼容: 否　　上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。　　2.右边框宽度 　　语法: border-right-width: <值>　　允许值: thin | medium | thick | <长度>　　初始值: medium　　适用于: 所有对象　　向下兼容: 否　　右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。　　 3.下边框宽度 　　语法: border-bottom-width: <值>　　允许值: thin | medium | thick | <长度>　　初始值: medium　　适用于: 所有对象　　向下兼容: 否　　下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。　　 4.左边框宽度 　　语法: border-left-width: <值>　　允许值: thin | medium | thick | <长度>　　初始值: medium　　适用于: 所有对象　　向下兼容: 否　　左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。　　5.边框宽度 　　语法: border-width: <值>　　允许值: [ thin | medium | thick | <长度> ]{1,4}　　初始值: 未定义　　适用于: 所有对象　　向下兼容: 否　　边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略写的边框属性。　　6.边框颜色 　　语法: border-color: <值>　　允许值: <颜色>{1,4}　　初始值: 颜色属性的值　　适用于: 所有对象　　向下兼容: 否　　边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。　　7.边框样式 　　语法: border-style: <值>　　允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}　　初始值: none　　适用于: 所有对象　　向下兼容: 否　　边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。 　　none：无样式； 　　dotted：点线； 　　dashed：虚线； 　　solid：实线； 　　double：双线； 　　groove：槽线； 　　ridge：脊线； 　　inset：内凹； 　　outset：外凸。8.上边框 　　语法: border-top: <值> 　　允许值: <上边框宽度> || <边框式样> || <颜色>　　初始值: 未定义　　适用于: 所有对象　　向下兼容: 否　　上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。　　9.右边框 　　语法: border-right: <值>　　允许值: <右边框宽度> || <边框式样> || <颜色>　　初始值: 未定义　　适用于: 所有对象　　向下兼容: 否　　右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。　　 　　10.下边框 　　语法: border-bottom: <值>　　允许值: <下边框宽度> || <边框式样> || <颜色>　　初始值: 未定义　　适用于: 所有对象　　向下兼容: 否　　下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。　　11.左边框 　　语法: border-left: <值>　　允许值: <左边框宽度> || <边框式样> || <颜色>　　初始值: 未定义　　适用于: 所有对象　　向下兼容: 否　　左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。　　 12.边框 　　语法: border: <值>　　允许值: <边框宽度> || <边框式样> || <颜色>　　初始值: 未定义　　适用于: 所有对象　　向下兼容: 否　　边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。　　边框声明的例子包括：　　H2 { border: groove 3em } 　　A:link { border: solid blue } 　　A:visited { border: thin dotted #800080 } 　　A:active { border: thick double red } 　　边框属性只能设置四种边框；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。 　　13.宽度 　　语法: width: <值>　　允许值: <长度> | <百分比> | auto　　初始值: auto　　适用于: 块级和替换元素　　向下兼容: 否　　宽度属性的初始值为“auto”，即为该元素的原有宽度(有就是元素自己的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。　　14.高度 　　语法: height: <值>　　允许值: <长度> | auto　　初始值: auto　　适用于: 块级和替换元素　　向下兼容: 否　　高度属性的初始值为“auto”，即为该元素的原有高度(有就是元素自己的高度，)。百分比参考上级元素的宽度。不允许使用负的长度值。　　15.有关标签 　　table：表格标签，对整个表格样式的定义要放在table中； 　　td：单元格标签，对单元格样式的定义要放在td中。 </article> <article> <h1>网页中有关表格的处理</h1> a@b.com (slick) — Sun, 31 Jul 2005 10:37:00 +0800 表格复选、复选变色、以及行的间隔行 用Hotmail的时候注意下，就是这个效果 以下内容为程序代码：<style type="text/css">  </style> <script language="JavaScript" type="text/JavaScript"> //复选 function selectAll(chk) { var chk = document.form1.chkAll.checked; for (i=0;i<document.all.length;i++) { if (document.all[i].name=="id[]") { document.all[i].checked=chk; chkRow(document.all[i]); }}} //复选后单元格变色 function chkRow(obj){ var r = obj.parentElement.parentElement; if(obj.checked){ r.style.backgroundColor="#E6E9F2";} else {if(r.rowIndex%2==1)r.style.backgroundColor="";else r.style.backgroundColor="#F5F5F5";} } </script> <table width="50%" border="1" cellpadding="3" cellspacing="0" bordercolor="#333333" class="tb"> <form name="form1" method="post" action=""> <tr class="row"> <td width="5%"> </td> <td width="33%" align="center">论坛名称</td> <td width="62%" align="center">网址</td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">织梦乱弹</td> <td align="center"><a href="http://www.it365cn.com/bbs" target="_blank">http://www.it365cn.com/bbs</a></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">经典论坛</td> <td align="center"><a href="http://www.blueidea.com/bbs" target="_blank">http://www.blueidea.com/bbs</a></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">点燃灵感</td> <td align="center"><a href="http://www.fwcn.com/bbs" target="_blank">http://www.fwcn.com/bbs</a></td> </tr> <tr class="row"> <td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> 全选/取消</td> </tr> </form> </table> 限制表格的大小 style=" table-layout:fixed;word-break:break-all" '關鍵就是這句了 如果是只要限制td大小可以 无论大图还是文字，一律限制。 以下内容为程序代码：<table align=center width=200 height=100 bgcolor=#f3f3f3 style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)" style="table-layout:fixed;word-break:break-all" > <tr> <td><center></td> </tr> <tr> <td> cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce </td></tr> </table> 表格行换色 (表格换行换色)<style> #oTable tr {alternateColor:expression(bgColor=rowIndex%2==0?'#cccccc':'#efefef')} </style> <table width=500 height=100 border=1 ID="oTable"> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> 立体表格<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef> <tr bgcolor=#cccccc> <td>cnbruce</td> <td>cnbruce</td> <td>cnbruce</td> <td>cnbruce</td> </tr> <tr bgcolor=#cccccc> <td>cnbruce</td> <td>cnbruce</td> <td>cnbruce</td> <td>cnbruce</td> </tr> </table> <center>表格边线为1，间隔为0，左上为#333333，右下为#efefef,行背景色为#cccccc 表格的边框不断在闪 <table border="0" width="280" id="myexample" style="border:1px solid red"> <tr> <td>cnbruce cnbruce cnbruce cnbruce cnbruce cnbruce</td> </tr> </table> <script language="JavaScript1.2">  </script> 虚线表格<style type="text/css"> .tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT: #000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;} </style> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="tb"><center>www.cnbruce.com</td> </tr> </table> 虚线直线1 <hr size=1 style="border:1px dotted #001403;"> 虚线直线2 分类型表格<fieldset> <legend>item</legend> content </fieldset> 变色的单元格1，通过a:hover做. <style> a:link,a:visited,a:hover {width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white} a:hover{background:#0099ff;color:black} td{background:#3366cc;color:white;padding:0px} </style><TABLE width=100% cellspacing=1 bgcolor=black > <TR> <TD><a href="#">CNBruce <TD><a href="#">.com <TR> <TD><a href="#">CNBruce <TD><a href="#">.com 变色的单元格2，已经做成了CSS，注意还有透明效果。 <style type="text/css"> .aa { background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)} .bb { background-color:#3366cc; color:#ffffff} </style><table width="100%"> <tr> <td onmouseover="this.className='aa'" onmouseout="this.className='bb'" class="bb"><center>cnbruce</td> </tr> </table> 变色的单元格3，通过mouse事件做.有点微软的味道。 <table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#efefef" bgcolor="#efefef"> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">cnbruce</div></td> </tr> <tr> <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">cnbruce</td> </tr> </table> 表格边框显示外阴影 <table align=center width=200 height=100 bgcolor=#f3f3f3 style="filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5)"> <tr> <td><center>www.cnbruce.com</td> </tr> </table> VML做圆脚表格 <html xmlns:v> <style> v\:*{behavior:url(#default#VML)} </style> <body> <v:RoundRect style="position:relative;width:150;height:240px"> <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/> <v:TextBox style="font-size:10.2pt;">VML</v:TextBox> </v:RoundRect> </body> </html> 根据单元格内容加亮 <table border="1" cellspacing="0" width="400" cellpadding="0" id="table1"> <tr> <td width="80">12</td> <td width="80">34</td> <td width="80">56</td> <td width="80">78</td> <td width="80">90</td> </tr> <tr> <td width="80">abc</td> <td width="80">def</td> <td width="80">ghj</td> <td width="80">lop</td> <td width="80">dry</td> </tr> <tr> <td width="80">!@#</td> <td width="80">_(*</td> <td width="80">#$%</td> <td width="80">^$#</td> <td width="80">WWW</td> </tr> </table><SCRIPT> var ids; var idstext; function hightlight_td(){ var text=txt.value; TDs=document.all.table1.all.tags("TD") //使用iframe时: //TDs=iframe的name.document.all.table1.all.tags("TD") if (text!="") { for (var i = 0; i < TDs.length; i++) { obj=TDs[i]; idstext=obj.innerText; idnum=idstext.indexOf(text); if (idnum!=-1) { obj.style.background="red"; } else { obj.style.background="#FFFFFF"; } } } else { alert("没有输入"); } } </SCRIPT> <input type="text" name="txt" value=""><input type="button" value="请输入要查的字符串." onClick="hightlight_td();"> 单击表格换色<script> function bgChange(obj){ obj.bgColor=obj.bgColor==""?"#0099ff":""; } </script> <table width="80%" border="1"> <tr onclick="bgChange(this)"><td>a</td><td>a</td></tr> <tr onclick="bgChange(this)"><td>a</td><td>a</td></tr> <tr onclick="bgChange(this)"><td>a</td><td>a</td></tr> </table> </article> </main></body></html>