笑死我了，马上发出摘录和部分翻译（多意译，那样难度小一些，我E文一般般）。

http://www.sitepoint.com/forums/showthread.php?s=5895d02376253cff21f1c0d8d710eaf7&t=204194

非常抱歉，这个“马上”，“马上”了4-5个小时，都怪这个帖子太长，中午的饭太香，网速这么慢，而我对睡懒觉又这么擅长，…

为什么要使用xhtml验证的精彩问答

原文在：

http://www.sitepoint.com/forums/showthread.php?s=5895d02376253cff21f1c0d8d710eaf7&t=204194

问题大约是，为什么要验证，不验证在浏览器里也看着好好的呀。回复挺有意思的，摘录部分如下：

以下为引用内容:

---

The thing isn’t “what works now” but “what will work in the future”. By using standards, you are making your sites “future safe”. And if everyone made their sites standards-complient, then the browser makers would make sure that their browsers work according to those standards.

Keep in mind that if you use non-standard markup, it might work, but there is no guarentee that it will work in future browsers.

---

问题在于不仅仅是现在网页显示没问题，而是将来也要没问题。记住，不标准的页面现在能看，将来不一定。

以下为引用内容:

---

particularly if you move from old-style table based layout to css driven sites, you absolutely should ensure that documents and stylesheets validate, as the browser inconsistencies when they don’t are a nightmare.

and, on a more ideological level: if you use a syntax, why not do it properly and make sure it’s error free? it’s a bit like saying: i don’t have a driver’s license, and there’s a lot of traffic laws i don’t know or understand…but i can drive a car nonetheless, so why should i bother?

---

在你的代码还没有乱成一场噩梦之前，把表格从你的页面中去掉。（深有同感，我经常会被叫去在一个嵌套了7-8层的页面中查找一个错误，而且，更糟糕的是，很多手写和拷贝粘贴、修改过的代码根本没有缩进，很多结束

标签被丢掉了，丢掉合并的行或列更是家常便饭。而且这种已经嵌入了后台代码的乱哄哄的文字无论在dreamweaver或者后台的代码编辑器中都不能正确地显示或者格式化！IBM jsp开发环境的那个破玩意的格式化代码，会任意修改前台代码的大小写，而DOM是分大小写的，或者任意加空格！导致js错误。-郭爽注）

以下为引用内容:

---

No doubt that in the next projects I will take a closer look in validating my sites, but I haven′t done it in my current projects, as my logic tells me, if my sites work well in all these browsers the code would be ok.

Future safe is just a matter of updating my browsers and still keep a few old, to make sure it works for people who haven′t updated, we all know way to well how many people are still using old browsers.

An example:

I like to color my scrollbars, the CSS code for this is not standard and it only works with IE version 5.5 and 6.0 on Windows, but I use it anyway, why? because 90% of my visitors can see it.

---

不用怀疑，下个项目我一定会验证，但手头的项目先不考虑。…虽然设置滚动条颜色的css不符合验证标准，但我还是在使用，为什么？因为至少还有90%的人可以看到这个效果。

以下为引用内容:

---

分别针对上面回复的回复，：）

sorry, but: if your pages don’t validate, it’s only by chance (and thanks to the leniency of browsers’ error handling and guessing mechanisms) that they actually display correctly.

you seem to miss the point that even old browsers actually work with VALID code…

well, by that logic…do whatever. don’t worry about validation. heck, don’t worry about adding vbscript, jscript, activeX and any other cruft to pages…

---

验证不通过的页面只有部分机会被正确显示（这还要感谢浏览器对错误的宽大处理和猜测技巧）

你可能忘记了这一点—就算是老的浏览器也可以正确显示验证过的代码

…

以下为引用内容:

---

I just checked HTML and CSS validation for my company site, which cost a lot of money, and is the center of 55.000 employees, and it doesn′t validate at all - lots of errors all the way down the code, but the site looks fine, even in Netcape 4.7.

Please don′t misunderstand me about the title of this topic, I would love to have just one standard that all browsers use and work perfectly, so I don′t have to test them all, but in the real world it′s not like this unfortunately.

---

刚才，我检查了我们公司站点的验证情况，做这个站点可是花了不少钱，55000个人在使用这个站点，但根本不能通过验证，大量的验证错误，但是即使是netscape4.7也可以正确的显示。

