HTML之路--XHTML & CSS最佳实践指南

.2.1.7 多语种及双向文本
2.1.8 地址
2.2 文本样式的设定
2.2.1 字体
2.2.2 颜色
2.2.3 字号
2.2.4 行高
2.2.5 粗体及斜体
2.2.6 大小写
2.2.7 font属性的快捷写法
2.2.8 下划线及删除线
2.2.9 字母及词间距
2.2.10 缩进
2.2.11 水平对齐
2.2.12 垂直对齐
2.2.13 更多文字式样技巧
第3章 链接
第4章 图像
第5章 布局
第6章 列表
第7章 脚本及对象
第8章 表格
第9章 表单
第10章 多种媒介
结语
附录a xhtml参考
附录b css参考

.　　落实到具体对象上，这就意味着font标签已经出局，table标签面向表状数据而不是布局（详见第8章）。这还意味着有标题时它应当标记为标题，而不是使其看起来像，这还意味着要强调文字时应当用到em标签，而不仅仅是CSS修饰。
　　图0-3 The CSS Zen Garden—关于内容和表现分离的极好范例（由Didier Hilhorst设计）
　　图0-4 沿用完全相同的XHTML代码，附加不同的CSS，就能实现完全不一样的设计方案（由Samuel Marin设计）
　　图0-5 结构化的、与表现无关的内容准备好以后，设计师就能随心所欲地控制外观（由Mikhel Proulx设计）
　　如果您编写的HTML代码中有哪怕一丁点儿涉及表现的范畴，先停下来—CSS能够更好地完成任务。这意味着从标记斜体字到用表格布局的全部。并且，如果内容具有明确而合适的语义含义（比如强调），只用CSS让它们看起来不同还不够—应当用HTML借助结构来将这一语义标注出来。 范例 结构/表现 HTML/CSS
　　标题 结构 XHTML
　　标题的字号 表现 CSS
　　段落 结构
　　XHTML
　　段落中文字的颜色 表现 CSS
　　插图表格 结构 XHTML
　　表格单元格的边框 表现 CSS
　　图片，比如证件照 结构 XHTML
　　图片，比如装饰背景 表现 CSS
　　一组导航链接 结构 XHTML
　　页面上导航链接的位置 表现 CSS
　　这不仅仅是关于标签是否“合法”地使用，因为用表格布局或者用b标签标记粗体字的页面也是“合法”的。这是关于一个全局的方案以及HTML标签的最佳实践—将标签用在它们的本意所指之处—标注数据并赋予数据意义。
　　使用Web标准的大多数实际好处都源自这一理念。它很好，很受用。
　　Web标准的实例..
　　Web标准并不是绝地武士的精神技巧，Web标准的传道者们也并不想（经常）成为疯狂的教徒。如果没有真实的、有实际意义的好处，没有人会把Web标准真正当回事。那么下面就是一些最重要的标准：
　　跨平台兼容性：使Web标准区别于那些陈旧东西的是它并不面向某个特定的浏览器。一个常见的Web设计的问题就是“必须”针对不同的浏览器制作不同的页面。即使在今天，一些站点也只能工作在微软的IE浏览器下，排除掉了一个还不大但却很重要的用户群。除了一些很小的问题外，遵循Web标准可以确保网页将适用于任何场合。不需要替代版本，不需要“IE Only”版本（我们太懒了），不会排除用户。
　　前向兼容性：感谢日益增强的跨平台兼容的可能性，如果不使用那些现存浏览器专有的某些非标准特性，那么网页将会更顺利地运作于未来的浏览器上。
　　设备无关性：是否每个上网的人都是坐在电脑屏幕前呢？大多数是的，但有人可能会将页面打印出来，有人使用移动设备浏览页面（见第10章）。您可能会觉得，要很好地适应多种设备，需要给网页制作多个版本。但其实不必，使用Web标准的话，就不会有这类问题。通过将结构和表现相分离，同样的内容可以根据设备的不同而做出不同的显示。
　　搜索引擎优化：搜索引擎喜欢Web标准。它们曾经热衷“元数据”（由作者明确写在页面代码内的相关数据），但这些主观性质的标签很容易添加，于是导致搜索结果不一定和页面内容相关。现在的搜索引擎已经聪明多了，能够使用更先进的技术来评判页面与搜索条件的相关性。它们会分析页面内容本身，并且尤其关注标题及其与内容的关联程度。所以，如果您使用font标签来让文字看起来像标题，而不是使用h1和h2（参见第2章），或者您在内容外面裹了一层又一层的表格，那么您就在给自己找麻烦了。
　　轻量级的页面：一个可能是最明显的优势就是页面能变得轻巧不少。小容量的页面意味着带宽的节省（也就是主机花费的节省）以及更快的页面加载速度（增强的可用性）。一个看起来一样的页面，用表格布局以及font修饰文字的“陈旧”页面要臃肿得多。当去掉那些冗余的代码或者不必要的图片（比如透明的“占位图片”以及那些可以用CSS替代的图片文字）时，让页面容量减小60%到70%并不是罕见的情况。
　　亲和力（accessibility）：让有残疾的用户能够更方便地访问页面是一种人性化的设计，这样可将网站开放给更多的人。很大部分的网页亲和力问题都是技术方面的，并且能够通过使用良好的Web标准的HTML和CSS来解决。
　　雇主和客户的期望：即使您不拥护Web标准，也有许多其他人会拥护。使用W3C (X)HTML、CSS以及亲和力标准进行编码的能力已经很快成为了Web设计师的必备技能。如果您在职场上寻求Web设计的工作或者您为客户设计站点，那么Web标准将是一件很有力的武器。
　　浏览器兼容性问题
　　Web标准后面的一个基本原则是浏览器无关性。您不必创建针对特定浏览器的代码—整个理念是，如果浏览器厂商完全支持W3C的Web标准，那么一个页面就能满足所有人。但是我们生活在现实世界中，没有浏览器是完美的。当您考虑所有的技术上错综复杂的细节时（它们的语法以及行为—HTML和CSS中所包含的），会稍微吃惊的发现，对所有的浏览器而言，并不是每条规则都是100%准确的实现。
　　那么这是否意味着在实际场合中Web标准并没有用处呢？不。好消息是所有流行的浏览器都支持绝大部分的Web标准。造成麻烦的只是一些很小的细节问题。稍微“抓挠”一下他们就会被消除。
　　显然目前最流行的浏览器是Windows下的IE。IE在Web标准的社区中几乎被一致的嘲讽，因为它存在大量问题—对许多Web标准缺乏支持或者错误解析许多Web标准规则。
　　更多的现代浏览器，比如Firefox和Safari，是技术上更加优秀的软件（这一点很少有人能真正反对—即使是微软），但是对于Web设计师来说很不幸的是，只有很少的用户不是使用随机预装的浏览器。这就是意味着Windows，意味着IE。
　　不过IE也不完全是个白痴。对于大多数的HTML和CSS的W3C标准它都能很好的支持。并没有什么不可逾越的障碍阻止设计师实现某种特定页面结构或者迫使它为一些布局做出妥协。只是在某些更特定的细节上，不兼容性会令人很泄气。好消息是，微软终于意识到这些问题，并在最新的IE 7.0（现已在Planet Web登录）中做了大量改进。
　　贯穿本书都会在必要之处提及浏览器的不足，但总体上来说绝对没有什么实际理由来放弃Web标准—所有现代浏览器都能相当好的支持它们。
　　我们确实得工作在一个“多浏览器”的世界中，即使是最好的设计师也会遇到页面的浏览器兼容性问题。它们通常易于解决，并且只要您一直在多种浏览器下测试页面以确保设计有效，兼容性问题不应该会令人头痛。
　　浏览器hack
　　Web标准设计需要大量的“hack”这种说法是不正确的。实际情况还有些相反。
　　确实有大量的hack（尤其是面向CSS的）存在，允许您针对不同的浏览器给出不同的代码，但它们通常只不过是对一些东西的非必要的补丁，这些东西一开始就没有正确构建。事实上我们并不需要几乎所有的hack，除了一个简单的—“框”模型hack—为了解决IE 5.x的计算错误（参见第5章）。
　　后向兼容性的危险性
　　中世纪的数据依然存在，现在仍然有人提及Netscape 4。“它是否能运作在Netscape 4上？因为Netscape 4真的很重要。它必须要能兼容Netscape 4”。
　　这是最声名狼藉的“后向兼容性”观点，同时也是一个过度强调后向兼容性的最佳例子。
　　判断您是否需要支持某种浏览器的第一步是它的用户数量，第二步则是为了支持它您所需要额外做的工作量。
　　只有不到1%的用户现在还在使用Netscape 4。但就算要去支持它（毕竟再少也还是有），也是件不划算的事情。
　　一种迷惑众人的说法是“Web设计的巅峰水平就是作品能工作在所有浏览器上”。
　　胡说。
　　是的，Web设计应当能工作于尽量多的浏览器上，但是相应的代价呢？
　　兼容那些陈旧的浏览器，对于使用新版浏览器的用户而言是一种伤害。您为了兼容陈旧浏览器所损失的东西就是前面提到的Web标准的许多实际好处。向灵活性、轻量级页面、亲和力、易用性以及维护简便性告别吧。为了适应古董而缺少优化，您所失去的用户将肯定超过得到的。
　　结构良好的HTML文档的内容应该仍然能够完全被老旧浏览器所访问，那些不支持CSS或者被人为禁止了CSS解析（参见第1章）的浏览器会以默认外观渲染页面。设计效果可能失去了，但是功能不会。
　　亲和力
　　亲和力是关于人们如何能够容易地在任何情形下与某样东西交互。虽然这是一个很广泛的通用领域（与Web相关的东西，包括通过替代设备，比如手机来访问页面），但它倾向于关注残疾人，包括如何让他们能更方便地访问网页上的信息。
　　亲和力方面的考虑点说开去的话，能另外写一整本书了（例如Joe Clark的优秀的Building Accessible Websites或者Web Accessibility: Web Standards and Regulatory Compliance—这里我们会涉及其中一些，因为HTML和CSS是处理大多数亲和力问题的最终工具）。
　　在大多数情况下，很简单的HTML和CSS就能显著地改进亲和力，但这些简单的步骤有很多，尤其是当涉及那些需要交互的页面组件—参见第3章以及第9章。虽然本书并没有探索亲和力话题的方方面面，但实现其中大多数的技术都会提到。
　　本书的读者对象
　　本书面向那些想要掌握最佳的XHTML和CSS实践，以及想要一本可信赖的参考书的读者。
　　虽然Web标准的话题可能更吸引中高级的设计师，但本书全面丰富的内容使它应当同样适合于初学者和专家，本书既可以作为关于如何构建页面组件的指南，也可以作为参考手册来保证语法的正确性。
　　我在书中不仅写下了许多现在对我自己很有用的内容，还写了许多我在初学HTML、CSS以及Web标准的时候觉得有用的东西。
　　如何使用本书
　　本书详尽地遍历了网页上的不同组件（除了第10章稍微有些不同），讲述了如何构造它们和表现它们。一个组件接一个组件，到本书结束时，所有实用的Web标准（XHTML 1.0 Strict和CSS 2.1）工具都会被涵盖。
　　实用Web标准
　　由于现阶段的浏览器兼容性，本书并未包含全部W3C的技术细节，因为即使我们在促进使用Web标准的理念，我们也必须现实一些。只在理论上有用但在大多数浏览器中都无法工作的技术没有实际意义。反而是对纸张以及您的时间的浪费。您可以确信的是本书涵盖了大部分实用的Web标准内容。
　　附录A和附录B涵盖了所有合法的（非表现性的—见下面）HTML（XHTML 1.0 Strict）标签、CSS（2.1）属性以及所有合法的属性和值。当涉及浏览器兼容性问题时会有相关提示。
　　为了好的实践，表现性质的HTML标签比如b和i（它们实际上也是合法的XHTML 1标签）也被遗弃了。我们这里坚持结构和表现的分离并因此而受益。对那些注定将走进历史坟墓的东西，我们不给它们留后路。
　　对那些不符合本书理念但仍然常用的标签的概览包含在附录A中。
　　关于www.htmldog.com
　　本书的内容应该至少能让您的部分脑细胞热热身，此外本书的一部分内容是和HTML Dog网站配套的。贯穿全书您会发现对文章的引用，它们包含了更多深入的技术细节，以及许多框架式的范例。这些范例只保留了最基本的代码来展示HTML和CSS的一小部分，比如标题、表单、背景图片或者竖直对齐。只需查看页面源码即可。
　　有关的内容在书中这么标记：
　　 www.htmldog.com/examples/verticalalign.html
　　全部70多个例子的列表位于www.htmldog.com/examples/
　　章节内容
　　在精心安排的十章内容中您将会找到几乎所有HTML和CSS组件的详细讲解，以及一些比较炫的技巧来让页面熠熠生辉。
　　第1章“起步”讲解HTML和CSS的基本语法：它们是什么样，应该如何使用，以及它们如何关联起来。
　　第2章“文本”涵盖所有用于构造各种文本内容的HTML标签：段落、标题、强调、缩略等等。本章还讲述了于设置字体、字号、斜体以及字间距的CSS。
　　第3章“链接”只讲述一种标签，但它十分重要以至于需要独占一章。从基本链接和页面锚点到让链接更具亲和力以及样式设定的最佳实践。
　　第4章“图像”涵盖如何用img标签来添加内容以及如何用强大的CSS背景图片来实现令人震撼的外观。
　　第5章“布局”讲述如何用CSS实现各种布局。
　　第6章“列表”关于有序列表、无序列表和定义列表，以及如何给它们设定样式以实现像导航栏这样的页面组件。
　　第7章“脚本及对象”讲述如何在HTML页面中引入JavaScript和像Flash影片这样的对象。
　　第8章“表格”涵盖关于构造表状数据（tabular data）所需了解的一切（而不是用表格实现布局），包括如何让表格更具亲和力。还有专门的让表格更加漂亮的CSS技巧。
　　第9章“表单”涵盖如何构造和表现表单以及表单域控件，并讲述了设定表单对象的外观时会受到的限制。
　　第10章“多种媒介”关于网页如何工作于桌面电脑屏幕之外的媒介，以及如何优化页面的CSS（而不必涉及HTML）以使页面更好地被打印。...