理解网站与网页

一、概述

1. 什么是网站？

网站是由多个互联的网页构成的资源集合。一个网站通常包含主页（通常是首页）和若干页面，用户可以通过浏览器访问这些页面。

网站的结构：网站由多个页面组成，这些页面通常通过超链接（链接）互相连接。
网站的组成：
- 域名：是网站的地址，通过域名可以访问到网站的服务器。
- 服务器：存储网站内容和网页文件的计算机。
- 浏览器：用于访问和展示网站的工具，如Chrome、Firefox、Safari等。

2. 什么是网页？

网页是一个单独的文档，通常由HTML、CSS和JavaScript等技术构成。它是网站的最小组成单元，通过URL可以单独访问。

HTML：用来定义网页的结构和内容。
CSS：用来美化网页，使其具有良好的样式和布局。
JavaScript：用来增加网页的交互性和动态效果。

3. 网站和网页的关系

网站由多个网页组成。
网页是网站的基本单元，每个网页可以包含文本、图片、视频、音频、表单等内容。
网站通过统一的域名和URL结构进行访问，网页则是通过URL定位的。

二、网站与网页的区别

项目	网站	网页
定义	由多个网页组成的集合	单个的网页文档
访问方式	通过域名访问，如www.example.com	通过URL访问，如www.example.com/page1.html
组成	多个网页、文件、资源等	主要由HTML、CSS、JavaScript组成
内容	网站可能包含多个网页、图像、视频、文档等	网页是网站的一部分，包含特定内容

三、代码案例：创建一个简单的网页

1. HTML部分（网页结构）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网页</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS样式 -->
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网页！</h1> <!-- 网页标题 -->
    </header>

    <nav>
        <ul>
            <li><a href="#home">首页</a></li> <!-- 导航链接 -->
            <li><a href="#about">关于我</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>

    <section id="home">
        <h2>首页内容</h2>
        <p>这是我的个人网站的首页。</p>
    </section>

    <section id="about">
        <h2>关于我</h2>
        <p>这里是关于我的介绍。</p>
    </section>

    <section id="contact">
        <h2>联系方式</h2>
        <p>你可以通过以下方式联系我：</p>
        <ul>
            <li>Email: example@example.com</li>
            <li>电话: 123-456-7890</li>
        </ul>
    </section>

    <footer>
        <p>© 2024 我的个人网站</p> <!-- 页脚信息 -->
    </footer>

    <script src="script.js"></script> <!-- 引入外部JS脚本 -->
</body>
</html>

中文注释：

<!DOCTYPE html>：声明文档类型为HTML5。
<head>：包含网页的元数据，如字符集、标题和链接的外部CSS文件。
<body>：网页的主体部分，包含头部、导航栏、内容区和页脚。
<section>：每个部分的内容区域，比如首页、关于我、联系方式等。

2. CSS部分（网页样式）

/* 设置网页背景色和文字颜色 */
body {
    background-color: #f0f0f0;
    color: #333;
    font-family: Arial, sans-serif;
}

/* 页面头部样式 */
header {
    text-align: center;
    background-color: #4CAF50;
    color: white;
    padding: 20px;
}

/* 导航栏样式 */
nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #4CAF50;
    text-decoration: none;
}

/* 页面各部分的样式 */
section {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

中文注释：

body：设置页面的背景色、文字颜色和字体。
header：设置页面头部的样式，包括背景色、文字颜色和内边距。
nav ul：定义导航栏的样式，使其居中显示，并去掉默认的列表样式。
section：定义页面各部分的样式，包括外边距、内边距和背景颜色。
footer：设置页脚的样式，包括文字居中、背景颜色和文字颜色。

3. JavaScript部分（交互效果）

// 当页面加载完成后，弹出欢迎信息
window.onload = function() {
    alert("欢迎访问我的个人网页！");
};

// 让导航链接点击后平滑滚动到指定的区域
document.querySelectorAll('a').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

中文注释：