Html/CSS属性顺序和规则

HTML标签嵌套规则

开始与结束标签嵌套

  1. 元素开始与结束标签嵌套错误,页面可以在大部分浏览器被正常解析,IE9会出现解析错误。
  2. 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误。
  3. 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常。
  4. 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误。
  5. 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误。

严格嵌套约束、语义嵌套约束

通过示例发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误,这其实是W3C规范的严格嵌套约束,严格嵌套约束要求必须去遵守,不然就会导致所有浏览器的解析错误。

严格嵌套约束规则

(1)a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)。
(2)<p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

语义嵌套约束规则

每个元素基本都有自己的嵌套规则(即父元素可以是什么,子元素可以是什么),除了严格嵌套约束之外的一些规则就是语义嵌套约束,对于语义嵌套约束,如果不遵守,页面可能正常,但也可能解析错误,尽量要遵守,不过也要遵循最佳实践,比如导航菜单经常就会有<ul>元素作为<li>的子元素。

<section>与<article>都是为更为精确语义化布局而生,两者相同之处。

自然也有不同点,否则创建两个标签就多此一举了,下面详细做一下介绍。

一、两者关系阐述
(1)article:翻译成汉语具有”文章”的意思。
(2)section:翻译成汉语局域”章”或者”节”的意思。

如果说<article>标签是一篇文章的话,那么<section>标签就是其中的一个段落或者一个小章节。
当然不能因此说,<article>与<section>两者是从属关系,它们两个是可以相互嵌套的。

两个标签的异同点简单总结:
(1)<article>是一种特殊的<section>,用<article>都可以用<section>。

(2)<article>强调整体性与独立性,语义更加明确。

(3)<section>强调的是对整体内容进行划分区域,独立性和语义明确性比<article>差。

两标签都是为页面布局语义化更强,在表现上并没有任何特殊之处,和一个普通div相同。

二、 代码实例
下面通过一段代码片段对两者的区别进行一下分析。

<article>
<header>
<h1>Html/CSS属性顺序和规则</h1>
<p>发布时间:<time datetime="2020-5-14">2020/05/14</time></p>
</header>
<p>管子曰:“仓禀实而知礼仪,衣食足而知荣辱。”</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>小王子</h3>
<p><time datetime="2020-5-14">一分钟前</time></p>
</header>
<p>百姓的粮仓充足,丰衣足食,才能顾及到礼仪,重视荣誉和耻辱。</p>
</article>
</section>
</article>

关于上述代码两个标签的应用:

总体上是一篇文章,很明显具有很好的独立性,所以最外层用<article>包裹比较恰当。
文章的评论属于文章的一个一部分或者一个功能分区,所以使用<section>包裹。
文章评论的单独一条可以看做一个独立的整体,所以使用<article>更为恰当。



Html5+Css3由浅入深视频教程
所有平台 | MP4 | 6.6G | 下载6次

评论列表 (19条评论)
  1. 卡卡讯说道: 0来自天朝的朋友 Chrome | 73.0.3683.121 MIX 2 Build/PKQ1.190118.001

    :jx: 学习学习

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      @卡卡讯: :wl: 向大佬你学习 :razz:

  2. 伍子蛇说道: 1来自天朝的朋友 Chrome | 81.0.4044.138 Mac OS X 10_15_0

    哈哈,我也写了一篇《一天入门写网页》

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      @伍子蛇: 嗯,你那个非常详细 :zan:

  3. 程志辉说道: 1 Chrome | 73.0.3683.86 Windows 10

    html超文本标记语言,语义标签。刚学那会儿用p万能字体加大加粗就可以当标题,上下间距小了就来一个换行符。后来知道得规范,特别是盲人,他们区分不了这些,所以友好起见该用什么的时候就用什么,规范很重要。(说了这么多,header section article我还是没用惯都是divdivdiv

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      @程志辉: 嗯,main、header、footer、nav、article、section都是html5新增的标签吧。
      当然DIV是万能的,貌似在p标签中用div有时会有bug....

  4. Mr.Chou说道: 5来自天朝的朋友 Chrome | 78.0.3904.108 Windows 10

    没有系统的学习过CSS,不过能修改自己想要的效果;都靠搜索。

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      @Mr.Chou: 我也是一样,边折腾边摸索 :wl:

  5. 阿和说道: 6来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

    卡通图暗藏链接啊,怎么不影响。。。

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      @阿和: 可以利用CSS定位呀

      1. 阿和说道: 6来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

        @Lvtu: 这个不会搞啊,感觉工程浩大。

  6. 阿和说道: 6来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

    我表示看得有点晕。
    页面拉下来后,旁边有个小导航,这玩意儿怎么弄的?越来越高级了啊!

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

      @阿和: 从百度百科上扒下来的。。。 :lol:

      1. 阿和说道: 6来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

        @Lvtu: 越玩越高端了 :zan:

        1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

          @阿和: 好的东西必须拿来用撒 :ye:
          没看到你那里有啥变化呀? :idea:

          1. 阿和说道: 6来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

            @Lvtu: 我现在都折腾手机版的,电脑网页不想动啊,动一发牵全身的,太费神了

            1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

              @阿和: 全站整成响应式得了。。。

          2. 阿和说道: 6来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

            @Lvtu: 那可不要,我还舍不得现在的卡通版面呢

            1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_4

              @阿和: 卡通用来做背景图就可以了,不影响呀。。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注