Web开发的介绍和神圣三位一体

null

本文将向您概述前端开发、后端开发和完整堆栈开发，并详细介绍每种开发，以便您自己决定感兴趣的领域。从书籍的基本定义开始，“网络开发”指的是建立、创建和维护网站。它包括网页设计、网页发布、网页编程和数据库管理等方面

frontendvsbackend 现在让我们详细介绍一下web开发的各个方面。

前端： “前端”通常指用户在网站上实际看到的所有类型的东西，一旦它完全加载。这就是为什么它也被称为前端的“客户端”。这包括菜单和下拉列表、导航栏、侧栏、页眉、页脚等用户界面元素，以及CSS动画。任何网站的前端都必须与用户和系统的后端部分进行通信。因此，前端开发者负责网站的美学、设计和外观。此外，根据最近的市场趋势，前端开发人员必须具备使网站响应不同设备、浏览器和屏幕大小的知识。这是因为市场非常多样化，不同的浏览器和设备有一些复杂性和特性，在创建网站或博客之前必须加以考虑（例如，影子特性）。

前端开发人员主要关注对 HTML 、CSS和 JavaScript .

前端开发人员还必须确保用户与网站的交互顺畅友好。前端开发人员不需要后端开发技能，前端开发人员创建的网站也不需要与存储在数据库中的信息交互才能发挥功能。现在说到就业机会，这个行业有多个职位和空缺。然而，一家公司的工作简介所需的技能可能与其他公司相同工作简介所需的技能完全不同。这意味着一个职位在一家公司可能意味着什么，然后在另一家公司完成另一件事。所以，最好不要自己猜测任何关于工作简介的信息，而是在应聘后、面试前搜索并阅读所需的技能和工作。

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

前端开发者
用户界面/用户体验设计师
网页设计师

注： UI代表用户界面，UX代表用户体验 .用户界面设计师必须负责网站设计的虚拟方面，而用户体验设计师则进行用户测试，以确保网站的顺利运行。

在有抱负的网络开发者和求职者中，一个非常常见的问题是： 网页开发人员和网页设计师之间有什么区别，以及“两者有何不同？” ’.

网页设计师使用Adobe Photoshop、Illustrator或InDesign等图形和图形设计软件为网站创建外观。要成为一名优秀的网页设计师，需要对颜色和排版、特殊关系、受众和用户体验等各种概念有很强的掌握。因此，网站设计师的主要工作是使用Adobe Photoshop、InDesign等软件为网站创造尽可能美观的外观。
然而，web开发人员负责开发web设计师提供的工作模型设计，该工作模型可供全球不同用户访问。HTML、JavaScript、JQuery和CSS是web开发人员工具包中必须具备的一些工具。

后端： 应用程序中基本上位于服务器上的部分称为网站后端。由于该部分可供网站访问者和用户访问，因此也被称为网站的服务器端。后端的主要目标是确保在用户请求时向浏览器发送正确的数据。虽然这不是一个简单的过程，而且要从后端检索信息，然后在前端将其显示给用户，还需要做很多工作。让我们举个例子，让事情变得更清楚；一个学生想从学校的网站上得到他的学期成绩。填写所需表格（注册号、出生日期等）后，他提交提交按钮。按下提交按钮后，网站开始将用户输入的信息与存储在其数据库中的信息进行匹配。如果发现信息正确，后端将收集和处理来自后端的数据，并将其发送到网站前端，最终将结果显示给学生。

后端开发人员使用Java、PHP、Ruby on Rails、Python和Java等语言。Net来完成工作。创建动态网站非常需要后端开发。动态网站是指那些数据随着时间不断更新的网站。例如，当你在相当长的一段时间后登录到你的twitter帐户时，你会自动收到你在订阅源上关注的人的最新更新。它们不会像你昨天看到的那样更新。页面是怎么变化的？任何公司都不可能仅仅为了手动更新新闻源而招聘员工。实际上，Twitter后端上的脚本会收到更新，并相应地重新生成前端。动态网站的例子包括Facebook、Twitter和谷歌地图。 后端由三部分组成：服务器、应用程序和数据库。 注：数据库管理采用MySQL、MongoDB等技术。

满堆我们可以将full stack developer定义为精通其中一端的人，但也可以在必要时处理与另一端的工作。基本上，全栈开发人员都熟悉前端和后端开发。然而，他们可能没有专门研究前端或后端的人拥有相同的知识深度。这就是为什么有时他们被称为“两手空空”。

Web开发的神圣三位一体

前端网络基本上由 HTML 和 CSS 脚本语言和 JavaScript 这是编程语言。所有网站的前端，无论大小，都使用这三种语言构建。这就是为什么他们被称为 前端web开发的神圣三位一体。 对于全栈开发人员来说，熟悉这三种语言也是非常重要的，这样他们就可以理解服务器端的更改如何影响网站的用户界面（对于动态网站的开发非常有用）。

以下是这三种语言的简要概述。 HTML（超文本标记语言）： HTML 是用来创建你每天访问的网站的语言，它提供了一种合理的方式来为网站构建内容。我们还可以将HTML定义为帮助创建任何网站主干的语言。下面提到的是基本的HTML标记，它将整个文档划分为不同的部分，如头部、主体等。

每个HTML文档都以HTML文档标记开头。虽然这不是强制性的，但使用以下标签开始文档是一个很好的惯例：
```
<!DOCTYPE html>
```
：每个HTML代码必须包含在基本HTML标记之间。它始于以标签
：接下来是head标签，它包含网页或文档的所有标题信息，如页面标题和其他杂项信息。这些信息包含在head tag中，head tag以以 .本标签的内容将在本课程后面的章节中解释。
：我们可以使用标签这是标题信息，因此在标题标签中提到。标签以以
: 下一步是到目前为止我们所学的所有标签中最重要的一步。body标签包含页面的实际主体，所有用户都可以看到。这以以。此标签中包含的所有内容都将显示在网页上，无论是文字、图像、音频或视频，甚至是链接。我们将在后面的章节中看到如何使用各种标签将提到的内容插入到我们的网页中。

整个代码模式如下所示：

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

此代码不会显示任何内容。它只是展示了如何编写HTML代码的基本模式，并将页面标题命名为Geeksforgeks。是HTML中的注释标记，它不读取该标记中的行。

CSS（层叠样式表）：

CSS 用于对网站上的HTML内容进行样式化。这包括修改页面颜色、字体系列、字体大小、元素定位等。 CSS有三种类型：

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

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

<head>

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

</head>

内部风格： 放置在每个网页文档的顶部，然后再列出任何内容。内部样式的CSS代码写在HTML文件本身的头部标记之间。内部样式很容易找到，它们的优先级仅次于外部样式表。

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

输出：

 Hello, GeeksforGeeks

内联样式： 放在你需要的地方，在你想要装饰的文字或图形旁边。内联样式可以插入HTML代码的中间。这样就可以真正自由地指定每个网页元素，但是，这会使网站的维护工作变得困难。

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

输出：

 Hello, GeeksforGeeks

但是一个网站可以有多个样式表吗？ 是的，但是会有一些规则被遵守。看看下面的例子。

假设外部样式表名称为 gfg。css 对于

元素具有以下样式：

h1 {

color: orange;

}

如果内部样式是在链接到外部样式表（如下所示）之后定义的，

元素将为“绿色”：

例子：

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

输出：

Hello, GeeksforGeeks

但是，如果在链接到外部样式表之前定义了内部样式，

元素将是“橙色的”：

例子：

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

输出：

Hello, GeeksforGeeks

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

使用JavaScript的优点是：