html5语义化标签

作者：夕阳下的孤影发布日期:2025-06-15 浏览:77

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 语义化标签示例</title>
</head>
<body>
    <!-- 标题区域 -->
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主要内容区域 -->
    <main>
        <section id="home">
            <h2>欢迎来到我们的网站</h2>
            <p>这是首页的内容。</p>
        </section>

        <section id="about">
            <h2>关于我们</h2>
            <p>我们是一个专注于提供高质量服务的团队。</p>
        </section>

        <section id="services">
            <h2>我们的服务</h2>
            <p>我们提供的服务包括但不限于设计、开发和维护。</p>
        </section>

        <section id="contact">
            <h2>联系我们</h2>
            <p>如果您有任何问题，请随时与我们联系。</p>
        </section>
    </main>

    <!-- 辅助信息区域 -->
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li><a href="#">博客</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">文档</a></li>
        </ul>
    </aside>

    <!-- 页脚区域 -->
    <footer>
        <p>&copy; 2023 我的网站. 保留所有权利。</p>
    </footer>
</body>
</html>

解释说明：

<header>：用于定义页面或部分的头部，通常包含标题和导航菜单。
<nav>：用于定义导航链接的部分，通常放在 <header> 内部。
<main>：用于定义文档的主要内容，每个页面只能有一个 <main> 标签。
<section>：用于定义文档中的不同部分或主题，每个部分可以有自己的标题。
<aside>：用于定义辅助内容，通常是与主要内容相关的补充信息。
<footer>：用于定义页面或部分的底部，通常包含版权信息或其他元数据。

这些语义化标签有助于提高代码的可读性和结构化，同时也有助于搜索引擎优化（SEO）和无障碍访问。

上一篇：html div 居中

下一篇：section html