HTML5元素 - 技术栈

HTML5的<section>元素和<article>元素

<section>元素定义文档中的一部分，着重于对页面内容进行分块或者分段，通常可以分为引言、内容和联系人信息等几个部分。

html 复制代码

<section>
        <h1>WWF</h1>
        <p>WWF 是世界自然基金会的英文缩写，它是 1961 年成立的独立性非政府环保组织，总部位于瑞士格朗</p>
</section>

<article>元素规定不依赖，自包含内容。用于表示文档、页面、应用程序或者网站中独立的、完整的且可以独自被外部引用的内容。<article>元素中的内容能够独立存在，不依赖页面的其他部分就能被理解。

html 复制代码

<article>
        <h1>WWF</h1>
        <p>坚持全球性、独立性、文化多元性和无党派的立场；用科学的办法解决环境问题，同时以批判的眼光来审视自身取得的成就.</p>
</article>

<section>元素和<article>元素的区别：

<section>元素着重于对页面内容进行分块或者分段，而<article>元素强调内容的独立性和完整性。如果一个内容块可以独立存在并且能被独立引用，就使用<article>元素；如果只是对页面内容进行划分，就使用<section>元素。

HTML5<header>元素

<header>元素指定一个文档或者章节的标题。<header>元素应作为介绍内容的容器。在一个文档中可以有多个<header>元素。

html 复制代码

<article>
        <header>
            <h1>What Does WWF Do?</h1>
            <p>WWF's mission:</p>
        </header>
        <p>WWF 是世界自然基金会的英文缩写，它是 1961 年成立的独立性非政府环保组织，总部位于瑞士格朗</p>
</article>

HTML5<footer>元素

<footer>元素可以嵌套在其他元素内部，用于定义某个特定节的页脚。<footer>元素通常包含与它所属的文档或节相关的信息，这些信息一般是一些辅助性的内容，有助于用户更好地理解和使用整个页面。页脚通常包含文档的作者、版权信息、使用条款的链接、联系人信息等。

一个文档中可以有几个<footer>元素

html 复制代码

<footer>
        <p>作者</p>
        <p>条款 <a href="www.san.com">www.san.com</a></p>
</footer>

HTML5<nav>元素

<nav>元素定义了一组导航超链接，这些链接能引导用户访问网站的其他部分，或者跳转到其他相关页面。它能让代码更具语义，使开发者和浏览器更清晰地识别页面的导航区域。不是所有的链接的文件应该在一个<nav>元素里面。<nav>元素仅用于主要的导航链接块。

html 复制代码

<nav>
        <a href="/html/">HTML</a>
        <a href="/css/">CSS</a>
        <a href="/js/">JavaScript</a>
        <a href="/jquery/">jQuery</a>
</nav>

HTML5<aside>元素

<aside>元素定义一些边栏内容，，这部分内容独立于主要内容，但又对整体有补充作用。它通常包含一些辅助信息、侧边栏内容、广告、相关链接等。

html 复制代码

<aside>
        <h4>标题</h4>
        <p>这是一部分内容</p>
</aside>

HTML5<figure>和<figcaption>元素

<figure>元素：它是一个容器元素，用于包含与文档主体相关的可视化内容，比如图片、图表、示意图、代码示例等。这些内容通常可以独立于文档的主要流而存在，并且可以在文档中被移动而不影响文档的整体含义。

<figcaption>该元素用于为<figure>元素中的内容提供标题或说明。它是可选的，但当存在时，应该是 <figure>元素的第一个或最后一个子元素。

html 复制代码

<figure>
        <img src="pic_jpg" alt="The Pulpit Rock" width="333" height="222">
        <figcaption>Fig1. - The Pulpit Rock,Norway.</figcaption>
    </figure>