完整的 Web 开发初学者指南

2025-05-24

完整的 Web 开发初学者指南

您很可能每天都会访问网站，无论是在社交媒体上与朋友互动，购物，工作，还是进行成千上万的其他活动。但是，网站是如何创建的呢？这篇文章将带您从新手入门到创建一个任何人都可以访问的网站！

如果您是编程新手，您可能还想阅读这篇文章！

浏览器的工作原理

如果您正在阅读这篇文章，那么您以前一定使用过网络浏览器。Google Chrome、Mozilla Firefox、Microsoft Edge 和 Apple Safari 等浏览器都允许您访问互联网。

首先，用户选择一个想要访问的 URL——例如，他们可以在 URL 栏中输入“ https://twitter.com ”并按回车键，或者点击其他网站的链接。这会向服务器发出请求。

服务器是一台能够处理这些请求并将信息返回给浏览器的计算机。这些数据被称为响应。通常，响应包含一个浏览器可以向用户显示的 HTML 页面。

这个过程称为请求-响应周期。

示例：Twitter

让我们通过一个例子来更深入地了解一下。首先，用户在 URL 栏中输入“ https://twitter.com ”向 Twitter 发出请求。然后，Twitter 服务器决定应向请求者返回哪些信息。

让我们进一步讨论一下 URL：“ https://twitter.com ” 返回的是主页。如果用户导航到“ https://twitter.com/aspittel ”，他们应该看到的是我的个人资料和推文。服务器负责根据用户的请求获取相应的信息。网站数据（例如推文和用户）存储在数据库中。服务器会查询该数据库以获取页面所需的数据，并执行其他逻辑来处理这些数据。

最后，服务器做出响应，该响应将是一个包含正确数据的HTML页面。

前端与后端开发

我们来简单聊聊 Web 开发所涉及的技术。我们通常将开发分为前端和后端。前端开发人员负责网站的用户界面，包括页面外观、内容显示以及用户与网站的交互方式。后端开发人员负责服务器端，他们编写逻辑来决定将哪些数据发送给用户。

前端开发人员通常使用 HTML、CSS 和 JavaScript——我们将在本文中详细讨论。后端开发人员有更多语言可供选择，例如 Python、PHP、Java 和 C#。

首先，让我们编写一个前端网站。

前端技术

网站主要使用三种语言：HTML、CSS 和 JavaScript。

HTML负责网页的内容——文本、图像、视频和标题等都由 HTML 控制。

CSS用于设置网站样式，包括颜色、字体和元素的位置。我们可以使用 CSS 来设置用 HTML 创建的内容的样式。

最后，JavaScript使网页具有交互性。例如，弹出窗口和数据会发生变化。您还可以使用 JavaScript 编写或更新 HTML，因此现在有些网站完全是用 JavaScript 编写的！

让我们学习这些前端语言的基础知识，并使用 HTML 和 CSS 构建一个“关于我”的网站。

让我们创建一个网站

我们要做的第一件事是下载一个文本编辑器，这样我们就可以编写代码了。市面上有很多编辑器可供选择，但我最喜欢的是Visual Studio Code。赶紧下载到你的电脑上吧。

下载完成后，打开应用程序。同时，在电脑上创建一个文件夹。在 Mac 电脑上，您可以打开finder应用程序，然后点击file > new folder。在 Windows 电脑上，您可以对File Explorer应用程序执行类似操作。您可以给文件夹命名about-me，或者随便您喜欢的名称！

现在，返回 VS Code。点击Open folder...下方的链接Start。然后，选择刚刚创建的文件夹。

在“开始”下打开文件夹

现在，我们将创建两个文件，index.html和style.css。您可以在 VS Code 中通过单击左侧栏上看起来像两张纸的图标来执行此操作。

然后点击new file文件夹名称旁边的按钮。你可能需要将鼠标悬停在左侧的资源管理器部分上，该部分在你点击两张纸按钮时打开。然后输入文件名并按下enter键。

您还可以在您的文件中创建文件finder，或者file explorer如果您觉得这样更舒服的话！

HTML

我们用标签来编写 HTML，这些标签描述了它们之间的内容类型。例如：

<h1>Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

<h1>是开始标签，它表示我们的内容 Hello World 是第一级标题。</h1>是结束标签，它结束标题。

让我们继续向我们的网站添加代码。

在 VS Code 中，单击index.html您创建的文件以将其打开。

在该文件中，添加以下代码：

<html></html>

这些标签表示它们之间的任何内容都是 HTML —— 这对我们来说可能很明显，但告诉浏览器这一点也是很好的做法。

