HTML Structure纵览

| 4 条评论 2008-02-03 15:52:41

我正在阅读《Pro CSS and HTML Design Pattern》一书，下面是对HTML Structure一章的读书笔记。

纵览

这本书中很多概念和通常意义上的不同，下面的图片是我根据这本书HTML Structure部分的内容整理出来的，点击放大：

HTML Structure

dl、dt和dd

从结构上说，定义列表中所有的术语都是同义词，所有的定义都是对这些术语的不同解释（"Structurally, a definition list implies all its terms are synonyms and all its definitions are alternate definitions of its terms")。这句话令我百思不得其解：dt标签所包含的术语怎么会是同义词？书里面继续解释道：HTML规范也指出定义列表也可以有更广泛的应用，比如列出演讲者和他们的演讲主题。如果这个例子没有弄错的话，我想作者使用“同义词（synonym）”的初衷，是想表达dt在逻辑上层面的一致性，而非内容上的一致性。

colgroup和col

老实说，这两个标签我从来没用过，恐怕连听说都是第一次。稍微Google了一下，发现了一篇名为“理解表格二：其他表格相关标签及属性”的文章，详细深入的介绍了这两个标签。作者水平很不错，推荐去他的blog看看。

W3C规范中block-level和inline elements的区别

W3C Recommendation中的7.5.3一节简要介绍了block-level和inline elements的区别：

  • 内容模型（Content model）

    基本上，block-level elements可以包含inline elements和其它的block-level elements，inline elements只包含数据和其它的inline elements。如此区分是为了突出这样的概念，即block elements比inline elements描绘更大的结构。

  • 格式（Formatting）

    默认情况下，block-level elements的格式和inline elements的有所不同。block-level elements通常开启一个新行，而inline elements则不会如此。

  • 方向性（Directionality）

    block-level elements和inline elements在继承方向信息时有所不同。这里的方向指的是文字书写方向，比如中文通常是由左向右，或由上向下。

block elements和内容的关系

block elements用来定义结构，它不能和内容在逻辑上并列；同理，内容必须呈现在block elements中。由于HTML的Docuemnt Type Definition语言的局限，HTML校验器一般无法检测出block elements和内容混杂的情况，因此在编写HTML时需小心。

    
  1. hax 2008-02-09 04:52:59

    关于dl,dd,dt的问题，书里所说的意思就是那样，并非你理解的那样。这本书所指的，是连续的dt是同义词，连续的dd则是几种解释。从html规范的例子中可以看到：

    <DL>

    <DT>Center

    <DT>Centre

    <DD> A point equidistant from all points

    on the surface of a sphere.

    <DD> In some field sports, the player who

    holds the middle position on the field, court,

    or forward line.

    </DL>

    dl的用法确实存在一些模糊处。html5规范做了一些澄清和修改。比如“演讲者和他们的演讲主题”（我猜是你翻译错误，应该是指对话的人和句子），改为用dialog元素了。
  2. Felix 2008-02-13 14:11:11

    @hax：

    1、书中此处的原文是“such as listing speakers and their dialog”，的确应是“对话的人和句子”，受教了！

    2、“连续的dt是同义词，连续的dd则是几种解释”这句话怎解？

    按照我的理解，一个dl可以包含多个并列的dt/dd组合，在每个dt/dd组合中，dt的数量应该只有一个（因为它是term），而解释这个dt的dd数量可以有多个，并且这些dd是对此dt的不同解释。

    比如这样的代码：

    <pre>

    <dl>

    <dt>Mac OS X</dt>

    <dd>一种操作系统。</dd>

    <dd>一个系统软件。</dd>

    <dd>最新版本是10.5，代号Leopard。</dd>

    </dl>

    </pre>

    上述例子在《无懈可击的web设计》中也有（第四章）。

    但是，在一个dl中，每个dt在逻辑上都是并列的，它们并不是对这个dl所要指代内容的同义解释。比如我现在要介绍CakePHP这个框架，用如下的html代码：

    <pre>

    <h3>CakePHP功能一览</h3>

    <dl>

    <dt>Scaffold</dt>

    <dd>支架，快速搭建可运行的最简系统。</dd>

    <dt>Route</dt>

    <dd>路径管理。</dd>

    <dt>ActiveRecord</dt>

    <dd>封装好的DB操作。</dd>

    </dl>

    </pre>

    此时Scaffold、Route和ActiveRecord都只是逻辑上并列的项目，但它们并非是同义词。

    hax你觉得这样的理解有什么问题？
  3. hax 2008-02-13 15:34:36

    你的理解基本没有问题，只是dt也可以并列多个的，比如我举的html4中的例子。html5中给出的例子是这样的：

    <dl>

    <dt lang="en-US"> <dfn>color</dfn> </dt>

    <dt lang="en-GB"> <dfn>colour</dfn> </dt>

    <dd> A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view. </dd>

    </dl>

    dl存在的混乱源于html4规范没有清楚的阐明其用法，也因为其结构上的松散。因为html是希望创作者写起来方便的，所以许多element不需要写结束tag，例如li、td、p之类的。而作用到dl上，则是省掉了一层。因为明显，dt和dd是成对的，每个pair也是一个层次。在xhtml2中我们看到了这被省掉的一层。xhtml2给dl加了一个di元素（def-list item），说明文字是：The term and its definition can be grouped within a di element to help clarify the relationship between a term and its definition(s).

    注意，一个term并不表示只能有一个dt元素。一个term的不同写法，不同用词（同义词）或表示法，可以用几个dt元素。

    就你给的句子（structally...）来说，要知道作者准确的意思，最好是看看上下文，但是就这个句子来说，以我拙劣的英文水准来看，也觉得作者肯定不是在说你说的那个意思（虽然你说的意思是很有道理的），所以我说作者就是在说一个（省略的）di内的情况。

    注意，判断作者的意思，并不妨碍你与他做出不同的结论。

    另，有鉴于dl的混乱，html5规范对dl做了调整，现在dl被作为name-value groups，应用范畴大大增加了。举个例子：

    <dl>

    <dt> Last modified time </dt>

    <dd> 2004-12-23T23:33Z </dd>

    <dt> Recommended update interval </dt>

    <dd> 60s </dd>

    <dt> Authors </dt>

    <dt> Editors </dt>

    <dd> Robert Rothman </dd>

    <dd> Daniel Jackson </dd>

    </dl>

    在这个例子中，可以注意到：

    1. 这不是一个严格意义上的定义列表，而是metadata列表。

    2. 这个dl有3个group，最后一个group有两个metadata label和两个value。

    3. 两个metadata label甚至不是同义词。

    当然，html5仍然是草案。dl用途会不会最后做这样的扩大化还未可知。
  4. Felix 2008-02-14 11:19:00

    @hax：

    1、两个dt代表什么？在metadata的例子中，authors、editors连同下面的两个dd是否有对应关系，比如authors指的是Robert，Editors指的是Daniel。

    此外，如果用2个dt的话，这两个dt又是什么关系呢？dt和dl的数量是否一定是对应的？

    2、在我画的图中，mutil-purpose elements只能单独包含block elements或内容，而不能两者同时包含。但好像平时大家都是混用的。比如td，如下的代码就是既包含了block element又包含了内容：

    <pre>

    <table>

    <tr>

    <td>

    这里是内容

    <div>这个div是block element吧？</div>

    </td>

    </tr>

    </table>

    </pre>

有什么要说的，尽管来

关于

丁宇（Felix Ding），电脑Geek，狂热的爱书和爱乐分子。现就职于上海的一家设计工作室。

我的Email:

订阅到RSS