• 小米之家南京旗舰店今日正式开业 2019-04-16
  • 《世界杯相对论》:谁能站本届世界杯的C位? 2019-04-16
  • Vitamix中国官网 全食物全营养破壁料理机官方网站 2019-04-06
  • 毕业租房季开启,仅部分租金上涨 2019-04-05
  • 深圳晚报总编辑丁时照祝贺人民日报创刊70周年 2019-04-02
  • 美国已经获得了,美国期望的金融开放,其他的美国已经不在乎了。本人早就断定,中美合作奢谈共赢。美国需要的是进入和控制中国,中国需要的是出口创汇。 2019-04-01
  • 《共产党宣言》中译史话 2019-04-01
  • 三只树懒漂洋过海亮相杭州 看着都困 2019-03-30
  • Povo é criador da história e verdadeiro herói, diz Xi 2019-03-28
  • 流口水!重庆百家宴香气四溢 三千多人齐聚庆新年 2019-03-28
  • 发现食品安全问题拨打12331投诉 2019-03-22
  • 市场能调节供需平衡吗? 2019-03-22
  • 中纪委:从公款招待私客等入手 露头就打 2019-03-12
  • 本论坛上有位网名为“第十阶层1”的网友,你可问问他“阶层”与“阶级”有什么区别!呵呵! 2019-03-11
  • 侵华日军513部队首被发现 日本老兵:主做细菌研究 2019-03-11
  • 首页 > 网页教程 > HTML > HTML5的元素嵌套规则

    陕西快乐20选8走势图:HTML5的元素嵌套规则

    时间:2013-08-10    来源:smallni

    快乐十分推荐直选号码 www.fenos.net 先来看以下这样一段代码:

    <ul>
       <li><h4><a href=""><div></div></a></h4></li>
     </ul>

    当然,我是不会告诉你这段代码来自于FACEBOOK的 ,各位认为以上元素的嵌套有没有问题呢?我们会在后面讨论这个。

    HTML4/XHTML的嵌套规则

    在我们的印象中会有这样的嵌套规则:

    html4

     

    内联元素不能嵌套块元素<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规范中对元素的分类方式:

    w3c html5 content

    如上图,元素的分类不再是块元素或内联元素这样来分类(其实从来就没有这样分),而是按照如下分类来分: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,textarea, time, u, ul, var, video, wbr, text

    Heading(标题元素)

    标题式元素定义一个区块/章节(section)(无论是明确的使用章节式内容的元素标记,或者标题式内容自身所隐含的)的标题。

    h1, h2, h3, h4, h5, h6, hgroup

    Sectioning(章节元素)

    章节式元素是用于定义标题及页脚范围的元素。

    article, aside, nav, section

    Phrasing(段落元素)

    段落式元素是文档中的文本、标记段落级文本的元素。

    a(如果其只包含段落式元素), abbr, area(如果它是map元素的后裔), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del(如果其只包含段落式元素), dfn, em, embed, i,iframe, img, input, ins(如果其只包含段落式元素), kbd, keygen, label, map(如果其只包含段落式元素), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script,select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text

    Embedded(嵌入元素)

    嵌入式元素是引用或插入到文档中其他资源的元素。

    audio, canvas, embed, iframe, img, math, object, svg, video

    Interactive(交互元素)

    交互式元素是专门用于与用户交互的元素。

    a, audio(如果设置了controls属性), button, details, embed, iframe, img(如果设置了usemap属性), input(如果type属性不为hidden状态), keygen, label, menu(如果type属性为toolbar状态),object(如果设置了usemap属性), select, textarea, video(如果设置了controls属性)

    Metadata(元数据元素)

    元数据元素是可以被用于说明其他内容的表现或行为,或者在当前文档和其他文档之间建立联系的元素

    base,command,link,meta,noscript,script,style,title

    各分类会有交叉或重叠的现象,这说明在html5中,元素可能属于上述所有分类中的一个或多个。

    例子(1):<h1>~<h6>元素:

    • Categories:
      • Flow content.
      • Heading content.
      • Palpable content.
    • Contexts in which this element can be used:
      • As a child of an hgroup element.
      • Where flow content is expected.
    • Content model:
      • Phrasing content.

    其中的「Categories」说明该元素的类别,「Contexts in which this element can be used」说明该元素能在何种场景下被使用,也就是它的父元素是什么,「Content model」说明该元素可以包含的内容是什么,由于页面中的元素是层层嵌套的,一个元素有可能既是父元素同时也是子元素的角色,所以下面我们以「Content model」也就是可包含的子元素做讨论。

    那么对于h1~h6元素:

    • 它们同时属于Flow content 、Heading content Palpable content三个分类
    • 它们的父元素可以是<hgroup>,同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素
    • 它们允许的子元素是段落式元素

    例子(2):<div>元素

    • Categories:
      • Flow content.
      • Palpable content.
    • Contexts in which this element can be used:
      • Where phrasing content is expected.
    • Content model:
      • Flow content.

    对于<div>元素:

    • 同时属于Flow content 、 Palpable content分类
    • 父元素必须是那些子元素为段落式元素的元素
    • 允许的子元素是流式元素

    <div>元素允许的子元素是流式元素,流式元素基本涵括了页面中的大部分元素,所以我们在用<div>时可以不用担心嵌套错误的问题。

    但对于<h1>~<h6>元素,它们允许的子元素为段落式元素,而段落式元素并不包含诸如<div>、<p>、<ul><ol>之类的元素,这就说明按照html5的规范,是不允许在标题元素内部嵌入<div>、<p>、<ul><ol>之类的元素。

    例子(3):<a>元素

    • Categories:
      • Flow content.
      • Phrasing content.
      • Interactive content.
      • Palpable content.
    • Contexts in which this element can be used:
      • Where phrasing content is expected.
    • Content model:
      • Transparent, but there must be no interactive content descendant.

    对于<a>元素:

    • 同时属于Flow content 、 Phrasing content、Interactive content、Palpable content分类
    • 父元素必须是那些子元素为段落式元素的元素
    • 允许的子元素是以它的父元素允许的子元素为准,但不能包含交互式元素

    这样看<a>元素还是挺有意思的,允许的子元素要看它的父元素所能包含的子元素。

    再来看文章开头中提到的代码

     <ul>
       <li><h4><a href=""><div></div></a></h4></li>
     </ul>

    这时<a>的父元素为<h4>,对于<h1>~<h6>的标题元素上面已经提过,允许的子元素是段落式元素,那么此时对于<a>允许的子元素即为段落式元素,而段落式元素中是不包含<div>元素的,所以FCAEBOOK这样的嵌套方法是错误的!

    让我们来把代码做一下修改:

    <ul>
       <li><div><a href=""><div></div></a></div></li>
     </ul>

    这时<a>的父元素为<div>,而<div>元素允许的子元素是流式元素,流式元素中包含<div>元素,所以这样的情形下在<a>里面嵌套<div>就是正确的做法!

    相关推荐
    HTML5大纲算法对结构的影响 网页优化必学
    如何在IE6等老式浏览器中使用HTML5的新标签?
    HTML5语义标签兼容IE6等老旧浏览器的方法分析
    使用JS代码的方法让IE6轻松支持HTML5标签元素
    HTML5建站教程:HTML5新标签与HTML4旧标签对应解释及用法
    让所有的浏览器都能识别HTML5标签样式的小插件分享
    网页设计师必收藏的十五个HTML5资源
    新手入门:HTML5是什么?
    35个WEB开发必备的实用HTML5教程
    18个国外HTML5网站布局编码教程分享
    网页使用HTML5代码需兼容IE的写法分享
    HTML5新手入门教程之第一篇:什么是HTML5?
    从9个不同的方面深入分析HTML5的性能
    HTML5带给开发人员跨平台的开发体验
    经历8年时间 属于HTML 5的春天才悄然到来
    HTML5制作神器:零代码制作属于你的第一个酷炫H5页面
    能让IE支持HTML5的解决方案
    谷歌弃Gears浏览器插件 转重点开发HTML5
    采用HTML5搭建的多个网站尝鲜试用
    体验HTML5 Canvas对象的强大 五款在线绘图应用示例
    HTML5新特性:用链接预取功能给网站提速
    如何用HTML5制作网页?
    神奇的HTML5动画效果演示网站
    十三个网站案例让你提前体验HTML5和CSS3的魅力
    基于HTML5的绘图程序Muro,支持Wacom手写绘图板
    HTML5的一些的趣味小应用
    HTML5、CSS和JavaScript与Web移动应用的未来趋势
    十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
    学好HTML5必备的七个在线资源推荐
    HTML5教程之表单功能详解
    四个HTML 5标签、属性、事件及浏览器兼容性速查表分享
    15个采用HTML5实现的网站界面设计欣赏

    精彩推荐

    热门教程

  • 小米之家南京旗舰店今日正式开业 2019-04-16
  • 《世界杯相对论》:谁能站本届世界杯的C位? 2019-04-16
  • Vitamix中国官网 全食物全营养破壁料理机官方网站 2019-04-06
  • 毕业租房季开启,仅部分租金上涨 2019-04-05
  • 深圳晚报总编辑丁时照祝贺人民日报创刊70周年 2019-04-02
  • 美国已经获得了,美国期望的金融开放,其他的美国已经不在乎了。本人早就断定,中美合作奢谈共赢。美国需要的是进入和控制中国,中国需要的是出口创汇。 2019-04-01
  • 《共产党宣言》中译史话 2019-04-01
  • 三只树懒漂洋过海亮相杭州 看着都困 2019-03-30
  • Povo é criador da história e verdadeiro herói, diz Xi 2019-03-28
  • 流口水!重庆百家宴香气四溢 三千多人齐聚庆新年 2019-03-28
  • 发现食品安全问题拨打12331投诉 2019-03-22
  • 市场能调节供需平衡吗? 2019-03-22
  • 中纪委:从公款招待私客等入手 露头就打 2019-03-12
  • 本论坛上有位网名为“第十阶层1”的网友,你可问问他“阶层”与“阶级”有什么区别!呵呵! 2019-03-11
  • 侵华日军513部队首被发现 日本老兵:主做细菌研究 2019-03-11