不要误解我的意思，我也很高兴有这么一个标准，这样就不用一个一个地测试所有浏览器了。但是真实的世界却不是这么回事。

以下为引用内容:

---

I see that you don’t test your work in Opera, Safari, or IE for the Mac. Lots of standards advocates make their sites work in those browsers as well. It’s not just about IE and Netscape you know.

---

我发现你没有测试 opera,Safari和苹果版的IE（Mac IE和咱们常见的IE有很大的不同，根本就不是同一个项目组做的，虽然版本号可能一样或者相近-郭爽注）

以下为引用内容:

---

Well, I don′t have a Mac to test on, but I always have a friend to test it for me. I think he only has IE and Safari installed, but I think I test on more browsers than the average designer, and how many here always code according to standards and not browsers?

---

我没有Mac来测试，但是可以叫我的朋友来帮忙，但我想他只装了IE和Safari。我想我作的测试已经比很多Web设计师多很多，这里又有多少人根据标准而不是浏览器的显示来写代码的呢？

以下为引用内容:

---

I code to both standards and common browsers, but I don’t freak out if my paragraphs are a couple of pixels narrower in IE5 or anything. If my layout is severely broken in a widely-used browser I’ll find a way to fix it, and I can do so using a standards-based method 99.9% of the time.

Going to standards doesn’t mean forsaking the browsers. As a matter of fact, debugging code becomes easier once it’s valid because you know when it’s a browser problem and when you made a mistake somewhere in your code.

---

我既看标准也用浏览器测试。我99.9%的时间都是根据标准来做页面。根据标准写代码和用浏览器测试并不矛盾，实际上，这样调试代码更容易了，因为你知道什么时候浏览器会出问题，什么时候你的代码会出问题。

以下为引用内容:

---

I only recently became interested in learning how to design using standards (I’m actually taking a class on XHTML and CSS right now and been reading Zeldman’s book.) but I thought I’d toss in yet another reason why it’s good to follow standards. I do believe it makes the sites accessible to a larger audience. You shouldn’t just think about desktop browsers, you should also think about folks who are viewing sites using screen readers, PDAs, and cellphones.

And I’ll just add that I’m loving the fact that Opera emulates small screen devices.

---

最近我才开始学习xhtml标准，我在上一个相关的课程。我觉得按照标准来写页面还有一个好处就是，更多的人可以用 screen readers（我猜这个就是windows附件里面的那个阅读器之类的东西，英文我忘了，就是可以把文字念出来的那个小软件，这样你就不用看显示器而是听了-郭爽注）或者PDA或者手机。

以下为引用内容:

---

As imouto said… have you tested all environments?

IE, Netscape, Firefox, Opera… great? On Windows, Mac and Linux? Great.

Cell phones?…PDAs?…Screen readers?

It’s worth it to read up on the standards and practice implementing them. Use them on your future sites and whenever you revise or update your existing ones.

When you get a hang of them, writing to standard can make the testing process much easier. For one, if you understand the styles properly, you have a higher chance of getting the site to look right on the first try. Plus, as has been mentioned, you gain the ability to test your code using the (X)HTML and CSS validators.

Of course, there’s a learning curve. If you’re used to writing code one way, using the presentational features of previous HTML version, it’ll take a bit of time to learn to use CSS efficiently. But it’ll pay off in the future of your sites, and as being an addition to your skillset.

---

IE, Netscape, Firefox, Opera?Windows, Mac and Linux? Cell phones?…PDAs?…Screen readers这些你都测试了吗？

如果你还在犹豫，那么我告诉你，按照标准可以使你的测试变得更容易。你越了解样式表，你就更能控制你页面的正确显示。而且前面也说了，你可以用 xhtml和css验证器来帮助你的测试。

当然，学习需要时间。如果你习惯了以前的html代码书写方式，学习新标准可能要花很多时间。这在将来会得到回报，还会提高你自己的技能。

以下为引用内容:

---

All environments ?

Which private web designer who works at home, has that possibility? I test on various browsers for PC (as posted above) and also have a friend test for me on Mac (2 browsers), Linux I never test on, because I don′t have access to a Linux machine and my stats for those users are so low that it′s not worth considering anyway.

Actually, I use statistics a lot to - specially about browsers, operating systems and screen resolution to insure that my sites work. I hardly never see any Linux users, and Cell phone, PDA, screen readers are all so rare, that I don′t consider them either.

