HTML5作为现代网页开发的核心技术之一，引入了多个新元素，这些元素使得网页的结构更加清晰，语义更加明确。在HTML5中，有四个核心元素，它们分别是<header>、<nav>、<article>和<section>。下面，我们将通过实例来揭秘这四大元素的用法。

1. <header>元素

<header>元素用于表示页面或区块的页眉，通常包含导航链接、标题、搜索框等。

实例

<!DOCTYPE html>
<html>
<head>
    <title>Header Element Example</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#news">新闻</a></li>
                <li><a href="#contact">联系</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

在这个例子中，<header>元素包含了网站的标题和导航菜单。

2. <nav>元素

<nav>元素用于表示导航链接的部分，它通常包含一系列的链接，用于在不同页面或页面内的不同部分之间进行导航。

实例

<!DOCTYPE html>
<html>
<head>
    <title>Navigation Element Example</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
</body>
</html>

在这个例子中，<nav>元素包含了网站的导航菜单。

3. <article>元素

<article>元素用于表示页面中的一块与上下文独立的、可被独立分发或引用的内容，如博客条目、新闻文章、论坛帖子等。

实例

<!DOCTYPE html>
<html>
<head>
    <title>Article Element Example</title>
</head>
<body>
    <header>
        <h1>HTML5四大元素揭秘</h1>
    </header>
    <article>
        <h2>Header元素</h2>
        <p>Header元素用于表示页面或区块的页眉...</p>
    </article>
    <article>
        <h2>Navigation元素</h2>
        <p>Navigation元素用于表示导航链接的部分...</p>
    </article>
    <article>
        <h2>Article元素</h2>
        <p>Article元素用于表示页面中的一块与上下文独立...</p>
    </article>
    <article>
        <h2>Section元素</h2>
        <p>Section元素用于表示页面中的一个内容区块...</p>
    </article>
</body>
</html>

在这个例子中，<article>元素包含了关于HTML5四大元素的介绍。

4. <section>元素

<section>元素用于表示页面中的一个内容区块，通常包含标题和内容，它可以包含其他HTML元素。

实例

<!DOCTYPE html>
<html>
<head>
    <title>Section Element Example</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
    <section>
        <h2>HTML5四大元素揭秘</h2>
        <p>本文将详细介绍HTML5的四大元素...</p>
    </section>
</body>
</html>

在这个例子中，<section>元素包含了关于HTML5四大元素的介绍内容。

通过以上实例，我们可以看到HTML5四大元素在网页布局中的应用。这些元素的使用不仅可以使页面结构更加清晰，还可以提高页面的可访问性和语义化。希望这些实例能够帮助你更好地理解HTML5四大元素。