多目标块状元素的一些说明

 

最近总是在HTML书里看到多目标块状元素的相关题目，这个词还真有点不好接受。要搞清楚什么是多目标块状元素，得从块级元素的分类说起。

块级元素可以分为以下几类：块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。

一.结构化块状元素

这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术（如JavaScript）都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。

主要的结构化块状元素

• <ol>
• <ul>
• <dl>
• <table>

支持结构化的元素

• <li>
• <dt>
• <dd>
• <caption>
• <thead>
• <tbody>
• <tfoot>
• <colgroup>
• <col>

二.终端块状元素

这类元素用于从结构转向内容，它们拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。

终端块状元素

• <h1>...<h6>
• <p>
• <blockquote>
• <dt>
• <address>
• <caption>

三.多目标块状元素

所谓多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

多目标块状元素既可以包含块状元素，也可以包含内容（文本与行级元素的组合为内容），但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素，受HTML校验器的限制，目前还没办法检验出此种情况，但是应该避免。

多目标块状元素

• <div>
• <li>
• <dd>
• <td>
• <form>
• <noscript>

从这里可要看到，HTML提供了7种元素——<div>、<li>、<dd>、<td>、<th>、<form>和<noscript>——来扩展或终止结构。所以，我把它们叫做多目标块状元素，因为它们是最多才多艺的元素。可以用它们来确定文档分区、列表项、词典释义、表格数据单元格、表格头部单元格、表单和当脚本无法运行时的可替换内容。

当多目标块状元素以结构化的方式使用时，它就拥有结构化的内涵。当以终端的方式使用它，它就拥有语义化的内涵。例如，当一个列表项作为终端的时候，其中的内容就成为某个列表中的一项。当列表项包含了一个结构化块状元素（例如表格或另一个列表）时，它从结构上就作为一个大的嵌套结构中的小节点起作用。

多目标块状元素既可以包含块状元素也可以包含内容，但是不能同时包含两种。文本与内联元素（图片、对象、控制元素和语义化的标记）的组合才构成了内容。块状元素不应该作为内联元素和文本的兄弟元素。我们把它称之为混合内容（mixed content）。应当把内容放在块状元素中——而不是放在它们之间。因为HTML文档类型定义语言中的限制，HTML校验器时常不能检测出拥有混合内容的文档，但是这不意味着就可以让此种情况出现。当浏览器遇到混合内容的时候，它会给内容套上一个匿名容器。这是因为当块状元素是按顺序排列的，而其中又穿插内容的时候，浏览器不能同时解析块状元素和内容。CSS选择符不能选择匿名块状元素，它会阻止你对其赋予样式。在使用这七类多目标块状元素的时候可以考虑经下细节：

<div>是一个分区。它通常是结构化的，但是它也能含有内容。如例子中所示，由分区创建的块状结构是不可见的，除非为每个分区赋予外边距、边框和/或内边距。

<li>是一个列表项。一般来说，它是一个包含内容的终端块状元素，不过它也能包含结构化块状元素（比如表格和列表）或终端块状元素（比如标题和段落）。

<dd>是定义列表中的一个定义。通常它是作为一个可包含内容的终端块状元素，但是它也可以含有结构化或终端的块状元素。

<td>和<th>是表格单元格。<td>是数据单元格，<th>是标题单元格。通常单元格是包含内容的终端块状元素，但是它们也可以包含结构化或终端的块状元素。

<form>是输入数据的表单。它可以含有结构化的块状元素，用于组织表单控制元素（如例中所示），或者直接包含内联表单控制元素（如“HTML结构”的那个例子所示）。它也能够包含终端元素（例如标题和段落）。

当浏览器不支持脚本的时候，就会显示<noscript>。它可以包含简单的内联内容或者拥有完整结构的文档。

这样，对多目标块状元素及其它的块级元素的认识就深入多了！