web网页(web网页制作) 收藏 0

你常看的网站是web前端还是后端？一文告诉你答案

我们日常使用计算机上网，总会听到web前端、web后端等词语，那么前端和后端究竟是什么呢？它们又有什么区别？

2015年9月16日，在网络营销处，27岁的徐旸和员工更新公司网页，通过网络和客户交流产品销售信息。（曹晓东/人民图片）

（声明：凡带有“人民图片”字样图片，系版权图片，受法律保护，使用（含转载）需付费，欢迎致电购买：010-65368384或021-63519288。）

其实，web前端是呈现给用户的视觉和基本操作，主要负责页面的展示，即用户看得见的内容。我们日常浏览的网页，如新闻网站、体育新闻网站、电商购物网站等，都属于web前端。

web前端向我们展示的内容包括web页面结构、web外观表现、web层面的交互实现。具体来说，web页面结构就是网页是如何排版的，分成几个部分，类似黑板报一样，需要人进行具体设计，例如百度搜索的输入框，摆放在页面的正中间等等；而web的外观表现，则是比如页面采用什么颜色，采用什么字体等等；至于web层面的交互实现，举例来讲就是我们在浏览购物网页时，将鼠标放置于一个商品上并进行点击，就会跳转到另一个新页面，这就是一种和用户的交互。

相较于web前端，web后端更关注产品的服务技术实现。它运行在服务器上，主要负责与数据库进行交互，从而处理相关业务，需要考虑如何存储数据，实现功能，维持平台的稳定性，提升平台的性能，实现对前端的响应和请求。例如，我们在百度搜索中输入“天猫”，页面就会跳转到与天猫有关的其他界面，其过程是：前端浏览器发出请求，后端服务器作出响应，并返回给前端相应的数据，前端再把这些数据展示到网页上，这就得到了我们想看到的页面。

再如，我们在浏览天猫商城的网页，准备进行购物时，首先要登陆账号密码并点击登录按钮，页面即跳转到新界面，显示登陆成功。这也是前端先向后端服务器发出请求，后端服务器与已存储的账号、密码数据库进行交互，并对前端请求作出响应的过程。

目前，在互联网企业中都会有相应的前端工程师和后端工程师，一般来说，工程项目都需要前端开发人员和后端开发人员团队协作，共同完成。伴随着大数据时代的发展，即使是不从事互联网技术工作的人们，也应该适当了解一些相关的基础知识，才能更好地融入这个日益信息化的社会。

本文由东北大学计算机科学与工程学院副教授信俊昌进行科学性把关。

什么是WEB？WEB起到什么作用?

WEB名词解释

\”Web\” 是 \”World Wide Web\”（万维网）的缩写，它是一个通过互联网访问的信息系统。Web 主要由以下几部分组成：

1. 超文本文件：这是指网页文档，通常是用 HTML (HyperText Markup Language) 编写的。HTML 文件可以包含文本、图片、视频、音频和其他多媒体内容，并且可以通过链接相互关联。
2. URL（统一资源定位符）：每个网页都有一个唯一的地址，称为 URL。用户可以通过浏览器输入这个地址来访问特定的网页。
3. HTTP/HTTPS（超文本传输协议/安全超文本传输协议）：这是一种用于从 web 服务器向客户端（如浏览器）传输网页的应用层协议。HTTPS 是 HTTP 的安全版本，提供了加密的数据传输。
4. Web 浏览器：这是用来显示网页内容并允许用户与之交互的软件程序。常见的浏览器有 Google Chrome、Mozilla Firefox、Microsoft Edge 和 Safari 等。
5. Web 服务器：这是运行在互联网上的计算机，它们存储了网页文件并通过 HTTP/HTTPS 协议响应来自全球用户的请求。
6. 超链接：这是 web 的核心特性之一，它使得文档和资源之间能够相互连接。超链接可以是文本或图像的一部分，点击它可以将用户带到另一个网页或同一网页的不同部分。
7. 多媒体元素：除了文字，web 页面还经常包含图片、视频、音频等多媒体元素，以提供更丰富的用户体验。
8. 脚本语言：像 JavaScript 这样的脚本语言可以在客户端执行，为 web 页面添加动态行为和交互性。
9. 样式表：CSS（层叠样式表）用于定义网页的外观和格式，比如字体大小、颜色、布局等。
10. Web 应用程序：随着技术的发展，web 不仅仅局限于静态页面，还包括了大量的 web 应用程序，这些应用程序可以通过浏览器访问，提供了类似桌面软件的功能和服务。

