国际访客建议访问 Primers 编程伙伴 国际服 以获得更好的体验。 快速访问 HTML 基础 综合示例

# 综合实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Primers 编程伙伴</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 主标题 -->
        <h1>
            <img src="https://xplanc.org/primers//icon.svg" alt="图标" width="32px" height="32px">
            Primers 编程伙伴
        </h1>
        <!-- 副标题 -->
        <h2>欢迎来到 Primers —— 你的编程学习伙伴</h2>
    </header>

    <!-- 导航栏 -->
    <nav>
        导航栏
        <a href="/primers/document/zh/02.Python">Python 教程</a>
        <a href="/primers/document/zh/03.HTML">HTML 教程</a>
    </nav>

    <!-- 正文 -->
    <main>
        <article>
            <section>
                <p>
                    <strong>超文本标记语言（HyperText Markup Language）</strong> 是一种用于创建网页的标准标记语言。
                    使用 HTML 您可以创建自己的网站。HTML 很容易学习——您一定会喜欢它！
                </p>
            </section>
            <section>
                <table border="1">
                    <thead>
                        <tr>
                            <th>标签</th>
                            <th>描述</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>&lt;h1&gt;到&lt;h6&gt;</td>
                            <td>定义HTML标题</td>
                            <td>&lt;h1&gt;主标题&lt;/h1&gt; &lt;h2&gt;副标题&lt;/h2&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;p&gt;</td>
                            <td>定义段落</td>
                            <td>&lt;p&gt;这是一个段落。&lt;/p&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;a&gt;</td>
                            <td>定义超链接</td>
                            <td>&lt;a href="https://example.com"&gt;示例链接&lt;/a&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;img&gt;</td>
                            <td>定义图像</td>
                            <td>&lt;img src="image.jpg" alt="描述"&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;ul&gt;, &lt;ol&gt;, &lt;li&gt;</td>
                            <td>定义无序列表、有序列表和列表项</td>
                            <td>
                                &lt;ul&gt;<br>
                                &nbsp;&nbsp;&lt;li&gt;项目1&lt;/li&gt;<br>
                                &nbsp;&nbsp;&lt;li&gt;项目2&lt;/li&gt;<br>
                                &lt;/ul&gt;
                            </td>
                        </tr>
                        <tr>
                            <td>&lt;div&gt;</td>
                            <td>定义文档中的分区或节</td>
                            <td>&lt;div&gt;内容块&lt;/div&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;span&gt;</td>
                            <td>定义文档中的行内元素</td>
                            <td>&lt;span&gt;行内内容&lt;/span&gt;</td>
                        </tr>
                        <tr>
                            <td>&lt;table&gt;, &lt;tr&gt;, &lt;td&gt;, &lt;th&gt;</td>
                            <td>定义表格、行、单元格和表头单元格</td>
                            <td>
                                &lt;table&gt;<br>
                                &nbsp;&nbsp;&lt;tr&gt;<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;表头&lt;/th&gt;<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;数据&lt;/td&gt;<br>
                                &nbsp;&nbsp;&lt;/tr&gt;<br>
                                &lt;/table&gt;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </article>
    </main>
    
    <!-- 侧边栏 -->
    <aside>
        <ul>
            <li>
                <a href="/primers/document/zh/03.HTML/01.%E5%9F%BA%E7%A1%80/00.%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84.md">文档结构</a>
            </li>
            <li>
                <a href="/primers/document/zh/03.HTML/01.%E5%9F%BA%E7%A1%80/01.%E5%85%83%E7%B4%A0%E5%92%8C%E5%B1%9E%E6%80%A7.md">元素和属性</a>
            </li>
            <li>
                <a href="/primers/document/zh/03.HTML/01.%E5%9F%BA%E7%A1%80/02.%E6%B3%A8%E9%87%8A.md">注释</a>
            </li>
        </ul>
    </aside>

    <!-- 页脚 -->
    <footer>
        <address>
            作者：Plan C<br>
            邮箱：<a href="mailto://hubenchang0515@gmail.com">hubenchang0515@gmail.com</a>
        </address>
    </footer>
</body>
</html>
本文 更新于: 2025-06-05 19:13:11 创建于: 2025-06-05 19:13:11