Web开发和它的三位一体介绍

Web开发的介绍和三位一体

本文将为您概述前端开发、后端开发和全栈开发，并详细介绍每个领域，以便您自行决定自己的兴趣方向。从基本的书籍定义开始，网页开发指的是构建、创建和维护网站。其中包括网页设计、网页发布、网页编程和数据库管理等方面。

Web开发和它的三位一体介绍

现在让我们详细介绍Web开发的每个方面。

前端： “前端”通常指的是用户在网页完全加载后在网站上实际看到的所有内容。这也是为什么它也被称为前端的“客户端”部分。这包括用户界面元素，如菜单和下拉菜单、导航栏、侧边栏、页眉、页脚以及CSS动画。任何网站的前端都必须与用户和系统的后端部分进行通信。因此，前端开发人员负责网站的美观、设计和外观。此外，根据最近的市场趋势，前端开发人员必须具备使网站在不同设备、浏览器和屏幕尺寸上响应的知识。这是因为市场非常多样化，不同的浏览器和设备具有一些需要考虑的复杂性和属性（例如，阴影属性）。前端开发人员主要关注对HTML、CSS和JavaScript的理解。前端开发人员还必须确保用户与网站的互动流畅友好。前端开发人员不需要后端开发技能，前端开发人员创建的网站不需要与存储在数据库中的信息交互以实现功能。现在谈谈工作机会，该行业有多个职位和空缺可供选择。然而，在一家公司的职位要求可能与另一家公司的同一职位要求完全不同。这意味着一个职位头衔在一家公司可能意味着一回事，在另一家公司可能完全不同。所以，在面试之前最好不要自己猜测职位描述，要在面试前搜索和阅读所需的技能和入职后需要做的工作。

与前端开发相关的最常见职位头衔包括：

前端开发人员
UI/UX设计师
网页设计师

备注： UI代表用户界面，UX代表用户体验 。UI设计师负责网页设计的虚拟方面，而UX设计师进行用户测试以确保网站的流畅运行。对于渴望成为网页开发人员和求职者来说，一个非常常见的问题是“网页开发人员和网页设计师之间有什么区别，它们又如何不同。”

一个网页设计师使用图形和图形设计软件（如Adobe Photoshop，Illustrator或InDesign）为网站创建外观。良好的掌握包括颜色和排版、特殊关系、受众和用户体验等各种概念对于成为一名优秀的网页设计师至关重要。因此，网页设计师的主要工作是使用诸如Adobe Photoshop、InDesign等软件为网站创建尽可能美观的外观。
而网页开发人员负责将网页设计师给出的设计转化为可被全球不同用户访问的工作模型。HTML、JavaScript、JQuery和CSS是网页开发人员必须具备的工具。

后端： 网站的后端是指基本上在服务器上的应用程序部分。由于该部分对于网站访问者和用户可访问，因此也被称为网站的服务器端。后端的主要目标是确保在用户请求时向浏览器发送正确的数据。虽然这不是一个简单的过程，需要从后端检索信息并在前端将其显示给用户。我们来举例来使事情更清晰：一个学生想要从他的大学网站获取他的学期成绩。在填写所需表单（注册号，出生日期等）后，他提交提交按钮。在按下提交按钮后，网站开始将用户输入的信息与其数据库中存储的信息进行匹配。如果信息被发现是正确的，后端将从后端收集和处理数据，并将其发送到网站的前端，其中最终显示给学生的是成绩。后端开发人员使用诸如Java、PHP、Ruby on Rails、Python和.Net等语言完成工作。创建动态网站非常需要后端开发。动态网站是那些随着时间不断更新数据的网站。例如，当您在一段时间后登录到twitter帐户时，您会自动看到来自您在Feed上关注的人的最新更新。它们不会是您昨天看到的更新。页面是如何改变的？没有任何公司会招聘员工仅用于手动更新新闻订阅。实际上，Twitter后端的脚本应该已经接收到更新并相应地重新生成了前端。动态站点的示例包括Facebook，Twitter和谷歌地图。 后端分为三个部分：服务器，应用程序和数据库。 注意：数据库管理使用MySQL和MongoDB等技术。

全栈我们可以将全栈开发人员定义为在其中一端高度精通，但必要时也能处理另一端的人。基本上，全栈开发人员熟悉前端和后端开发。然而，他们可能不具备与专门从事前端或后端的人相同的深度知识。这就是为什么有时候他们被称为“两者兼备”的原因。

Web开发的三位一体

前端网页基本上由 HTML 和 CSS （脚本语言），以及 JavaScript （编程语言）组成。无论是小型还是大型网站的前端都是使用这三种语言构建的。这也是它们被称为 前端Web开发的圣三一 的原因。全栈开发人员需要熟悉这三种语言，以便了解服务器端的更改如何影响网站的用户界面（对于开发动态网站非常有用）。以下是对这三种语言的简要总结： HTML（超文本标记语言）： HTML是用于创建您每天访问的网站的语言，它为网站内容提供了一个逻辑结构。我们也可以将HTML定义为帮助创建任何网站的骨干的语言。以下是将整个文档划分为头部、主体等各个部分的基本HTML标签：

