欢迎来到 Web 开发：针对从头开始的实用指南-js教程-PHP中文网

：设置主标题。

首页

web前端

js教程

欢迎来到 Web 开发：针对从头开始的实用指南

Patricia Arquette

Jan 07, 2025 am 07:23 AM

Bem-vindo ao desenvolvimento Web: Um guia prático para quem está começando do zero

主题

简介
什么是网络及其工作原理？
如何让您的网站向全世界开放
开发者必备工具
Web 开发能赚多少钱？
初学者提示
结论：从今天开始

介绍

如果您来到这里，那是因为您想了解 Web 开发的世界是如何运作的，谁知道呢，您是否想在新职业中迈出第一步。本指南适合对该领域一无所知并希望从头开始、在深入了解语言和工具之前了解基础知识的您。让我们一起以实用且易于理解的方式探索如何开始这一旅程。

什么是网络及其工作原理？

网络是一个连接数百万台设备和系统的全球网络，允许实时访问和共享信息。换句话说，网络就像一个大型数字图书馆。当您访问网站时，您正在询问存储在世界某个地方的信息。浏览器（如 Google Chrome 或 Firefox）就像“图书管理员”，为您搜索和组织这些信息。

以下是使这一切发挥作用的关键要素：

1。浏览器和服务器
让我们了解一下当您访问网站 https://www.pudim.com.br/ 时会发生什么。浏览器向服务器发出请求，服务器以显示页面所需的文件进行响应。对于 Pudim，服务器返回一个包含网站基本结构的 HTML 文件，其中包括标题、图像和电子邮件链接。

浏览器是您用来访问互联网的程序（Chrome、Firefox 等）。它发出信息请求并以有组织的方式显示页面。
服务器是存储网站文件（文本、图像、视频）并在您（用户）请求时将其发送到您的浏览器的计算机。将服务器视为存储网站文件（文本、图像、视频）并通过发送这些文件来响应浏览器请求的“专用计算机”。网站必须能够通过网络访问。
对于 Pudim，服务器返回一个包含网站基本结构的 HTML 文件，其中包括标题、图像和电子邮件链接。

2。浏览器和服务器如何通信？
当您访问像布丁这样的网站时，浏览器和服务器需要“对话”才能正确显示内容。这种通信通过 HTTP（超文本传输协议）进行，HTTP 是一组定义如何发送和接收信息的规则。浏览器向服务器发送请求（称为 HTTP 请求），服务器用必要的文件（例如 HTML、CSS 和 JavaScript）进行响应，以在浏览器中组装页面。这种信息交换快速高效，确保网站正确显示。

实际示例：在浏览器中输入“https://www.pudim.com.br/”，然后按 Enter。您将看到一个简单的页面，其中包含布丁图像和电子邮件链接。

3。什么是 API 以及它如何发挥作用？
现在想象一下 Pudim 网站也想显示天气预报。为此，他可以使用 API（应用程序编程接口）。 API 作为桥梁，允许不同系统交换信息。
例如：假设布丁网站还显示一条消息，例如“今天是吃布丁的好日子！”根据当前天气。浏览器会向天气 API 发送请求，该 API 将返回有关温度和天气状况的信息。然后网站可以动态显示此消息。

总结：API 是现代 Web 开发中必不可少的工具，因为它们允许您从任何内容添加实时更新的动态功能，例如数据。
现在您已经了解了基础知识，让我们开始学习创建网站的基本工具。

1。 HTML：网站的结构
HTML（超文本标记语言）定义页面的结构。它由标签组成，标签是指示内容如何在浏览器中组织和显示的元素。每个标签都有特定的功能，可以包含文本、图像、链接等元素。
示例标签：

：设置主标题。
：定义一段文本。
：在页面上插入图像。
：创建链接。

实际示例：创建一个名为index.html的文件并粘贴以下代码：

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

登录后复制

在浏览器中打开文件并查看您的第一个网页！

2。 CSS：页面样式
CSS（层叠样式表）用于为网站赋予颜色、形状和样式，使其看起来美观。
CSS 的工作原理：

