返回列表 回复 发帖
水月あ无痕

DST Member

Rank: 15Rank: 15Rank: 15

UID
5359 
精华
1 
声望
173 点 
金币
134 枚 
卓越
2 值 
注册时间
2007-7-28 
最后登录
2008-11-30 
1#
打印
tT
发表于 2008-8-19 14:24 | 只看该作者

    HTML的领悟(HTML Mastery)[第一章第3节]--XHTML页面剖析

    最后，让我们来看下一个严格的XHTML1.0页面是如何书写的：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <title>Our title</title>
    6. </head>
    7. <body>
    8. <p>Our content</p>
    9. </body>
    10. </html>
    复制代码
    让我们现在开始逐行解说。
    文档类型声明
    首先，我们来看看文档类型声明。一个文档类型声明（doctype declaration）是提供一个你即将要书写的页面的文本类型定义（DTD，Document Type Definition）的指示。一个DTD是页面结构基本的规则以及语法。它看上去有点使人畏缩，但是让我们把它分解，然后依次解说每个部分。文本类型以这样开头：

    <!DOCTYPE

    这里没有什么要多说的；这仅仅是说明一个文档类型如何开头。页面的根元素会紧接文档类型声明——<html>元素——需要在文档开头后马上说明：

    <!DOCTYPE html

    注意，我们能够使用html或者是HTML，这个是通过（X）HTML的版本以及怎样书写使用它来决定的。在所有的XHTML文档类型中，根元素都应该使用小写。但是对HTML的文本类型的根元素来说，如果你的其他标签是大写的话，也是可以大写的。

    紧接着，我们有一个PUBLIC单词：

    <!DOCTYPE html PUBLIC

    这标志着我们使用的DTD是公共认可的。如果DTD是私有的，那我们用SYSTEM来代替，就像在“a system resource,”一样，可能是你使用网络某处的地方资源）

    然后我们有正式的公众标识符（FPI，Formal Public Identifier），它描述了DTD以及DTD背后的团体。FPI被引号引用，并且使用双斜线表示分隔：

    "-//W3C//DTD XHTML 1.0 Strict//EN"

    这四个部分代表下面的意思：


    • 开头——表示DTD的拥有者这不是一个在国际标准化团体（ISO，the International Organization for Standardization）注册的组织；W3C确实不是。如果这个拥有者是在ISO注册的组织，你得使用+来代替-。
    • W3C指出这个DTD的拥有者是W3C。
    • DTD XHTML 1.0 Strict是一个描述（XHTML 1.0 Strict）紧跟着类型或者种类（DTD），它被划分为更深层的两部分：一个类型（XHTML）以及一个文档版本定义（1.0 Strict）。种类和描述分别在公共文本种类（PTC，Public Text Class）以及公共文本描述（PTD，Public Text Description）中可以找到。
    • DTD的语言是EN，是英文的双特征语言码（the two-character language code for English）

    最后，我们有指向DTD的URL。这个链接像FPI一样，都是要用双引号引用的：

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    这就是一个文档类型的剖析了。
    可用的文档类型
    这里有3种可用的XHTML1.0文档类型，加上一种XHTML1.1文档类型。XHTML1.0的文档类型有Strict，Transitional，以及Frameset（仅仅在你使用框架来输出页面的时候使用），它们的不同仅仅在FPI以及URL上：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    8. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    复制代码
    XHTML1.1的文档类型的不同也仅仅在FPI和URL上，它相比于Strict和Transitional版本来说只有一处变量不同：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    复制代码
    这里也有一种针对XHTML Basic的文档类型，一种被剥离的XHTML版本（通常是在理论的时候使用），曾经使用来作为移动版本（如手机）网页设计开发。
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
    2. "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
    复制代码
    文档类型的目的

    文档类型在（X）HTML中有两个重要目的。首先，它们通知用户代理以及验证系统书写文档的DTD是什么。这个动作是被动的——也就是说，你的浏览器并不会在每次页面加载时下载你的DTD来验证你的架构的可用性；它只有在你手动验证的时候才会生效。

    第二点，也是实际的，最重要的目的是文档类型会通知浏览器用标准模式（standards mode）而不是特殊模式（quirks mode）传输页面。这被认为是文档类型选择（doctype switching），它包括了浏览器决定传输文档类型的方式，假想如果一个作者已经包含了一个文档类型，这个作者知道他或者她在干什么，然后浏览器会用严格的方式解释这个严格的架构（也就是标准模式）。缺少文本类型会触发特殊模式，一种用老的、错误的方式传输架构。假想如果一个作者没有包含一个文档类型，那么他或者她可能没有按照标准架构来书写，因此，这个架构会被认为是针对过去的错误百出的浏览器书写的。

    <html>，<head>，和 <body>元素

    接着文档类型的是一个带有xmlns属性的<html>开始标签，这个属性被用来声明XML Namespace，一种被用来形容架构使用的语言类型的东西。这个含义的例子在http://www.w3.org/1999/xhtml。它应该在所有的XHTML页面中被声明。
    注意，<html>可能像其他元素一样在你的CSS中被定义了样式；然而，这个可能会在某些时候产生一些不可预知的情况。例如，当你赋予<html>以及<body>元素一个背景图时，可能会遇到问题，因为IE把浏览器的滚动条也作为网页的一部分（允许CSS定义的滚动条），然后你可能会发现背景图或者颜色侵染了滚动条的下部以及出现在了反方向。此外，定义了<html>元素会使浏览器对<body>元素产生错误的对待——作为一个<div>而不是<body>。
    在开放的<html>之后，我们有文档的<head>部分，它包含了<title>，也包含了<style>, <script>, <meta>,以及<link>元素。<title>是唯一一个在<head>中必须的元素，而且它会显示在浏览器的题目栏上。页面标题是页面中经常被忽略的部分；以前你一定看过“无标题文档”为标题的页面。这是不幸的，同样应当给与适当的关心和关注，页面标题会提供给你和你的用户很多的好处：对你来说有更好的搜索引擎排名，对你的用户来说拥有更好的可用性。
    举个例子，试着打开几个无标题文档的窗口，在最小化它们之后在它们之间选择——你能够知道哪个是哪个吗？同样的问题也出现在公司或者网站页面在实际页面标题前面的时候。
    接着闭合<head>标签的是<body>开始标签，能够包含任何非头部架构的元素：像段落、列表、图片等等。<body>标签拥有几个效果属性：background、text、link、vlink和alink，分别用来定义页面的背景颜色、文字颜色、链接颜色、已访问链接颜色、活动链接颜色。所有的这些属性都是不建议使用的，它们的效果可以用CSS来代替。background-color、color、a:link、a:visited以及a:active还有伪属性都是恰当的。

    紧接着闭合<body>标签的是闭合<html>标签，这就是XHTML页面的全部。

    XML声明

    在我继续前，任何单纯阅读这节的人都已经注意到了我去掉了像这样的一行语句：

    <?xml version="1.0" encoding="utf-8"?>

    如果使用，这行应该直接出现在文档声明的前面。它被叫做XML声明（XML declaration）[ XML声明和文档类型共同被叫做XML序文（XML prolog）]，它的作用是声明这个文档是XML文档，XML的版本以及这个文档的编码类型。尽管W3C推荐包含这个声明（虽然它是可选的），但是这样做会导致不好的影响，最坏的一个是IE会转为特殊模式——在文档类型之前除了空白任何的东西都会导致这种错误。因此，最好去掉这行。

    HTML页面剖析

    现在我们来看看相同的模板，但是是用HTML 4.01 Strict代替XHTML 1.0 Strict书写的：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <title>Our title</title>
    4. <p>Our content</p>
    复制代码
    这并非印刷错误，前面所看到的代码是你在HTML页面所需要的所有东西。<html>、<head>、<body>并不需要明确的写出，但是你仍然要像它们在那一样书写你的架构——因为它们确实在那。你可以在一个JavaScript DOM inspector里看到这样的文档，或者在CSS定义<body>元素，你仍旧能够看到它就在那儿，即使你并没写进里面。所以，你必须确保像<meta>、<link>标签一样的头部架构元素在你的<body>架构之前。因而，像下面的架构是可用的，因为head和body区域能够通过内容推断出来：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <title>Our title</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. <p>Our content</p>
    复制代码
    但是下面的架构是不可用的，因为<meta>元素被放置在了<p>已经指出的head区域结束而body区域开始的位置：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <title>Our title</title>
    4. <p>Our content</p>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    复制代码
    概要

    希望，这章帮助你获取了描述架构的术语以及（X）HTML的一般架构，并且消除了你可能有的一些误解。它也为你细化了一个基础的（X）HTML基础页面，所以，你现在能够辨别有效的部分，知道这些并不足以掌握整个语言，但是它将会帮助你。

    译者注：翻译第一章耗费了不少时间，特别是在MIME前后的部分。总的说来，第一次的翻译还是让我比较满意的。
    最后正如原作者希望的那样，希望能够通过这一章全面的系统的了解到整个（X）HTML的基础知识，帮助大家打下坚实的基础。
    本主题由 水月あ无痕 于 2008-8-19 14:25 设置高亮
    收藏 分享 评分
    『导师』师者，所以传道，授业，解惑也。
    回复 引用

    订阅 TOP

    返回列表