The future changes of course, and eventually I will learn to validate my code, and more users will use small pocket browsers to go online, when that time comes, I will be ready…!

Thanks a lot for the comments on this, it′s always nice to learn about how people work on this.

---

（这个叫Wii的家伙还蛮倔的！-郭爽注）

以下为引用内容:

---

haps you don’t need to worry, for the sake of your sites

Perhaps you’re overlooking something… Earlier you mentioned having errors with Netscape 4.7, but dismissing it because only 1-2% of your audience is using it. Let’s put that into numbers. Say you have a fairly low 100 visitors a day. So that’s 1-2 visitors a day seeing a broken site. That’s 30-60/month, or 360-720 per year. If you have 1000 visitors daily, you’re talking about up to 600 monthly, 7200 yearly. Can you aford to turn 30, 720, or more potential customers away on a daily basis?

Worth considering, at least. 0.3% of traffic using PDAs, for example, may seem small, but if your site is popular enough, it can still be a large number of actual users. But this all depends on your site.

There’s no time like the present! Learning how to use the language properly can really cut down on development time, among other things. It doesn’t have to just be a headache for you.

---

以下为引用内容:

---

Well, if I created websites with 1000 daily visits I probably won′t be so relaxed about the whole thing.

But thanks, I got it - validated code is the way to go, also for me.

---

以下为引用内容:

---

Glad to hear it. Of all the reasons given here to validate code the best is that is makes designing and maintaining a site easier in the long run. If there is a display issue, you simply validate and fix those issues first. Often times this eliminates or seriously reduces the problem.

When developing a website, my advice is to always develop using Firefox with the “Web developer” extension. This extension allows you to validate HTML and CSS on the fly. Firefox’s built in DOM inspector allows you to look at the structure of the code from the browser’s perspective. Finally because Firefox more strictly adheres to W3C specifications than MSIE, and doesn’t include any browser specific tags (unlike MSIE) one is less likely to get sucked into browser specific traps.

Developing in Firefox and this testing in MSIE makes development go much faster and easier than trying to develop in MSIE and then test and fix for other browsers.

---

以下为引用内容:

---

The day I stopped worrying about NN4.x was the day my site launched forward. By abandoning NN4.x, I was able to streamline code thus reduce download time for my site and provide enhance functionallity. By eliminating tables to control layout as was necessary for NN4, I was able to create multiple layouts transparently. For instance my site displays one way on the computer screen and prints entirely differently.

---

这时候有人问用表格有什么坏处。

以下为引用内容:

---

Tables are generally considered visual media thus when interpreting them linearised they should still make sense and contain tabular data alone. Plus CSS is much more powerful at positioning elements and separating structure from presentation.

---

最重要的一点，用CSS而不是表格布局，可以把数据和表现方式完全分开。

以下为引用内容:

---

One point I agree strongly with is the validation which ‘doesnt matter’. I use the coloured scroll bars, which effect no one - but as long as this is the only pit fall, I count my site as validated!

---

验证本身并不重要，我就在使用滚动条颜色设置，所以验证不通过，但是我还是在页面上加了验证通过。

以下为引用内容:

---

If your site is valid it does not mean it is accessible at all, but you cannot have a truly accessible site if it doesn’t use valid syntax.

---

验证了不一定就符合accessible（易用性），不验证那就肯定不符合啦。

以下为引用内容:

---

One good way of testing for accessiblity is to use a text only browser like Lynx.

---

测试易用性的一个好办法就是用一个文本浏览器来测试，比如Lynx。

以下为引用内容:

---

…Valid HTML and CSS is one step, using HTML semanticly is another. There’s far more to accessibility than I could possibly fit in one post (or even one book).

验证只是第一步，还要合理使用html标签，甭说这个回复，就算一本书也不一定能说完。

---

以下为引用内容:

---

Start designing with standards but even more importand make your documents semanticly correct. Drop tables for layout and use CSS in you can. When you will do that you won’t have to worry so much for the looks but for actual content. And if you will be using CSS your new documents will style on its own once you have your stylesheet ready.

You will benefit from this on many levels:

- you’ll learn someting new

- it will be fun

- less pain

- more accesible

- it will take less space

