html5网站

作者：ι错过了发布日期:2025-07-08 浏览:21

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
        }
        nav a {
            color: #fff;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        section {
            padding: 20px;
            margin: 20px;
            background-color: #fff;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的 HTML5 网站</h1>
    </header>
    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我们</a>
        <a href="#services">服务</a>
        <a href="#contact">联系我们</a>
    </nav>
    <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>
    <footer>
        <p>&copy; 2023 我的 HTML5 网站. 保留所有权利。</p>
    </footer>
</body>
</html>

解释说明：

文档类型声明：<!DOCTYPE html> 表示这是一个 HTML5 文档。
HTML 结构：
- <html> 标签定义了整个 HTML 文档。
- <head> 部分包含元数据（如字符编码、视口设置、标题等）。
- <body> 包含网页的实际内容。
头部信息：
- <header> 用于定义页面的顶部区域，通常包含标题和导航链接。
导航栏：
- <nav> 定义了导航链接，使用 <a> 标签创建链接。
主体内容：
- 使用多个 <section> 标签来组织不同的内容块，每个部分有唯一的 id 属性以便导航。
页脚：
- <footer> 定义页面底部的内容，通常包含版权信息。
样式：
- 内联 <style> 标签用于定义页面的基本样式，包括字体、背景颜色、边距等。

这个示例代码展示了一个简单的 HTML5 网站结构，并附带了一些基本的样式，确保页面在不同设备上都能正常显示。

上一篇：html 特殊符号

下一篇：html div 居中