web

Web开发入门

Getting started with web front-end and back-end development

Posted by LXG on October 10, 2021

Web 入门

服务器端编程

JavaScript Demo

Web前端知识准备

  • HTML
  • CSS
  • JavaScript

web_front

HTML

超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。

HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。

web_html

HTML5

HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步提升。

CSS

CSS (Cascading Style Sheets,层叠样式表)是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。一条 CSS 的样式定义包括属性和属性值,它们共同决定网页的外观。

和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

css-declaration

css_rendering

JavaScript

JavaScript 编程语言允许你在 Web 页面上实现复杂的功能。如果你看到一个网页不仅仅显示静态的信息,而是显示依时间更新的内容,或者交互式地图,或者 2D/3D 动画图像,或者滚动的视频播放器,等等——你基本可以确定,这需要 JavaScript 的参与。

web_execution

在 HTML 和 CSS 集合组装成一个网页后,浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前,网页的结构和样式已经就位。

服务器端代码 vs 客户端代码

服务器端(server-side)和 客户端(client-side)代码。客户端代码是在用户的电脑上运行的代码,在浏览一个网页时,它的客户端代码就会被下载,然后由浏览器来运行并展示。这就是客户端 JavaScript。

而服务器端代码在服务器上运行,接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括:PHP、Python、Ruby、ASP.NET 以及…… JavaScript!JavaScript 也可用作服务器端语言,比如现在流行的 Node.js 环境

前端框架

现代JavaScript框架的到来加快了打造高度动态化和交互性强的应用程序的速度. 框架 就是提供该如何构建应用程序的意见的库。这些意见能使应用具有可预测性和同质性。可预测性让软件能在扩展到很大规模的同时仍保持可维护性。可预测性和可维护性对于一个软件的长久健康运行是十分重要的。

Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap

React

React是 Facebook 开发的框架,用于构建页面、javascript库。主要功能是对DOM操作,声明式设计,更快的开发出web应用系统。

React

Angular

Angualr 是一款来自谷歌的开源的 web 前端框架,诞生于 2009 年,由 Misko Hevery 等 人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。

Angular

Vue

渐进式 JavaScript 框架

Vue

服务器端编程

网络浏览器通过超文本传输协议 (HTTP)来和网络服务器 进行通信。当你在网页上点击一个链接,或提交一个表单,再或进行一次搜索时,一个HTTP请求就从你的浏览器发送到了目标服务器。

相应一个请求的成功回应包含被请求的资源(比如一个新的HTML页面,或者图片等),然后这些会被展示在客户端的网络浏览器上。

静态网站

静态网站是指无论何时当一个特定资源被请求的时候都返回相同的被硬编码的内容

static_web_arch

动态网站

动态网站是指,一些响应内容只有在被需要的时候才会生发的网站。在一个动态网站上,页面通常是通过将数据库的数据植入到HTML模板中的占位符中而产生的(这是一种比使用静态网站有效得多的存储大量内容的方式)

动态网站可以基于用户提供的个人信息或者偏好设置来返回不同的数据,并且可以展示作为返回一个回应的内容的一部分的其他操作(比如发送通知)。

大多数支持动态网站的代码必须运行在服务器上。编写这些代码就是所谓的“服务器端编程”(有些时候也称“后端脚本编写”)。

web_app_steps

对于动态资源的请求则会指向(2)服务器端代码(在图中显示为Web Application(网络应用))。在处理“动态请求”时,服务器会首先解释请求,从数据库中读取被请求的信息,然后将这些被检索的信息组合到HTML模板中(4),最后返回一个包含所生成的HTML页面的回应(5,6)

服务器端框架

服务端web框架

  • Django (Python)
  • Flask (Python)
  • Express (Node.js/JavaScript)
  • Ruby on Rails (Ruby)
  • ASP.NET
  • Mojolicious (Perl)

服务器编程语言

web_language

Django Web 框架(python)

Django 是一个高级的 Python 网络框架,可以快速开发安全和可维护的网站。由经验丰富的开发者构建,Django负责处理网站开发中麻烦的部分,因此你可以专注于编写应用程序,而无需重新开发。 它是免费和开源的,有活跃繁荣的社区,丰富的文档,以及很多免费和付费的解决方案。

Express Web Framework (Node.js/JavaScript)

Node(正式名称 Node.js)是一个开源的、跨平台的运行时环境,有了它,开发人员可以使用 JavaScript 创建各种服务器端工具和应用程序。

Express 是最流行的 Node 框架,是许多其它流行 Node 框架 的底层库。

网站开发的基本步骤

  1. 选择云服务器(阿里云,腾讯云,百度云)
  2. 购买域名
  3. 页面设计,效果图
  4. 程序开发
  5. 程序测试
  6. 购买https证书
  7. 程序上线
  8. 网站备案