And because your documents willl be well structured they will beeasy to read for search engines. That’s about it.

---

这个帖子太长了，以上只是前两页的部分回复。

要出去了，“电脑不是生活的全部”“周末应该与家人在一起…”，羡慕那些有勇气离开电脑的人。晚上回来再接着写。

点击这里打开新窗口浏览此网页

采用类似的方法，你也可以定制让flickR随机（或者最新）地显示一张或多张图片在你自己的Blog上。这里只是控制了一下显示的样式。

代码如下：

</p> <p><!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" lang="gb2312"></p> <p><head></p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></p> <p><meta http-equiv="Content-language" content="gb2312" /></p> <style type="text/css" media="all"> <p>body {margin:8px;font:12px tahoma,sans serif}</p> <p>img {margin:4px;border:1px solid #333;}</p> </style> <p></head></p> <p><body></p> <p><script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=36451754@N00&count=30&display=latest&name=0&size=square"></script></p> <p><script type="text/javascript"></p> <p>window.onload=function(){str=" <h5>guoshuang’s recently FlickR</h5> <p>“;oImage=document.links;for(i=0;i<document.links.length-1;i++){str+="<a href="+document.links[i].href+" target="clickR"><img border="0" alt="guoshuang flickR" src="+document.links[i].children[0].src+" /></a>“}document.body.innerHTML=str;}</p> <p></script></p> <p></body></p> <p></html></p> <p>

flickR自动生成代码为：

</p> <p><DIV style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px"></p> <p><TABLE cellSpacing=0 cellPadding=4></p> <p><TBODY></p> <p><TR align=middle></p> <p><TD><A href="http://www.flickr.com/photos/guoshuang/1504546/"><IMG src="http://www.flickr.com/photos/1504546_fe88cd702e_s.jpg"></A></TD></TR></p> <p><TR align=middle></p> <p><TD><A href="http://www.flickr.com/photos/guoshuang/1504547/"><IMG src="http://www.flickr.com/photos/1504547_b9b5d3a0bb_s.jpg"></A></TD></TR></p> <p><TR></p> <p><TD vAlign=top align=middle><A href="http://www.flickr.com">www.<STRONG><FONT color=#3993ff>flick</FONT><FONT color=#ff1c92>r</FONT></STRONG>.com</A></TD></TR></TBODY></TABLE></DIV></p> <p>

初学者可以看看。

</p> <p><!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" lang="gb2312"></p> <p><head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></p> <p> <meta http-equiv="Content-language" content="gb2312" /></p> <style type="text/css" media="all"> <p> .menu4 {</p> <p> width: 100%;</p> <p> margin: 1em 0;</p> <p> padding: 0;</p> <p> background: #fff none;</p> <p> }</p> <p> .menu4 ul {</p> <p> margin: 0;</p> <p> padding: 0;</p> <p> list-style-type: none;</p> <p> }</p> <p> .menu4 li {</p> <p> margin: 0;</p> <p> padding: 0;</p> <p> float: left;</p> <p> width: 7em;</p> <p> margin-right: 1em;</p> <p> background: #eee none;</p> <p> text-align: center;</p> <p> }</p> <p> .menu4 a {</p> <p> color:#000;</p> <p> display: block;</p> <p> width: 100%;</p> <p> text-decoration: none;</p> <p> }</p> <p> .menu4 a:hover {</p> <p> background: #ff9 none;</p> <p> }</p> </style> <p></head></p> <p><body></p> <div class="menu4"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3 (long)</a></li> <li><a href="">Item 4</a></li> </ul> <p> <br clear="left"></p></div> <p></body></p> <p></html></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

原文在：

http://www.sovavsiti.cz/css/horizontal_menu.html

原文在：

http://www.sovavsiti.cz/css/w3c_buttons.html

挺有意思，可以练习css的控制。