让我们继续在标签内添加<head>一个标签：<body><html>

<html>
  <head></head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

这些body标签将包含我们页面的所有内容——那些将向用户显示的内容。这些head标签将包含页面的配置信息。

在标签内head，我们将添加一个title标签，在body标签内我们将添加一个h1标签。

<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

现在，保存文件。您可以使用快捷方式或点击计算机菜单栏来执行cmd + s此ctrl + s操作file > save。

现在，让我们在电脑上打开这个网站。在 Finder 中，右键单击该文件，然后点击open with > Chrome或您选择的浏览器。在 Mac 上，您也可以双击该文件。

您的浏览器应该会打开一个网页：

来自Hello World于你的h1标签，标签上的文字也来自于title标签。让我们添加更多信息！

<html>
  <head>
    <title>About Blair</title>
  </head>
  <body>
    <h1>About Blair</h1>
    <p>
      Blair is a very sweet mini double doodle. 
      She likes chasing balls and eating peanut butter.
      She also likes napping on her mama's lap while she works.
    </p>
    <img src="https://pbs.twimg.com/media/EiAQnwXX0AESbgZ.jpg">
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

再次保存文件，然后在浏览器中刷新 HTML 页面！新信息！

让我们讨论一下这两个新标签。p标签用于段落。img标签略有不同。首先，它是一个自闭合标签，这意味着我们不需要为其添加闭合标签。它还有一个attribute。属性是我们可以添加到标签的附加信息。src属性保存图像的 URL。您可以从网络上选择任何图像！

让我们为img标签添加第二个属性—— alt。

<img src="https://pbs.twimg.com/media/EiAQnwXX0AESbgZ.jpg" alt="Blair lying on her back on her bed">

Alt-text 是使用屏幕阅读器向用户读出的内容，通过使用 alt text 等工具，专注于使您的 HTML可访问（https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility ）非常重要。

这只是我们可以使用 HTML 完成的一小部分任务，这里列出了更多您可以探索的资源。

CSS

我们的网页已经可以运行了，但还不够美观——它只是白色背景上的黑色文字。让我们添加一些 CSS 来美化我们的页面！

首先，我们需要将样式表链接到HTML页面。我们将在head标签内进行此操作：

<head>
  <title>About Blair</title>
  <link rel="stylesheet" href="style.css">
</head>
Enter fullscreen mode Exit fullscreen mode

这会将我们的 CSS 表链接到 HTML 页面，这样我们现在就可以编写一些代码来设置页面样式了。保存 HTML 文件，然后style.css在 VS Code 中打开它。

使用 CSS，我们从 HTML 中选择元素并为其添加样式。让我们把图片缩小一点：

img {
  height: 200px;
}
Enter fullscreen mode Exit fullscreen mode

表示img我们要为标签添加样式<img>。 里面的所有内容{}都会应用到imgs 上。然后，height: 200px;是一个规则。在本例中，我们指定图片的高度为 200 像素。

CSS选择器图

我们还为页面添加背景颜色：

body {
  background-color: lightpink;
}
Enter fullscreen mode Exit fullscreen mode

尝试添加更多样式——颜色和字体可能值得尝试！

如果您想深入了解 CSS，我还写了这个完整的指南。

部署

现在我们有了一个网站，但只能在自己的电脑上访问。我们需要使用服务器，以便其他用户能够访问它。自行管理服务器工作量很大，而且成本高昂。我们将使用AWS的云服务器。这意味着您只需上传文件，AWS 就会为您托管，而且第一年免费。之后，价格将如下所示。

首先，创建一个 AWS 账户。然后，导航到AWS Amplify 控制台。单击Connect app按钮，然后Deploy without Git provider在下一页中选择（最后一个选项）。

我们还需要压缩文件。在 Finder 或文件资源管理器中，右键单击about-me文件夹，然后单击compress folder。然后，将生成的 zip 文件拖放到 AWS。

最后，点击save and deploy按钮。在下一页，你可能需要等待几秒钟才能完成网站构建。完成后，你会看到一个可以发送给任何人的 URL！这是我的。

结论

Web 开发是一条很棒的职业道路，你可以从中学到很多东西。希望本教程能激发你学习更多内容的兴趣！以下是一些我最喜欢的入门资源。

文章来源：https://dev.to/aws/a-complete-beginner-s-guide-to-web-development-cl4
Devto 翻译
PREV
构建具有授权和身份验证的 React 应用程序
NEXT
React 初学者完整指南：Hooks 版