2.9 多目标块状元素


2.9 多目标块状元素





HTML



<noscript>当脚本不能运行的时候显示此文本。</noscript>
<div>
<div>
<h1>多目标块状元素</h1>
</div>
</div>
<!-- 下面的代码是不符合规范的HTML,并且破坏了结构 -->
<ol>
这句话包含在列表中,但是没有在它应当在的列表项中。
<li> 这句话被正确地放在一个列表项中。</li>
这句话在列表外,是不符合规范的,并且破坏了列表的结构。
</ol>
<!-- 下面的代码是规范的HTML,因为符合
HTML的DTD,但是仍然破坏了文档的结构。 -->
<div>
把这部分放在div中的内容与前面列表相比。
<div> 这句话放在了一个嵌套的div中。</div>
这种 <em>混合内容</em> 不是不规范的,但是它
破坏了文档结构,需要浏览器创建一个<em>匿名块状元素</em>来解析它。
</div>
<!-- 下面的表格包含了块状元素,块状元素中又包含了控制元素。 -->
<form id="form1" method="post" action="http://www.tipjar.com/cgi-bin/test" >
<ul>
<li> <input type="checkbox" id="xbox1" name="xbox1" value="xbox1" />
<label for="xbox1">复选框1</label></li>
<li> <input type="submit" id="submit1" name="submit1" value="提交" /> </li>
</ul>
</form>



多目标块状元素
















问题


需要通过在结构中嵌套结构或终止当前结构来自由地扩展文档的结构。


解决方案


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


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


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


细节


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


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


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


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


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


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


相关


HTML结构、结构化块状元素、终端块状元素。




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