HTML 学习笔记：结构与链接（完整版）

1. 结构标签演示

📄 <article> 标签

这是一篇独立的文章内容。

发布于：2026年3月26日

2. 超链接演示

绝对路径： 访问 Google (新窗口)
相对路径： 跳转到联系页 (相对路径)
邮件链接： 发送邮件

🔍 本页面的 HTML 结构源码

(仅展示 Body 核心结构部分)

<!-- 核心结构部分 -->
<div class="container">

    <!-- 1. 结构标签演示 -->
    <section class="card">
        <h2>1. 结构标签演示</h2>

        <!-- 演示 Article -->
        <article class="demo-article">
            <h3>📄 <article> 标签</h3>
            <p>这是一篇独立的文章内容。</p>
            <p>发布于：<time datetime="2026-03-26">2026年3月26日</time></p>
        </article>

        <!-- 演示 Aside -->
        <aside class="demo-aside">
            <h3>📌 <aside> 标签</h3>
            <p>这是侧边栏或补充说明内容。</p>
            <img src="..." alt="示例图片">
        </aside>
    </section>

    <!-- 2. 超链接演示 -->
    <section class="card">
        <h2>2. 超链接演示</h2>
        <ul>
            <li>
                <strong>绝对路径：</strong>
                <a href="http://www.google.com" target="_blank">访问 Google</a>
            </li>
            <li>
                <strong>相对路径：</strong>
                <a href="contact.html">跳转到联系页</a>
            </li>
            <li>
                <strong>邮件链接：</strong>
                <a href="mailto:admin@example.com">发送邮件</a>
            </li>
        </ul>
    </section>

</div>