最基础的网页结构

这个模板展示了任何一个 HTML 文件最核心、最不可或缺的部分，它包含了所有网页的“骨架”。

html简单的静态网页模板
（图片来源网络，侵删）

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落，这里可以写一些介绍性的文字。</p>
</body>
</html>

代码解释：

  • <!DOCTYPE html>：文档类型声明，告诉浏览器这是一个 HTML5 文件。
  • <html lang="zh-CN">：根元素，包裹了整个页面的内容。lang="zh-CN" 指明了网页的语言是简体中文,有助于搜索引擎和屏幕阅读器。
  • <head>：头部区域，包含页面的元数据（metadata），这些数据不会直接显示在页面上，但提供了页面的信息。
    • <meta charset="UTF-8">：字符编码声明,确保浏览器能正确显示中文等特殊字符。
    • <meta name="viewport" ...>：viewport 元标签，对于响应式设计至关重要,它告诉浏览器如何控制页面的尺寸和缩放。
    • <title>：页面的标题，会显示在浏览器标签栏上,也是搜索引擎收录时的重要依据。
  • <body>：主体区域，包含了所有在浏览器窗口中可见的内容。
    • <h1>,通常用于页面的主标题。
    • <p>：段落标签,用于包裹一段文本。

带样式和链接的完整单页

这个模板在模板一的基础上，增加了 CSS 样式（让页面变好看）和超链接（连接到其他页面或资源），这是最常用、最实用的静态网页模板。

代码：

html简单的静态网页模板
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人主页</title>
    <!-- 内联样式 -->
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        header {
            text-align: center;
            border-bottom: 1px solid #ddd;
            padding-bottom: 20px;
        }
        h1 {
            color: #0056b3;
        }
        nav ul {
            list-style-type: none; /* 去掉列表前的点 */
            padding: 0;
        }
        nav ul li {
            display: inline; /* 让列表项横向排列 */
            margin-right: 15px;
        }
        nav a {
            text-decoration: none; /* 去掉链接的下划线 */
            color: #0056b3;
            font-weight: bold;
        }
        nav a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
        footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.8em;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>张三的个人主页</h1>
            <nav>
                <ul>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#portfolio">作品集</a></li>
                    <li><a href="#contact">联系方式</a></li>
                    <li><a href="https://www.google.com" target="_blank">外部链接</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="about">
                <h2>关于我</h2>
                <p>你好！我叫张三，是一名前端开发爱好者，我喜欢用代码创造美观且实用的网页。</p>
            </section>
            <section id="portfolio">
                <h2>我的作品</h2>
                <p>这里是我的项目展示区，目前还在建设中...</p>
            </section>
            <section id="contact">
                <h2>联系我</h2>
                <p>如果你想与我交流，可以通过以下方式联系我：</p>
                <p>邮箱: <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
                <p>GitHub: <a href="https://github.com" target="_blank">github.com/zhangsan</a></p>
            </section>
        </main>
        <footer>
            <p>&copy; 2025 张三的个人主页. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

解释：**

  1. <style>：

    • 在 <head> 中使用 <style> 标签，可以直接在 HTML 文件中编写 CSS 代码，这种方式称为“内联样式”。
    • 我们为 body, .container, header 等元素添加了样式，如字体、颜色、边距、背景、阴影等,让页面看起来更专业。
    • .container 是一个类选择器，通过 class="container" 应用样式。
    • nav ul li { display: inline; } 让导航菜单变成了水平排列。
    • a:hover 定义了鼠标悬停在链接上时的效果。

  2. 语义化标签：

    • <header>：页眉，通常包含网站标题、导航等。
    • <nav>：导航链接区域。
    • <main>：页面的主要内容。
    • <section>：文档中的一个独立区域,通常带有标题。
    • <footer>：页脚,通常包含版权信息等。
    • 使用这些标签能让页面结构更清晰，对 SEO（搜索引擎优化）也更友好。

  3. 超链接 <a>：

    html简单的静态网页模板
    （图片来源网络，侵删）
    • <a href="#about">：这是一个锚点链接，点击后会跳转到页面中 id="about" 的位置。
    • <a href="https://www.google.com" target="_blank">：这是一个外部链接，href 指向目标网址，target="_blank" 会在新标签页中打开链接。
    • <a href="mailto:...">：这是一个邮件链接,点击后会打开默认的邮件客户端。