每个HTML文档都以一个HTML文档标签开头。虽然这不是强制的，但以以下标签开始文档是一个好习惯：

<!DOCTYPE html>

<html> : 每个HTML代码都必须被基本的HTML标签包围起来。它以 <html> 开始，以 </html> 结束。
<head> ：接下来是head标签，其中包含网页或文档的所有页眉信息，比如页面的标题和其他杂项信息。这些信息被包含在以 <head> 开始，以 </head> 结束的head标签中。这个标签的内容将在后面的部分中进行解释。
<title>： 我们可以使用 <title> 标签来指定网页的标题。这是一个页眉信息，因此要在页眉标签中指定。该标签以 <title> 开始，以 </title> 结束。
<body>： 接下来的步骤是到目前为止我们学习到的所有标签中最重要的一步。body标签包含了页面的实际内容，对所有用户可见。它以 <body> 开始，以 </body> 结束。这个标签内部封装的所有内容都会显示在网页上，无论是文字、图片、音频、视频还是链接。我们将在后面的部分中了解如何使用各种标签将这些内容插入到我们的网页中。

代码的整体结构将如下所示：

<html>
<head>
    <!-- Information about the page -->
    <!--This is the comment tag-->
    <title>GeeksforGeeks</title>
</head>
<body>
    <!--Contents of the webpage-->
</body>
</html>

这段代码不会显示任何内容。它只展示了编写HTML代码的基本模式，并将页面标题命名为GeeksforGeeks。是HTML中的注释标签，它不会读取该标签内部的内容。 CSS（层叠样式表）： CSS用于美化网站上的HTML内容。包括修改页面颜色、字体、字号、元素定位等等。CSS有三种类型：

在单独的文件中（外部）
在网页文档顶部（内部）
紧接在装饰的文本旁边（内联）

外部样式表： 具有CSS指令的单独文件，文件扩展名为 （.css） 。使用外部样式表的主要优点是可以一次性更改整个网站的样式，而无需在每个页面中重写或修改样式标签。从而节省了大量的时间和精力。然而，外部样式表必须通过在之间使用标签将其链接到HTML文件中才能正常工作。

<head>
    <link rel="stylesheet" type="text/css" href="gfg.css">
</head>

内部样式表： 位于每个网页文档的顶部，在任何内容列出之前。内部样式的CSS代码是在HTML文件的头标签之间编写的。内部样式很容易找到，它们是紧随外部样式表之后具有第二高优先级的样式。

<head>
   <style>
      body {
      background-color: linen;
      }
      h1 {
      color: maroon;
      font-style: bold; 
      }
   </style>
<body>
   <h1>Hello,GeeksforGeeks</h1>
</body>
</head>

输出：

Hello, GeeksforGeeks

内联样式： 直接放置在您希望装饰的文本或图形旁边的地方。内联样式可以插入在HTML代码的中间。这样可以真正自由地指定每个网页元素，但可能会使网站的维护工作变得困难。

<h1 style="color:blue; font-style: italic;"> Hello, GeeksforGeeks </h1>

输出：

Hello, GeeksforGeeks

但是一个网站可以有多个样式表吗？ 是的，但是还是有一些规则需要遵循。看看下面的示例。假设外部样式表的名字是 gfg.css ，它给<h1>元素定义了以下样式：

h1 {
    color: orange;
}

如果在链接到外部样式表之后定义内部样式（如下所示），则<h1>元素将会是绿色的：示例：

<head>
   <link rel="stylesheet" type="text/css" href="gfg.css">
   <style>
      h1 {
      color: green;
      }
   </style>
</head>
<body>
   <h1>Hello, GeeksforGeeks</h1>
</body>

输出：

Hello, GeeksforGeeks

然而，如果内部样式在外部样式表的链接之前被定义，<h1>元素将会是”橙色”：示例：

<head>
   <style>
      h1 {
      color: green;
      }
   </style>
   <link rel="stylesheet" type="text/css" href="gfg.css">
</head>
<body>
   <h1>Hello, GeeksforGeeks</h1>
</body>

结果：

Hello, GeeksforGeeks

JavaScript: 必须记住的一点是，JavaScript和Java是完全不同的语言，无论是在概念上还是在设计上，两者之间没有任何相关性。Java是由Sun Microsystems的James Gosling创造的面向对象编程（OOP）语言。JavaScript是一种脚本语言，最初被称为LiveScript。JavaScript用于前端开发，而Java用于Web开发中的后端开发。 JavaScript的主要功能是为网页添加逻辑和交互性（例如，用户点击链接后，链接会更改颜色）。但是，该脚本应包含在或由HTML文档引用，以便浏览器解释代码。这意味着网页不需要是静态的HTML，而可以包含与用户交互、控制浏览器并动态创建HTML内容的程序。

使用JavaScript的优点有：