2.7 结构化块状元素


2.7 结构化块状元素


HTML模式





<!-- 有序列表 -->
<ol>
<li>                   </li>
<li> 一个或多个列表项…… </li>
</ol>
<!-- 无序列表 -->
<ul>
<li>                   </li>
<li> 一个或多个列表项…… </li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>                    </dt>
<dt> 一个或多个定义词汇…… </dt>
<dd>                    </dd>
<dd> 一个或多个定义……    </dd>
</dl>
<!-- 表格 -->
<table>
<caption> 每个表格都有一个可选的标题 </caption>
<colgroup> <col /> <col /> </colgroup>
<thead>
<tr>
<th> 在一行有一个或多个标题单元格…… </th>
<td> 在一行有一个或多个数据单元格…… </td>
</tr>
</thead>
<tfoot>
<tr>
<th> 可以合并一行或多行…… </th>
<td>                     </td>
</tr>
</tfoot>
<tbody>
<tr>
<th> 在一个表格中可以有零个或多个行组…… </th>
<td>                                </td>
</tr>
</tbody>
</table>
<!-- 块状区域 -->
<div> <div> <div> ... </div> </div> </div>

结构化块状元素
















问题


需要把文档结构化,这样浏览器才能解析出一个更好的文档视图,搜索引擎才能识别出重要的关键词,文档处理工具才能应用某些技术(比如XSLT)来提取内容和转换结构,JavaScript才能通过遍历结构去修改内容和增添文档交互。


解决方案


用块状元素来构造文档,有助于识别它的结构。在结构中是有一定的含义的,HTML标记是含义最明确的,特别是当它的结构反映了文档中主题的层次结构与关系的时候。


因为父元素包含子元素,所以它们是结构相关的。这表示它们的内容也是相关的。举个例子,子元素的内容通常都是其父元素主题的子话题,而且它的兄弟元素也应该有相关的子话题。暗藏在HTML的层次结构特性中的是对文档组织层次化的假设。


结构化块状元素或许仅包含块状元素。它们拥有结构化的含义,但是它们却没有什么语义上的内涵。换句话说,它们没有告诉你那些是什么,只让你知道了它是如何组织的。


4种主要的结构化块状元素(<ol><ul><dl><table>)和9个支持结构化的元素(<li><dt><dd><caption><thead><tfoot><tbody><colgroup><col>)。


细节


<ol>创建了一个有序列表,其中包含一个或多个列表项(<li>)。这些列表项属于同一组,并有先后顺序。有序代表它们是有顺序的或者是存在等级差异的。


<ul>创建了一个无序列表,其中包含一个或多个列表项(<li>)。列表项属于同一组,但没有顺序或者无等级差异。


<dl>创建了一个定义列表,其中包含一个或多个词汇(<dt>)和定义(<dd>)。从结构上来说,定义列表暗示它的所有词汇都是同义词,并且所有定义都可以作为词汇的替代定义。HTML规范中也提到,定义列表的应用范围很广泛,例如:列出演讲者和它们的对话。而从分类的角度来看,定义列表是一组关联实体,它把某些键和值联系在了一起。


<table>创建了一个表格数据结构,其中含有行(<tr>)和单元格(<th><td>)。它也可以创建行组:表格的标题行(<thead>)、表尾(<tfoot>)和一个或多个表格的主体群(<tbody>)。它也能创建一个或多个列组(<colgroup>),可包含一列或多列(<col>)。列组和列是唯一具有关联(而非层次)的结构化块状元素。换句话说,每个<col>元素都与某一列中的单元格形成一种关系,而不用父元素的帮忙。表格可选择性地添加一个<caption>


<div>是一种多目标块状元素。它可以是结构化的或终端的。我在这里提到它是因为通常用它来为文档进行划分。文档分区document divison)对于把文档划分成一个个小的区域非常关键,而这些区域是搭建页面的必要元素。这也就是我要在“HTML结构设计模式”中把<div>作为所有结构化元素之父的原因。


相关


HTML结构、终端块状元素、多目标块状元素。




标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2