如何创建网页（逐步）

Laptop with wallpaper that says just start

嘿我叫 Pavel，是一名前端开发人员。我在 2012 年开始学习 Web 开发，我想分享一些创建网站所需的基本知识。我们将创建一个超级简单的页面并将其发布，这样您就可以与任何人共享链接。一切都是免费的，不需要太多时间，所以让我们开始吧。

你需要开始什么

一般来说，你不需要任何东西。网络的工作方式是我们有一些我们网站所在的地址，并且 索引.html 包含我们网站代码的文件。你可以创建 索引.html 文件在你想要的任何编辑器中。在本教程中，我将使用 VSCode ，它是完全免费和开源的。您可以从下面的列表中选择任何东西，但有些工具不是免费的：

VSCode
崇高的文本
记事本++
网络风暴
原子（GitHub 于 2022 年 12 月 15 日在其博客上宣布 Atom 的生命周期结束）
括号

基本页面结构

我希望你找到了一些你喜欢的编辑器，现在我们可以开始了。在您的计算机上创建一些文件夹，例如， 我的个人网站 并在您的代码编辑器中打开此文件夹。创造 索引.html 让我们开始我们的前端开发之旅。

让我们将此代码添加到我们的 索引.html 文件。

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>我的个人网站</title>  
 </head>  
 <body>  
 <p>嗨，我叫帕维尔！我将成为一名前端开发人员</p>  
 </body>  
 </html>

当您在浏览器中打开此文件时，您应该会看到：

Rendered website with content from body tag

容易，对吧？让我解释一下代码。

在我们文件的最顶部，我们有 <!DOCTYPE html> 通过这一行，我们的浏览器可以理解它是 HTML 文件。在 - 的里面 头 标签，我们添加一些关于网站的信息，如标题、描述、关键字等。 <body> 和 </body> 这是用户将在网站上看到的内容。在我们的例子中，我们使用 <p> 标签表示“让我们显示带有消息的段落”。就是这样 HTML 语言的样子。

现在，您只需在 Google 上搜索“如何在 HTML 中添加图像”之类的内容，您会看到一些示例，例如 <img src="..." > ，只需复制并添加到里面 <body> .像这样：

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>我的个人网站</title>  
 </head>  
 <body>  
 <p>嗨，我叫帕维尔！我将成为一名前端开发人员</p>  
 <img src="[ https://images.unsplash.com/photo-1615916605299-21a82ebf0933](https://images.unsplash.com/photo-1615916605299-21a82ebf0933) ">  
 </body>  
 </html>

现在我鼓励您使用此标签更改文本并在您的网站上添加您想要的任何内容 HTML 元素参考 .单击您喜欢的标签，您将获得代码示例。

让您的页面独一无二

如果您已经完成了这个小任务，那么让我们让我们的网站更加独特。我们将谈论 CSS 现在。 HTML 只处理一些基本的事情，比如显示文本、输入、图像等。要改变元素的颜色、间距、位置，我们需要 CSS 语言。

让我们添加 <style> 里面的标签 <head> 包含以下内容：

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>我的个人网站</title>  
 <style>  
 身体 {  
 背景：黑色；  
 } p {  
 白颜色;  
 }  
 </style>  
 </head>  
 <body>  
 <p>嗨，我叫帕维尔！我将成为一名前端开发人员</p>  
 </body>  
 </html>

CSS 的想法很简单，你说“嘿！你能找到一个body元素并将背景颜色设置为黑色吗？哦……请把我 p 标签中的文本颜色改为白色”。这是一个非常简单的示例，但向您展示了其工作原理的基本概念。现在您可以在浏览器中刷新页面并查看您的页面是否已更改。您应该在黑色背景上看到白色文本。我希望一切正常，我们可以继续前进。

假设我们有两个 <p> 标签，但您想为它们应用不同的颜色。这个想法是添加一个 班级 在您的 HTML 中使用不同名称的属性，然后使用 CSS 类选择器选择元素。这就是我的意思：

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>我的个人网站</title>  
 <style>  
 身体 {  
 背景：黑色；  
 } .white-text {  
 白颜色;  
 } .橙色文本{  
 颜色为橙色;  
 }  
 </style>  
 </head>  
 <body>  
 <p class="white-text">嗨，我叫帕维尔！</p>  
 <p class="orange-text">我要成为前端开发人员</p>  
 </body>  
 </html>

我们这里有两个 CSS 选择器 .white-文本 和 .橙色文本 , 当我们的选择器以 . , CSS 会理解它是一个类选择器。这里是 CSS 选择器由 MDN 制作的列表，其中包含很好的解释和示例。

如何部署网站

现在是时候发布我们的网站了，或者我们通常所说的部署网站。本节的想法是让任何人都可以看到我们的网站！甚至你的父母也可以看看并给你一些反馈。

有很多不错的免费托管，但我通常使用韦尔塞尔或者网络化 .在本教程中，我将向您展示如何使用 Netlify。

去 https://app.netlify.com/ 并创建您的帐户。
现在转到主页，称为团队概述
单击添加新站点 > 手动部署

Shows where does link is placed on the page

你应该可以放弃我们的 我的个人网站 包含的文件夹 索引.html 文件。之后，您应该会看到下面的屏幕。您需要稍等片刻，直到 Production Deploys 的状态从 Uploading 变为 Published。

这里是！你有一个链接到你的网站，你可以分享。在我的情况下 https://gleaming-gumdrop-6a0f99.netlify.app/ .

概括

现在您有了可以从任何地方访问的网站。我们已经编写了一些非常基本的 HTML 和 CSS，您可以使用给定的参考添加更多内容。我知道这听起来不像是我们作为前端开发人员所做的全部工作。你应该学习更多的 HTML 标记、更多的 CSS 规则、如何协同工作、如何提高工作速度，以及许多其他的东西。我建议你选择一些你喜欢的网站，并尝试使用 HTML 和 CSS 制作类似的东西。因为学习 HTML 和 CSS 的唯一方法是通过实践。

如果你喜欢这篇文章或者想了解更多关于加快进程，或者如何在代码上协同工作，请让我知道推特 .我们可以一起学习任何东西。我刚刚开始分享我的知识，所以如果您有任何反馈，请以任何方式告诉我。

本文链接：https://www.qanswer.top/1690/10193016