HTML教程XHTML教程HTML标记嵌套使用技巧.docxVIP

先来看以下这样一段代码：ul???lih4a href=div/div/a/h4/li?/ul当然，我是不会告诉你这段代码来自于FACEBOOK的，各位认为以上元素的嵌套有没有问题呢？我们会在后面讨论这个。HTML4/XHTML的嵌套规则在我们的印象中会有这样的嵌套规则：内联元素不能嵌套块元素p元素和h1~6元素不能嵌套块元素那么到底什么是块元素，什么是内联元素？以下是W3C?CSS2.1规范中对块元素和内联元素的定义：Block-level elements?are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’??property make an element block-level: ‘block’, ‘list-item’, and ‘table’.Inline-level elements?are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the?‘display’?property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate?inline-level boxes, which are boxes that participate in an inline formatting context.我们可以这样理解：块元素一般都从新行开始，内联元素在一行内显示，我们也可以通过CSS属性display的’inline’ 或 ‘ block’ 来改变元素为内联元素或块元素，当然这是CSS中对元素的分类，显然用 ‘display’ 的属性值来对html元素进行分类是不严谨的。如果按照上述规则来讲，那么FACEBOOK的做法就是一种错误的做法，因为他在内联元素a元素中嵌套了块元素元素div，但是细心的读者应该会发现上述规则是基于HTML4/xHTML1的strict模式，而FACEBOOK现在已经统一使用了html5的doctype，那么这个规则到底还是是否适用？HTML5的元素嵌套规则元素的嵌套规则和页面头部申明的DTD有着千丝万缕的关系，DTD基础请查看我之前写的文章《DTD详解》，那么在最新的HTML5规范中是否对元素嵌套有着新的规范呢？让我们先了解下W3C在最新的HTML5规范中对元素的分类方式：如上图，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。Flow（流式元素）在应用程序和文档的主体部分中使用的大部分元素都被分类为流式元素。a，?abbr，?address，?area（如果它是map元素的后裔），?article，?aside，?audio，?b，?bdi，?bdo，?blockquote，?br，?button，?canvas，?cite，?code，?command，?datalist，?del，?details，?dfn，?div，?dl，em，?embed，?fieldset，?figure，?footer，?form，?h1，?h2，?h3，?h4，?h5，?h6，?header，?hgroup，?hr，?i，?iframe，?img，?input，?ins，?kbd，?keygen，?label，?map，?mark，?math，?menu，?meter，nav，?noscript，?object，?ol，?output，?p，?pre，?progress，?q，?ruby，?s，?samp，?script，?section，?select，?small，?span，?strong，?style（如果该元素设置了scoped属性），?sub，?sup，?svg，?table，textare