【HTML学习】新的结构化元素

最新推荐文章于 2022-07-07 20:38:01 发布

secret114

最新推荐文章于 2022-07-07 20:38:01 发布

阅读量820

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/u012682145/article/details/47053553

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3.4 标题：`<header>`、`<hgroup>`、`<h1>`~`<h6>`以及`<footer>`

<header>：用于分节元素的内容介绍和导航。
<footer>：用于表现内容的附加信息。像<header>一样，它也不能再包含<header>和<footer>元素。
<hgroup>：这是<header>的一种特殊形式，它只能包含<h1>~<h6>元素，用于对带有副标题的标题进行组合。
<h1>~<h6>：这些HTML4的标题元素已经被沿用下来，并没有什么改变。
<header>或<footer>因为不能包含<header>或者<footer>，所以对于一个复杂页面的标头或脚注，如果需要嵌套分节的内容元素，而这些元素又带有自己的<header>和<footer>时，则要用<section>代替。

3.4.4 带有标题、副标题以及元数据的文章

<article>
    <header>
        <hgroup>
            <h1>Article heading</h1>
            <h2>Article subheading</h2>
        </hgroup>
        <p>(<time datatime="2009-07-13" pubdate>13th July,2009></ time>)</p>
    </header>
    <p>Content...</p>
</article>

3.5 大纲算法

每一个内容分节元素的第一个<h1>~<h6>会作为大纲中该小节的标题，而其任意的后续标题会形成大纲中的一个隐式的封装小节。
<hgroup>是个例外，大纲算法会隐藏它除第一个标题之外的所有子<h1>~<h6>元素，我们很快便会看到。注意，<header>并不是一个内容的标题元素或内容分节元素，因而它并不影响大纲算法。

3.5.1 实际情况下的大纲

<body>
    <h1>Article heading</h1>
    <h3>Article subheading</h3>
    <p>Some text</p>
    <h2>Section heading </h2>
</body>

1.文章标题Article heading（隐式小节）
    1.文章标题Atrticle heading（隐式小节）
    2.小节标题Section heading（隐式小节）
    3.另一个小节标题Another section heading（隐式小节）

而采用HTML5形式，采用了明确的分节元素和<hgroup>

<body>
    <article>
        <hgroup>
            <h1>Article heading</h1>
            <h2>Article subheading</h2>
        </hgroup>
        <p>Some text</p>
        <section>
            <h2>Section heading</h2>
            <p>Mort text</p>
        </section>
        <section>
            <h2>Another section heading</h2>
            <p>A little more text</p>
        </setction>
    </article>
</body>

2.无标题小节
    1.文章标题Article heading
        1.小节标题Section heading
        2.另一个小节标题Another section heading

3.5.3 无标题小节的来源

除了内容分节元素外，还有另一组元素，它们可以有自己的大纲

 <blockquote>
 <body>
 <details>
 <fieldset>
 <figure>
 <td>

这些根分节元素并不形成其祖先元素的大纲，一般情况下，这意味着他们对大纲算法是隐藏的，因而不会被包含在大纲中。
因此一般情况下，<section>、<article>、<body>始终应该有一个标题。

3.6.1 嵌套标题元素级别示例

<article>
    <hgroup>
        <h1>Article heading</h1>
        <h2>Article subheading</h2>
    </hgroup>
    <section>
        <h3>Section heading</h3>
        <p>Content...</p>
            <section>
                <h4>Subsection heading</h4>
                <p>Content...</p>
            </section>
    </section>
</article>

3.7 更多的结构化元素`<nav>`、`<aside>`、`<figure>`以及`<figcaption>`

<nav>：导航链接小节，这些链接或是链接到其他页面，或是链接到同一页面的其他小节。
<aside>：页面的一个小节，由与周边内容略微相关但又单独分开的内容所组成。
<figure>：用于这样一种内容：对理解至关重要，但可以在文档流中迁移，而不影响文档的含义。

<nav>
    <h2 class="ally">Main navigtion</h2>
    <ul>
        <li><a href=/">Home</a></li>
        <li>><a herf="/blog/">Weblog</a></li>
        <li><a herf="/about/">About</a></li>
        <li><a herf="/contact/">Content</a></li>
    </ul>
</nav>

<aside>内容应当是对主内容的补充（但对主内容的理解并不是必需的），意即是一种有点相关的内容。但是请记住，<aside>必须是相关的。举例来说，让放在<aside>中的网站侧边栏作为<body>的子元素就很好，但整个网站范围的信息不应该出现在作为<article>子元素的<aside>中。另外，<aside>适合于放置广告，只要它与父分节元素有关即可。

<figure>的内容是必需的，但他的位置是可变的。最后<figure>可以包含多个内容片段。
W3CSchool上的内容解释是规定独立的流内容，<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

<aside>和<figure>到底选用哪个？
如果这种内容只是相关而非必要，则使用<aside>。如果这种内容是必要的，但其在内容流中的位置并不重要，则使用<figure>。

另外，<aside>和<nav>也是内容分节元素，因此它们的标题也会被添加到文档大纲。<figure>是跟分节元素，故它的任何子标题在大纲中都是被隐藏的。

3.8 综合到一起

3.8.2 将一个简单的页面转换成HTML5

HTML5标准写法：

<!--'HTML-style' HTML5-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Article (HTML 5)</title>
    </head>
    <body>
        <header id="branding"><!--page header (ont in section etc) -->
            <h1>Site name</h1>
            <!-- other page heading content -->
        </header>
        <nav>
            <ul><li>Main navigation</li></ul>
        </nav>
        <div id="content"><!-- wrapper for styling and no title so not section -->
            <article><!-- main content (the article) -->
                <header>
                    <h1>Article title</h1>
                    <p>Article metadata</p>
                </header>
                <p>Article content...</p>
                <footer>Article footer</footer>
            </article>
            <aside id="sidebar"><!-- secondary content for page (not related to article) -->
                <h3>Sidebar title</h3><!-- ref:HTML50-style heading element levels -->
                <p>Sidebar content</p>
            </aside>
        </div>
        <footer id="footer">Footer</footer><!-- page footer -->
    </body>
</html>

这里假设侧边栏的内容与文章不相关，故它是<body>而不是<article>的后辈元素。

secret114

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML学习】新的结构化元素

3.4 标题：、、~以及：用于分节元素的内容介绍和导航。：用于表现内容的附加信息。像一样，它也不能再包含和元素。：这是的一种特殊形式，它只能包含~元素，用于对带有副标题的标题进行组合。 ~：这些HTML4的标题元素已经被沿用下来，并没有什么改变。或因为不能包含或者，所以对于一个复杂页面的标头或脚注，如果需要嵌套分节的内容元素，而这些元素又带有自己的和时，则要用代替。3.4.4
复制链接

扫一扫