[关闭]
@zhshh 2021-03-02T13:27:57.000000Z 字数 6370 阅读 561

web 入门

@zhshh web

前言

安排
由于时间安排为 2~3 次每次约 1~2 小时的内容
因此这里不涉及太多具体的细节知识。而是以整体的结构为主，对于某个方面有兴趣的可以进一步的去学习。
内容以了解和掌握 web 的基础知识和大致方向为主，会涉及到一些基本的 web 知识，HTML CSS 以及 JavaScript 的简单入门和一些前后端框架的初步认知

注意事项
1. 于社团内时间安排问题，无法详细的从零基础开始讲起。而且为了更好的与其他的方向结合，以及夹带私货，下面的部分内容仅仅适用于配合本次讲授，如果自学并不建议完全按照本文进行。**
2. 因为时间原因，我们没有办法在几个小时内教会你写一个什么什么的网站，而是更侧重于概况，使得对于 web 有一个比较详细的了解。（有哪些方向，涉及到哪些技术和领域，需要学些什么，网站是怎么运行的等等）

我该学什么

虽然我们尽量的概括来说，但是前端三剑客始终是一个绕不开的话题
首先我自己也不是很擅长 CSS，所以即使对应方向也不会涉及太复杂的 CSS 的内容
而前端也是一个复杂的方向（分支很多，而且技术迭代很快），虽然常说的 HTML CSS JS 是基础中的基础，但是不是全部，还有相当多的前端框架、技术辅助开发。
甚至在一些比较大的项目中，用到的内容和框架的部分，远远超过这三者原生代码本身。

下面是我想的一些常见的项目的类别和对于三个语言的要求（不一定准确，只是大概印象，另外也不要去拘泥于某一个方向，学的东西是通用的，学会了，哪个都能做）

分类 例子 HTML CSS JS 后端
导航/汇总站 首页等内容 ★★★★☆ ★★★★☆ ★☆☆☆☆ ★★☆☆☆
内容站 博客，资源站 ★★★☆☆ ★★★☆☆ ★★★☆☆ ★★★☆☆
后台 管理后台、数据展示 ★☆☆☆☆ ★★☆☆☆ ★★★★☆ ★★★★★
工具 在线XX（比如计算器），cyberchef等 ★★★☆☆ ★★☆☆☆ ★★★★★ ★★★☆☆
论坛 社区、论坛（某种意义评论区也算是） ★★★★☆ ★★★☆☆ ★★★★☆ ★★★★★

*如果项目不依赖后端，忽略后端一项
*原生程序/框架（如electron），以及 web assembly 不在考虑范围内

HTTP 的发展史

这里和下一个章节的 简单理解 HTTP 协议 仅在本次讲的时候用到（因为和之前的 python 相衔接（后面会有 python 手动实现 web 后端的内容），以及考虑到知识水平能够理解，实际学习直接从三个语言开始即可

简单的理解 HTTP 协议

1. 什么是前端，什么是后端

比较通俗的介绍一下前端和后端

前端一般指用户侧，比如用户能直接看到的、使用到的内容，而后端一般是用来进行数据处理、数据库等操作，控制实际的流程

前端的话，最常见的就是 HTML CSS JS（后面会展开）
后端的话，比如处理、数据库，或者更复杂的一些交互

本质上 用户操作 → 前端 → 发送数据 → 后端接收数据、做出反应 → 返回数据 → 前端 → 呈现 的一个流程

2. 按下一个搜索按钮之后，发生了什么

这个标题是一个很经典的一个面试题目，出题的本意是这个是个很有开放性的题目，回答者可以从任何一个角度回答（比如面试鼠标厂，你可以从电路、硬件、驱动回答你的按键是如何传递的，如果是做系统的话，可能就是系统是怎么把鼠标信号传给了浏览器，如果是前端，可能更侧重怎么发送的请求，而如果是后端，则是侧重这个请求是怎么传递怎么处理的。
但是现在这个问题emm...因为网上的参考答案太多，也丧失了开放性的意义

实际演示一下，这里重新写个吧 TODO

运行在前端（浏览器）的内容
1. 按钮事件的响应
2. 发送了一条 GET/POST

这里开始，到了后端
1. 收到消息
2. 分析路径和协议，找到 目标部分
3. 进行处理
4. 返回内容

  1. 收到了一个 200 的信息
  2. 显示出来

