您现在的位置:主页 > 网站制作 > HTML/XHTML >

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

来源:新2备用网址hg622.com|首页吧 责任编辑:Jzq8 发表时间:2014-10-09 点击:次
WEB标准-HTML元素嵌套.

先来看以下这样一段代码:

    ???
  • ?

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

HTML4/XHTML的嵌套规则

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

html4

内联元素不能嵌套块元素

元素和元素不能嵌套块元素

那么到底什么是块元素,什么是内联元素

以下是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的做法就是一种错误的做法,因为他在内联元素元素中嵌套了块元素元素

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(段落元素)

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

相关新闻>>

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    匿名?

    推荐图文

    • 网页设计列表标记ul,ol,dl在不同浏览器的兼容问题
    • 论述使用HTML5的利与弊
    • 15 个非常值得收藏的 HTML5 资源
    • 13个应用HTML5 和 CSS3 实现的Web效果
    • 8个你从未见过的HTML5 Canvas和JavaScript的动画
    • HTML常用格式 新2备用网址hg622.com|首页吧HTML第三节
    • 新2备用网址hg622.com|首页吧:HTML 5入门级技巧
    • HTML基本概念 新2备用网址hg622.com|首页吧HTML第一节
    • HTML基础Tag 新2备用网址hg622.com|首页吧HTML第二节
    Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
    Copyright ? 2013 JZQ8.COM. 新2备用网址hg622.com|首页吧|新2备用网址hg622.com|首页去吧 版权所有
    冀ICP备09002514号
    冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款