</p> <p><!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="gb2312"></p> <p><head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /></p> <p> <meta http-equiv="Content-language" content="2312" /></p> <style type="text/css" media="all"> <p>div.w3cbutton1 {</p> <p> position: relative;</p> <p> margin: 1em 0;</p> <p> font-family: helvetica,arial,sans-serif;</p> <p> font-size: 70%;</p> <p> font-weight: bold;</p> <p>}</p> <p>div.w3cbutton1 a {</p> <p> display: block;</p> <p> border-top: 1px solid #cecece;</p> <p> border-bottom: 2px solid #4a4a4a;</p> <p>}</p> <p>div.w3cbutton1 a.w3c1 {</p> <p> width: 3em;</p> <p> border-left: 1px solid #cecece;</p> <p> text-align: center;</p> <p>}</p> <p>div.w3cbutton1 a.spec1 {</p> <p> position: absolute;</p> <p> left: 3em;</p> <p> top: 0;</p> <p> width: 6em;</p> <p> border-right: 2px solid #4a4a4a;</p> <p> padding-left: 0.5em;</p> <p>}</p> <p>div.w3cbutton1 a.w3c1:link,</p> <p>div.w3cbutton1 a.w3c1:visited,</p> <p>div.w3cbutton1 a.w3c1:hover {</p> <p> background-color: #fff;</p> <p> color: #0c479d;</p> <p> text-decoration: none;</p> <p>}</p> <p>div.w3cbutton1 a.spec1:link,</p> <p>div.w3cbutton1 a.spec1:visited,</p> <p>div.w3cbutton1 a.spec1:hover {</p> <p> background-color: #fc6;</p> <p> color: #000;</p> <p> text-decoration: none;</p> <p>}</p> </style> <p></head></p> <p><body></p> <div class="w3cbutton1"> <p> <a class="w3c1" href="...">W3C</a></p> <p> <a class="spec1" href="...">XHTML 1.0</a></p> </div> <div class="w3cbutton1"> <p> <a class="w3c1" href="...">W3C</a></p> <p> <a class="spec1" href="...">CSS</a></p> </div> <p></body></p> <p></html></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="gb2312"></p> <p><head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /></p> <p> <meta http-equiv="Content-language" content="2312" /></p> <style type="text/css" media="all"> <p>.w3cbutton4 {</p> <p> margin: 1em 0;</p> <p> width: 9em;</p> <p> font-family: helvetica,arial,sans-serif;</p> <p> font-size: 70%;</p> <p> font-weight: bold;</p> <p>}</p> <p>.w3cbutton4 a {</p> <p> display: block;</p> <p> width: 100%;</p> <p>}</p> <p>.w3cbutton4 a:link,</p> <p>.w3cbutton4 a:visited,</p> <p>.w3cbutton4 a:hover {</p> <p> background-color: #fc6;</p> <p> color: #000;</p> <p> text-decoration: none;</p> <p>}</p> <p>.w3cbutton4 a:link,</p> <p>.w3cbutton4 a:visited {</p> <p> border-top: 1px solid #cecece;</p> <p> border-bottom: 2px solid #4a4a4a;</p> <p> border-left: 1px solid #cecece;</p> <p> border-right: 2px solid #4a4a4a;</p> <p>}</p> <p>.w3cbutton4 a:hover {</p> <p> border-bottom: 1px solid #cecece;</p> <p> border-top: 2px solid #4a4a4a;</p> <p> border-right: 1px solid #cecece;</p> <p> border-left: 2px solid #4a4a4a;</p> <p>}</p> <p>.w3cbutton4 span.w3c {</p> <p> padding: 0 0.4em;</p> <p> background-color: #fff;</p> <p> color: #0c479d;</p> <p>}</p> </style> <p></head></p> <p><body></p> <div class="w3cbutton4"> <p> <a href="..."></p> <p> <span class="w3c">W3C</span></p> <p> <span class="spec">XHTML 1.0</span></p> <p> </a></p> </div> <p></body></p> <p></html></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="gb2312"></p> <p><head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /></p> <p> <meta http-equiv="Content-language" content="2312" /></p> <style type="text/css" media="all"> <p> a.w3cbutton2 {</p> <p> display: block;</p> <p> position: relative;</p> <p> width: 82px;</p> <p> height: 28px;</p> <p> margin: 1em 0;</p> <p> border-top: 1px solid #cecece;</p> <p> border-right: 2px solid #4a4a4a;</p> <p> border-bottom: 2px solid #4a4a4a;</p> <p> border-left: 1px solid #cecece;</p> <p> font-family: helvetica,arial,sans-serif;</p> <p> font-size: 11px;</p> <p> font-weight: bold;</p> <p> }</p> <p> a.w3cbutton2:link, a.w3cbutton2:visited, a.w3cbutton2:hover {</p> <p> text-decoration: none;</p> <p> }</p> <p> a.w3cbutton2 span {</p> <p> display: block;</p> <p> padding: 0 2px;</p> <p> }</p> <p> span.w3c2 {</p> <p> background-color: #fff;</p> <p> color: #0c479d;</p> <p> font-size: 13px;</p> <p> line-height: 28px;</p> <p> }</p> <p> span.spec2 {</p> <p> position: absolute;</p> <p> top: 0;</p> <p> left: 34px;</p> <p> width: 44px;</p> <p> padding: 0 2px;</p> <p> background-color: #fc6;</p> <p> color: #000;</p> <p> line-height: 14px;</p> <p> }</p> <p> span.check {</p> <p> position: absolute;</p> <p> top: 4px;</p> <p> left: 64px;</p> <p> color: #900;</p> <p> font-size: 23px;</p> <p> font-weight: bold;</p> <p> }</p> </style> <p></head></p> <p><body></p> <p> <a class="w3cbutton2" href="http://validator.w3.org/check/referer"><span class="w3c2">W3C</span> <span class="spec2">XHTML 1.0</span> <span class="check">√</span></a></p> <p></body></p> <p></html></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

原文在：

http://www.sovavsiti.cz/css/abbr.html

类似

缩写

这样的代码在IE中显示是不正确的（用firefox,opera看看就知道了），而acronym却可以。解决办法如下：

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></p> <p><head></p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></p> <p><title></title></p> <p><meta http-equiv="Content-Language" content="gb2312" /></p> <style type="text/css"> <p>body {font:12px tahoma;}</p> <p>acronym,.abbr {</p> <p> cursor: help;</p> <p> border-bottom:dashed 1px #000;</p> <p>}</p> </style> <p><script type="text/javascript"></p> <p>function styleAbbr(){</p> <p>if(isIE){</p> <p> oldBodyHtml=document.body.innerHTML;</p> <p> reg=/<abbr([^>]*)>([^<]*)</abbr>/ig;</p> <p> newBodyHtml=oldBodyHtml.replace(reg,”<abbr $1><span class="abbr" $1>$2</span></abbr>“);</p> <p> document.body.innerHTML=newBodyHtml;</p> <p> }</p> <p>}</p> <p>window.onload=function(){</p> <p>styleAbbr();</p> <p>}</p> <p>isIE=(document.all)?true:false;</p> <p></script></p> <p></head></p> <p><body></p> <p>关于<abbr title="缩写">缩写</abbr>和<acronym title="首字母缩写">首字母缩写</acronym></p> <p></body></p> <p></html></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

练习中发现，最后面的
  是不能少的！（是我加的，原文并没有）如果少了，不能显示 border-bottom，郁闷，似乎是因为行间距或者显示空间的问题，border=top的话上面必须有东西，谁来解释一下？

经典论坛 ncs（强人，经常发出震聋发聩的文章，我都不敢去看 - 会死掉一堆脑细胞） 的帖子，很有意思，虽然我看得很吃力。

http://www.blueidea.com/bbs/NewsDetail.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8&DaysPrune=5&lp=1&id=1819267

以下为引用内容:

---

无损数据压缩是一件奇妙的事情，想一想，一串任意的数据能够根据一定的规则转换成只有原来 1/2 - 1/5 长度的数据，并且能够按照相应的规则还原到原来的样子，听起来真是很酷。

半年前，苦熬过初学 vc 时那段艰难的学习曲线的我，对 MFC、SDK 开始失望和不满，这些虽然不算易学，但和 DHTML 没有实质上的区别，都是调用微软提供的各种各样的函数，不需要你自己去创建一个窗口，多线程编程时，也不需要你自己去分配 CPU 时间。我也做过驱动，同样，有DDK（微软驱动开发包），当然，也有 DDK 的“参考手册”，连一个最简单的数据结构都不需要你自己做，一切都是函数、函数……

微软的高级程序员编写了函数让我们这些搞应用的去调用，我不想在这里贬低搞应用的人，正是这些应用工程师连接起了科学和社会之间的桥梁，将来可以做销售，做管理，用自己逐渐积累起来的智慧和经验在社会上打拼。

但是，在技术上来说，诚实地说，这并不高深，不是吗？第一流的公司如微软、Sybase、Oracle 等总是面向社会大众的，这样才能有巨大的市场。但是他们往往也是站在社会的最顶层的：操作系统、编译器、数据库都值得一代代的专家去不断研究。这些帝国般的企业之所以伟大，恐怕不是“有经验”、“能吃苦”这些中国特色的概念所能涵盖的，艰深的技术体系、现代的管理哲学、强大的市场能力都是缺一不可的吧。我们既然有志于技术，并且正在起步阶段，何必急不可耐地要转去做“管理”，做“青年才俊”，那些所谓的“成功人士”的根底能有几何，这样子浮躁，胸中的规模和格局能有多大？

在我发现vc只是一个用途广泛的编程工具，并不能代表“知识”、“技术”的时候，我有些失落，无所不能的不是我，而是 MFC、SDK、DDK，是微软的工程师，他们做的，正是我想做的，或者说，我也想成为那种层次的人，现在我知道了，他们是专家，但这不会是一个梦，有一天我会做到的，为什么不能说出我的想法呢。

那时公司做的系统里有一个压缩模块，领导找了一个 zlib 库，不让我自己做压缩算法，站在公司的立场上，我很理解，真的很理解，自己做算法要多久啊。但那时自己心中隐藏的一份倔强驱使我去寻找压缩原理的资料，我完全没有意识到，我即将打开一扇大门，进入一个神奇的“数据结构”的世界。“计算机艺术”的第一线阳光，居然也照到了我这样一个平凡的人的身上。

---

以下为引用内容:

---

上面说到“计算机艺术”，或者进一步细化说“计算机编程艺术”，听起来很深奥，很高雅，但是在将要进入专业的压缩算法的研究时，我要请大家做的第一件事情是：忘掉自己的年龄、学历，忘掉自己的社会身份，忘掉编程语言，忘掉“面向对象”、“三层架构”等一切术语。把自己当作一个小孩，有一双求知的眼睛，对世界充满不倦的、单纯的好奇，唯一的前提是一个正常的具有人类理性思维能力的大脑。

下面就让我们开始一段神奇的压缩算法之旅吧：

1. 原理部分：

　　有两种形式的重复存在于计算机数据中，zip 就是对这两种重复进行了压缩。

　　一种是短语形式的重复，即三个字节以上的重复，对于这种重复，zip用两个数字：1.重复位置距当前压缩位置的距离；2.重复的长度，来表示这个重复，假设这两个数字各占一个字节，于是数据便得到了压缩，这很容易理解。

　　一个字节有 0 - 255 共 256 种可能的取值，三个字节有 256 * 256 * 256 共一千六百多万种可能的情况，更长的短语取值的可能情况以指数方式增长，出现重复的概率似乎极低，实则不然，各种类型的数据都有出现重复的倾向，一篇论文中，为数不多的术语倾向于重复出现；一篇小说，人名和地名会重复出现；一张上下渐变的背景图片，水平方向上的像素会重复出现；程序的源文件中，语法关键字会重复出现（我们写程序时，多少次前后copy、paste？），以几十 K 为单位的非压缩格式的数据中，倾向于大量出现短语式的重复。经过上面提到的方式进行压缩后，短语式重复的倾向被完全破坏，所以在压缩的结果上进行第二次短语式压缩一般是没有效果的。

　　第二种重复为单字节的重复，一个字节只有256种可能的取值，所以这种重复是必然的。其中，某些字节出现次数可能较多，另一些则较少，在统计上有分布不均匀的倾向，这是容易理解的，比如一个 ASCII 文本文件中，某些符号可能很少用到，而字母和数字则使用较多，各字母的使用频率也是不一样的，据说字母 e 的使用概率最高；许多图片呈现深色调或浅色调，深色（或浅色）的像素使用较多（这里顺便提一下：png 图片格式是一种无损压缩，其核心算法就是 zip 算法，它和 zip 格式的文件的主要区别在于：作为一种图片格式，它在文件头处存放了图片的大小、使用的颜色数等信息）；上面提到的短语式压缩的结果也有这种倾向：重复倾向于出现在离当前压缩位置较近的地方，重复长度倾向于比较短（20字节以内）。这样，就有了压缩的可能：给 256 种字节取值重新编码，使出现较多的字节使用较短的编码，出现较少的字节使用较长的编码，这样一来，变短的字节相对于变长的字节更多，文件的总长度就会减少，并且，字节使用比例越不均匀，压缩比例就越大。

　　在进一步讨论编码的要求以及办法前，先提一下：编码式压缩必须在短语式压缩之后进行，因为编码式压缩后，原先八位二进制值的字节就被破坏了，这样文件中短语式重复的倾向也会被破坏（除非先进行解码）。另外，短语式压缩后的结果：那些剩下的未被匹配的单、双字节和得到匹配的距离、长度值仍然具有取值分布不均匀性，因此，两种压缩方式的顺序不能变。

　　在编码式压缩后，以连续的八位作为一个字节，原先未压缩文件中所具有的字节取值不均匀的倾向被彻底破坏，成为随机性取值，根据统计学知识，随机性取值具有均匀性的倾向（比如抛硬币试验，抛一千次，正反面朝上的次数都接近于 500 次）。因此，编码式压缩后的结果无法再进行编码式压缩。

　　短语式压缩和编码式压缩是目前计算机科学界研究出的仅有的两种无损压缩方法，它们都无法重复进行，所以，压缩文件无法再次压缩（实际上，能反复进行的压缩算法是不可想象的，因为最终会压缩到 0 字节）。

　　短语式重复的倾向和字节取值分布不均匀的倾向是可以压缩的基础，两种压缩的顺序不能互换的原因也说了，下面我们来看编码式压缩的要求及方法：

---

对话如下：

以下为引用内容:

---

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

我写的压缩原理看得懂不？

郭爽-魔兽看人生… says:

?

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

js区置顶的那个

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

我希望写的深入浅出一点，你看看

郭爽-魔兽看人生… says:

ok

郭爽-魔兽看人生… says:

有些吃力 例子少了点 压缩是压重复部分 大致道理我也知道 再具体一些的算法就不懂了

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

还没写完，目前的部分能看懂不

郭爽-魔兽看人生… says:

很吃力

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

比如为什么不能重复压缩

郭爽-魔兽看人生… says:

这个可以

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

还有两种压缩的顺序不能颠倒

郭爽-魔兽看人生… says:

不是很理解

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

短语式重复、单字节重复，能明白吗？

郭爽-魔兽看人生… says:

就是单字节和多字节？

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

嗯

郭爽-魔兽看人生… says:

一个个 重复 和 一段一段重复

郭爽-魔兽看人生… says:

我这么理解

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

对的

郭爽-魔兽看人生… says:

我以前一直不理解 为什么不能抑制压缩到0

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

短语式压缩为什么不能重复进行理解不

郭爽-魔兽看人生… says:

hehe

郭爽-魔兽看人生… says:

你的意思是说 短语压过一次之后 就不会再有短语式重复了

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

对

郭爽-魔兽看人生… says:

但是 再用单字节重复处理以后 可能又会出现短语式重复吧？

郭爽-魔兽看人生… says:

虽然几率很小 但正好碰巧也不一定

郭爽-魔兽看人生… says:

也就是说 我的确没有理解为什么不能一人一下的重复压缩下去

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

三个字节有 256 * 256 * 256 共一千六百多万种可能的情况，更长的短语取值的可能情况以指数方式增长，出现重复的概率似乎极低

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

编码式压缩后就变成这样了

郭爽-魔兽看人生… says:

另外 这种重复 可能是直接重复 也可能是 ABCD R#$%#%#$% 然后又 ABCD

郭爽-魔兽看人生… says:

这样算不算重复呢？

郭爽-魔兽看人生… says:

短语重复的界限 很不好定

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

再去处理，意义不大了，压缩一个几兆的文件，花个几小时，结果比半分钟的没多大区别

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

只要把原始文件中自然存在的短语重复倾向压掉就好了，一千六百万分之一的重复概率，太微乎其微了

郭爽-魔兽看人生… says:

很有意思的文章 我转一下到我的blog 你继续写法 我再看 如果我这样的菜鸟都看懂了 那估计别人问题也不大

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

你都看不懂，我就要调整写作方式了

郭爽-魔兽看人生… says:

多给点例子

郭爽-魔兽看人生… says:

我没有写过程序 看起来肯定吃力！

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

在论坛上，你已经算是好的了

郭爽-魔兽看人生… says:

加油

wangyao(我们都是只有一个翅膀的天使，只有相互拥抱才能飞翔。) says:

---