3. 他们是如何传递信息的

裸的HTTP请求字段(curl -v)

  1. zsh2517@AMD-zsh2517:/mnt/c/Users/zsh2517$ curl http://example.com -v
  2. *   Trying 2606:2800:220:1:248:1893:25c8:1946:80...
  3. * TCP_NODELAY set
  4. *   Trying 93.184.216.34:80...
  5. * TCP_NODELAY set
  6. * Connected to example.com (2606:2800:220:1:248:1893:25c8:1946) port 80 (#0)
  7. > GET / HTTP/1.1
  8. > Host: example.com
  9. > User-Agent: curl/7.68.0
  10. > Accept: */*
  11. >
  12. * Mark bundle as not supporting multiuse
  13. < HTTP/1.1 200 OK
  14. < Age: 247279
  15. < Cache-Control: max-age=604800
  16. < Content-Type: text/html; charset=UTF-8
  17. < Date: Mon, 01 Mar 2021 15:55:10 GMT
  18. < Etag: "3147526947+ident"
  19. < Expires: Mon, 08 Mar 2021 15:55:10 GMT
  20. < Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
  21. < Server: ECS (oxr/8304)
  22. < Vary: Accept-Encoding
  23. < X-Cache: HIT
  24. < Content-Length: 1256
  25. <
  26. <!doctype html>
  27. <html>
  28. <head>
  29.     <title>Example Domain</title>
  31.     <meta charset="utf-8" />
  32.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  33.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  34.     <style type="text/css">
  35.     body {
  36.         background-color: #f0f0f2;
  37.         margin: 0;
  38.         padding: 0;
  39.         font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  41.     }
  42.     div {
  43.         width: 600px;
  44.         margin: 5em auto;
  45.         padding: 2em;
  46.         background-color: #fdfdff;
  47.         border-radius: 0.5em;
  48.         box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
  49.     }
  50.     a:link, a:visited {
  51.         color: #38488f;
  52.         text-decoration: none;
  53.     }
  54.     @media (max-width: 700px) {
  55.         div {
  56.             margin: 0 auto;
  57.             width: auto;
  58.         }
  59.     }
  60.     </style>
  61. </head>
  63. <body>
  64. <div>
  65.     <h1>Example Domain</h1>
  66.     <p>This domain is for use in illustrative examples in documents. You may use this
  67.     domain in literature without prior coordination or asking for permission.</p>
  68.     <p><a href="https://www.iana.org/domains/example">More information...</a></p>
  69. </div>
  70. </body>
  71. </html>
  72. * Connection #0 to host example.com left intact
  1. x > GET / HTTP/1.1
  2. x > Host: example.com
  3. x > User-Agent: curl/7.68.0
  4.   > Accept: */*
  1. x < HTTP/1.1 200 OK
  2.   < Age: 247279
  3.   < Cache-Control: max-age=604800
  4. x < Content-Type: text/html; charset=UTF-8
  5. · < Date: Mon, 01 Mar 2021 15:55:10 GMT
  6. · < Etag: "3147526947+ident"
  7. · < Expires: Mon, 08 Mar 2021 15:55:10 GMT
  8. ` < Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
  9. x < Server: ECS (oxr/8304)
  10.   < Vary: Accept-Encoding
  11.   < X-Cache: HIT
  12. x < Content-Length: 1256
  13.   <
  14. <!doctype html>
  15. <html>
  16. <head>

着重说一下带有 x 的内容（ · 表示缓存相关的）

常见的状态码：

状态 英文 解释
200 OK 请求成功。
301 Moved Permanently 永久移动。资源已经移动到了新的地址
302 Found 临时移动。与301类似。但资源只是临时被移动
304 Not Modified 所请求的资源未修改，（缓存相关）
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 未找到，最常见的了（如果自己的网站，建议自行定制404页面）
405 Method Not Allowed 方法错误，很常见于自己写请求，然后选错方法了
500 Internal Server Error 服务器内部错误，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
418 I'm a teapot 一些网站使用此响应来处理他们不想处理的请求，例如自动查询。（这是个愚人节彩蛋）

301：永久移动，会被浏览器记住，以后会直接自动跳到新的地址，因此慎用（如果不打算永久改变）
302：临时移动，每次都会重新请求这个地址，如果返回302再遵循跳转
307：类似于 302（参考 HTTP 中的 301、302、303、307、308 响应状态码），现在 303 307 等都很少见了，主要 302
304：和缓存机制相关，用户请求时带有一个当前本地缓存信息的标记，如果服务器认为没有更新（无须重新加载）返回 304，此时不需要再次返回该内容
418：HTTP 418 I'm a teapot 客户端错误响应代码表示服务器拒绝冲泡咖啡，因为它是个茶壶。该错误是超文本咖啡壶控制协议的参考，和 1998 年愚人节的玩笑。

4. 前端和后端的关系

  1. 前端后端写到一块
    php, jinja 模板语言
  2. 前后端分离
    前后端分离与 RESTful API
  3. SSR（后端渲染）

语言

这三个语言是干嘛的？

HTML

超文本标记语言，从字面意思来看，1. 超文本 2. 标记语言。

  1. 超文本，这个词现在已经不怎么见到了，维基百科如下

    超文本（英语：Hypertext）是一种可以显示在电脑显示器或电子设备上的文本，现时超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他字段或者文档的超链接，允许从当前阅读位置直接切换到超链接所指向的文字。
    ---- 维基百科

  2. 标记语言

    是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。
    ---- 维基百科

    比如使用 <i> 标识斜体，使用 <b> 标识加粗等等，这些标记可以组合，比如 普通<i>斜体<b>粗斜</b>斜体</i>普通<b>粗体<i>粗斜</i><b>

    普通斜体粗斜斜体普通粗体粗斜

    常见的标记语言比如如下

    语言 代码 效果
    HTML <b>粗体</b> 粗体
    markdown **粗体** 粗体
    $\textbf{粗体}$ 粗体
    $\sum\limits_{i=1}^{n}i=\frac{n\times(n+1)}{2}$
    • 本身也是一个排版系统（基于 ），而在 markdown 中，主要利用 去书写公式，因此有的时候也指公式输入的一种工具

CSS 层叠样式表

CSS可以有多种引入方式，一个网页可以引入多个CSS文件，同一种CSS规则可以被反复多次添加。这使得CSS的使用方式非常灵活，但也会频繁地出现规则冲突。同时对一个网页元素设定无法并存的2种样式时，就会引起冲突。CSS的特色之一就是其解决规则冲突的方案。CSS的规则冲突可以分为不同来源之间的规则冲突和同一来源内部的规则冲突。CSS分层次、立体化的比较不同规则的优先级的方式，就是所谓层叠性(cascading)的体现。(https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8)

样式表

JavaScript

真正意义上的编程语言，前面的 HTML CSS 经常被开除编程语言籍

与 ECMAScript ts 的关系，变种，nodejs等等，解释器和编译器

HTML

标签，常见的标签，hx hr br p style script

CSS

这里只讲 flex 盒模型 布局（我也不太熟..）

JavaScript

JavaScript 简称 JS
JavaScript 和 Java 有什么关系？（雷锋和雷峰塔有什么关系）

JS 语法基础

默认 C/C++/python 基础

JS 的面向对象

(https://juejin.cn/post/6844903840932691975)

  1. 面向对象、原始类型等等的东西
  2. {} 在 js 很常用

JSON

JS 闭包和 this 指针

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

异步操作

DOM 树

什么是 DOM 树
JS 操作 DOM 树
（emm 简单语法，以及 innerXXX, getXXXbyXX, document.write, console.log(), alert, window.location, history.push 等等）

前端框架

界面 UI，以 BootStrap 为例

引入必要元素然后布局

交互，以 JQuery 为例

$()，常见的修改页面内容的东西（比如append等等）
$.ajax/post/get等等

web 应用框架，以 Vue 为例（和小程序类似）

为什么不写原生的 HTML？

后端

从零写一个简单的 web 服务

手动实现 HTTP 的基本协议

解析路径

解析参数

API

动态页面

flask

路由

路由的概念

模板引擎

THE END

其实如果时间允许，最好的项目是手写一个博客系统（前后端框架），并在自己的博客上发表一篇文章...但是涉及到东西太多而且时间完全不够，有兴趣的可以去试试，可以使用各种框架，没必要反复造轮子
（按照原计划：前端 JQuery + Bootstrap，后端 Flask）

只要不是开箱即用的博客系统（比如 wordpress）即可，比如使用 HEXO / Jekyll 等博客工具，自行写渲染的模板也可以（但是这些方向，又是一个大坑..涉及到的东西不少）

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注