主页

使用 HTML、CSS 和 JavaScript 构建一个简单的主页.

背景

互联网已经实现了令人难以置信的事情: 我们可以使用搜索引擎研究任何能想象到的东西，与全球各地的朋友和家人交流，玩游戏，上课，还有很多很多. 但事实证明，我们访问的几乎所有页面都建立在三种核心语言之上, 每种语言都有略微不同的用途:

HTML, 即 超文本标记语言 (HyperText Markup Language), 用于描述网站的内容;
CSS, 层叠样式表 (Cascading Style Sheets), 用于描述网站的美观; 以及
JavaScript，用于使网站具有交互性和动态性.

创建一个简单的主页，介绍你自己、你最喜欢的爱好或课外活动，或任何你感兴趣的东西.

入门

接下来执行

wget https://cdn.cs50.net/2026/x/psets/8/homepage.zip

以下载一个名为 homepage.zip 的 ZIP 压缩包到你的 codespace 中.

然后执行

unzip homepage.zip

来创建一个名为 homepage 的文件夹。你不再需要这个 ZIP 文件了，所以你可以执行

rm homepage.zip

然后在提示符后输入 “y” 并按回车，以删除你下载的 ZIP 文件.

现在输入

cd homepage

然后按回车键，将你自己移至（即打开）该目录。你的提示符现在应类似于下面所示.

homepage/ $

单独执行 ls，你应该会看到少量文件:

index.html  styles.css

如果你遇到任何问题，请再次按照这些步骤操作，看看是否能够找出哪里出错了！你可以通过运行以下命令立即启动服务器来查看你的网站

http-server

在终端窗口中。然后，在 Mac 上 command-click 或在 PC 上 control-click 第一个出现的链接:

http-server running on LINK

其中 LINK 是你服务器的地址.

规格说明

在你的 homepage 目录中实现一个网站，必须满足以下要求:

包含至少四个不同的 .html 页面，其中至少一个为 index.html（你网站的主页），并且可以通过跟随一个或多个超链接从网站上的任何页面到达任何其他页面.
使用至少十个 (10) 个不同的 HTML 标签（不包括 <html>、<head>、<body> 和 <title>）。多次使用某个标签（例如 <p>）仍然只算作这十个中的一个 (1)!

在你的网站中集成一个或多个来自 Bootstrap 的功能。Bootstrap 是一个流行的库（包含大量 CSS 类等），你可以通过它来美化你的网站。参见 Bootstrap 文档开始使用。特别是，你可能会对 Bootstrap 组件中的一些内容感兴趣。要将 Bootstrap 添加到你的网站，只需在你的页面的 <head> 中包含以下内容

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

在页面 <head> 中，其下你还可以包含

<link href="styles.css" rel="stylesheet">

来链接你自己的 CSS.

至少有一个你自己创建的样式表文件 styles.css，其中使用至少五 (5) 个不同的 CSS 选择器（例如标签选择器 (example)、类选择器 (.example) 或 ID 选择器 (#example)），并总共使用至少五 (5) 个不同的 CSS 属性，例如 font-size 或 margin;
在你的网站中集成一个或多个 JavaScript 功能，使你的网站更具交互性。例如，你可以使用 JavaScript 添加警告框，在定时间隔下产生效果，或为按钮、下拉菜单或表单添加交互性。尽情发挥创意吧!
确保你的网站在移动设备以及笔记本电脑和台式机上的浏览器中都能看起来美观.

你还应该创建一个文本文件 specification.txt，在其中列出你使用的 10 个 HTML 标签和 5 个 CSS 属性，以及简要（一句话）描述你选择如何使用 JavaScript 和 Bootstrap.

测试

如果你想在开发过程中查看网站的效果，可以运行 http-server。Command-click 或 control-click http-server 显示的第一个链接，这应该会在新标签页中打开你的网页。然后你应该能够刷新包含你网页的标签页来查看最新更改.

还要记住，通过打开 Google Chrome 中的开发者工具，你可以模拟在移动设备上访问你的页面，方法是点击开发者工具窗口中 Elements 左侧的手机形状图标，或者，在开发者工具标签页已打开的情况下，在 PC 上输入 Ctrl+Shift+M，在 Mac 上输入 Cmd+Shift+M，而无需单独在移动设备上访问你的网站!

评估

本次作业没有 check50！相反，你网站的正确性将根据你是否满足上述规格说明的要求，以及你的 HTML 是否格式正确且有效来评估。为了确保你的页面如此，你可以使用这个标记验证服务 (Markup Validation Service)，将你的 HTML 直接复制粘贴到提供的文本框中。在提交之前请注意消除验证器提示的任何警告或错误!

同时也请考虑:

你网站的美观程度是否让用户能够直观而直接地导航;
你的 CSS 是否已提取到单独的 CSS 文件中; 以及
你是否通过从父标签”级联”样式属性来避免重复和冗余.

很遗憾 style50 不支持 HTML 文件，因此你有责任干净地缩进和对齐你的 HTML 标签。你还可以使用以下语法创建 HTML 注释:

<!-- Comment goes here -->

但注释 HTML 代码不像注释诸如 C 或 Python 代码那样必要。你也可以在 CSS 文件中注释你的 CSS，语法如下:

/* Comment goes here */

提示

关于这道题中引入的编程语言的较为全面的指南，请查阅以下教程:

如何提交

在终端中执行以下命令提交你的作业，并按提示完成操作。

submit50 cs50/problems/2026/x/homepage