选择器：标识您想要设置样式的元素。例如，body 代表页面主体，h1 代表标题。
属性和值：指定应用的样式。例如颜色：蓝色；将文本颜色更改为蓝色。

CSS 规则示例：

body { 背景颜色：#f0f0f0; } 设置页面背景颜色。
h1 { 字体大小：24px;颜色：#0066cc； } 更改标题的大小和颜色。

实际示例：创建一个名为 styles.css 的文件并添加以下内容：

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

登录后复制

通过在

中添加以下行将 CSS 连接到 HTML：来自index.html 文件：

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

登录后复制

刷新浏览器即可看到页面样式变化。

3。 JavaScript：添加交互性
JavaScript 是一种使页面具有交互性的语言，允许您添加动画、验证表单、操作元素等等。（我们将在另一篇文章中详细讨论 javascript，敬请期待❤）

互动示例：

用户单击按钮时显示的警报。
将鼠标悬停在元素上时更改元素的文本。

实际示例：添加 javascript 部分 <script>;在你的index.html 文件中。它看起来像这样：<br> </script>

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

登录后复制

现在，当您点击标题时，屏幕上会显示一条消息。

如何让您的网站向全世界开放

您可能想知道：“我的 HTML、CSS 和 JavaScript 代码如何可供其他人使用，就像我访问 Pudim 网站一样？”。好吧，当您在计算机上创建和测试网站时，它只有您自己可见。为了让互联网上的其他用户访问您的作品，您需要将其发布到服务器。

将服务器视为存储所有网站文件的库。当有人在浏览器中输入您的网站地址时，服务器会发送显示该页面所需的文件。如果没有这个，其他人将无法访问您的网站。

向全世界提供网站的过程称为托管。有多种类型的服务器和托管服务可以让这一切变得简单。现在您已经了解了这个概念，是时候探索如何创建更完整的项目并最终将它们发布给全世界了！

开发人员必备工具

代码编辑器：使用 Visual Studio Code 等编辑器来编写和组织代码。
使用 Git 进行版本控制：Git 可让您跟踪代码更改，GitHub 可帮助您在线共享项目。
在线资源：FreeCodeCamp、MDN Web Docs 和 W3Schools 等平台提供优秀的免费教程。

网络开发能赚多少钱？

网络开发领域薪资高，需求量大。以下是巴西的平均工资：

初级：每月 2,500 雷亚尔至 4,000 雷亚尔。
全额：每月 5,000 雷亚尔至 8,000 雷亚尔。
高级：每月 9,000 雷亚尔至 13,000 雷亚尔。

这些值基于 Glassdoor 的数据，可能会根据公司和地区的不同而有所不同。

给刚开始的人的建议

每天练习：即使时间很短，每天练习也是必不可少的。
加入社区：像 Dev.to 和 Rocketseat 这样的 Discord 群组和论坛非常适合学习和提问。
建立作品集：展示您的项目以增加获得机会的机会。
保持好奇心：探索不同的技术并保持最新状态。

今天开始

本指南为刚开始 Web 开发的人介绍了基础知识。目的是展示第一步，并大致了解您需要学习什么才能开始构建自己的项目。

然而，Web 开发是一个充满可能性的广阔领域。例如，我们所展示的有关 HTML 的内容只是起点。您可以探索有关 HTML5、语义元素和最佳实践的更多信息，以使您的网站易于访问且结构良好。

以下是一些可供您继续学习的网站的建议：

MDN Web 文档：学习 HTML、CSS 和 JavaScript 的最佳来源之一。
W3Schools：一个用户友好的学习和练习编码的平台。
FreeCodeCamp：免费实用课程，帮助您开发真实项目。

尽可能练习，探索不同的工具，不要害怕犯错误。

最重要的是不断学习，一点一点地，你会更有信心去创造完整的项目，甚至进入就业市场。让我们一起踏上这段旅程吧！

以上是欢迎来到 Web 开发：针对从头开始的实用指南的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7843

Java教程

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。