WEB应该学习什么？

作为前端开发人员，专注于Web前端技术的学习是非常重要的。以下是一个详细的学习指南，涵盖了前端开发所需的关键技能和工具：

• HTML (HyperText Markup Language): 学习如何使用标签构建网页的结构。
• CSS (Cascading Style Sheets): 掌握样式化网页的方法，包括布局、颜色、字体等。
• JavaScript: 理解这门编程语言，它是前端交互性的核心。

• 响应式设计: 学会创建适应不同设备和屏幕尺寸的网页。
• 浏览器开发者工具: 使用 Chrome DevTools 或 Firefox Developer Tools 调试代码和优化性能。
• 版本控制系统:
• Git: 学习如何使用 Git 来管理代码版本，并了解 GitHub/GitLab 等平台。

• React.js: 由 Facebook 开发的用于构建用户界面的 JavaScript 库。
• Vue.js: 一个渐进式 JavaScript 框架，易于上手且功能强大。
• Angular: 由 Google 维护的一个完整的前端框架，基于 TypeScript。
• UI 框架:
• Bootstrap: 流行的 CSS 框架，提供预定义的样式和组件。
• Tailwind CSS: 实用优先的 CSS 框架，允许你直接在 HTML 中编写样式。

• 模块打包工具:
• Webpack, Parcel, 或 Vite: 用于将多个文件合并成一个或几个优化后的文件，便于浏览器加载。
• 任务运行器:
• Gulp, Grunt: 自动化重复性任务，如压缩图片、编译 Sass 等（虽然现在这些功能大多被 Webpack 等打包工具替代）。
• 构建工具:
• Babel: 编译现代 JavaScript 代码为向后兼容的版本。
• ESLint: 静态分析工具，帮助发现潜在问题并保持代码风格一致。
• Sass/SCSS, Less: CSS 预处理器，扩展了 CSS 的功能，支持变量、嵌套规则、混合等功能。

• 懒加载: 推迟加载非关键资源以加快页面初始加载速度。
• 图像优化: 使用适当的格式和大小来减少带宽消耗。
• 缓存策略: 利用浏览器缓存来减少重复请求。

• 单元测试:
• Jest, Mocha: 写测试用例确保代码按预期工作。
• 端到端测试:
• Cypress, Puppeteer: 测试整个应用程序的行为，从用户的角度出发。

• 可访问性 (Accessibility): 确保你的网站对所有用户都友好，包括那些有残障的人士。
• SEO (搜索引擎优化): 让你的网站更容易被搜索引擎索引和找到。

• 关注社区和技术博客: 例如 MDN Web Docs, Stack Overflow, Reddit 的 r/webdev 等。
• 参加在线课程和教程: 如 freeCodeCamp, Codecademy, Udemy 等提供的课程。
• 参与开源项目: 在 GitHub 上贡献代码，提高自己的技能水平。

• Progressive Web Apps (PWAs): 学习如何创建类似原生应用的 Web 应用程序。
• Web Components: 使用标准组件化的方式来构建 Web 应用。
• TypeScript: 学习这个静态类型的超集，它可以帮助编写更健壮的 JavaScript 代码。

通过掌握上述技术和工具，你可以成为一名合格的前端开发人员。根据个人兴趣和市场需求，可以选择深入某些特定领域进行专业化发展。持续学习和实践是提升技能的关键。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com