带有多页面和外部资源的模板

这个模板展示了如何构建一个包含多个页面的简单网站，并将 CSS 和 JavaScript 代码分离到外部文件中,这是专业开发的标准做法。

项目结构：

my-website/
├── index.html      (首页)
├── about.html      (关于我们页)
├── css/
│   └── style.css   (外部样式表)
└── js/
    └── script.js   (外部脚本)

css/style.css (外部样式表)

将模板二中的 <style> 标签内的所有 CSS 代码移动到这里。

/* css/style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
header {
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
h1 {
    color: #0056b3;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}
nav a {
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
}
nav a:hover {
    text-decoration: underline;
}
footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #777;
}

js/script.js (外部脚本)

创建一个简单的 JavaScript 文件,用于添加一些交互效果。

// js/script.js
document.addEventListener('DOMContentLoaded', function() {
    // 为所有 <h2> 标签添加一个点击事件
    const headings = document.querySelectorAll('h2');
    headings.forEach(heading => {
        heading.style.cursor = 'pointer'; // 鼠标悬停时显示手型
        heading.addEventListener('click', function() {
            alert('你点击了标题: ' + this.textContent);
        });
    });
    console.log('页面已加载，脚本已执行！');
});

index.html (首页)

HTML 文件会通过 <link> 和 <script> 标签引用外部的 CSS 和 JS 文件。

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">首页 - 我的网站</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>我的网站</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h2>欢迎访问</h2>
            <p>这是我的网站首页，点击上方的导航链接可以访问“关于我们”页面。</p>
            <p>尝试点击下面的标题，会有惊喜哦！</p>
            <h2>点击我试试</h2>
            <p>打开浏览器的开发者工具（F12），在 Console 标签页中可以看到 "页面已加载，脚本已执行！" 的消息。</p>
        </main>
        <footer>
            <p>&copy; 2025 我的网站. All rights reserved.</p>
        </footer>
    </div>
    <!-- 引入外部脚本 -->
    <!-- 通常建议将 script 标签放在 body 结束前，以确保 DOM 已加载完毕 -->
    <script src="js/script.js"></script>
</body>
</html>

about.html (关于我们页)

这个页面的结构和首页类似，但内容不同，它同样会引用同一个 CSS 和 JS 文件,从而保持整个网站的风格统一。

<!-- about.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">关于我们 - 我的网站</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>我的网站</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h2>关于我们</h2>
            <p>我们是一个致力于提供优质内容和服务的团队。</p>
            <p>我们的使命是...</p>
            <h2>我们的团队</h2>
            <p>点击这里也会触发脚本事件。</p>
        </main>
        <footer>
            <p>&copy; 2025 我的网站. All rights reserved.</p>
        </footer>
    </div>
    <!-- 引入外部脚本 -->
    <script src="js/script.js"></script>
</body>
</html>

总结与建议

  • 从简单开始：如果你是新手，从模板一和模板二开始，理解 HTML 的基本结构和如何添加样式。
  • 分离关注点：模板三展示了最佳实践——将 HTML（结构）、CSS（样式）、JavaScript（行为）分开到不同文件中，这样做的好处是代码更清晰、易于维护和复用。
  • 动手实践：复制这些代码，尝试修改它们的样式、内容和功能，看看会发生什么变化,这是学习最快的方式。
  • 进阶学习：当熟悉了这些基础后，可以学习更现代的 CSS（如 Flexbox, Grid）和 JavaScript（如使用 Vue 或 React 框架），以及构建工具（如 Vite）。