新增两份ppt

ppt/attack-with-defense-lesson/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+*.local
+index.html
+.remote-assets
+components.d.ts

ppt/attack-with-defense-lesson/.npmrc

@@ -0,0 +1,2 @@
+# for pnpm
+shamefully-hoist=true

ppt/attack-with-defense-lesson/README.md

@@ -0,0 +1,11 @@
+# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
+
+To start the slide show:
+
+- `npm install`
+- `npm run dev`
+- visit http://localhost:3030
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev on [documentations](https://sli.dev/).

ppt/attack-with-defense-lesson/components/Counter.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
+    <button
+      border="r gray-400 opacity-50"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l gray-400 opacity-50"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

ppt/attack-with-defense-lesson/netlify.toml

@@ -0,0 +1,11 @@
+[build.environment]
+  NODE_VERSION = "14"
+
+[build]
+  publish = "dist"
+  command = "npm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

ppt/attack-with-defense-lesson/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^0.29.2",
+    "@slidev/theme-default": "*",
+    "@slidev/theme-seriph": "*"
+  },
+  "name": "attack-with-defense-lesson"
+}

ppt/attack-with-defense-lesson/vercel.json

@@ -0,0 +1,5 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}

ppt/attack-with-defense-lesson/第一课-计算机基础.md

@@ -0,0 +1,733 @@
+---
+# try also 'default' to start simple
+theme: seriph
+# random image from a curated Unsplash collection by Anthony
+# like them? see https://unsplash.com/collections/94734566/slidev
+background: http://oss.vaala.ink/sky.jpg
+# apply any windi css classes to the current slide
+class: 'text-center'
+# https://sli.dev/custom/highlighters.html
+highlighter: shiki
+# some information about the slides, markdown enabled
+info: |
+  ## PPT of 创新课
+---
+
+# 网络攻防实践
+
+<div v-click>
+创新创业课程--————基础
+</div>
+
+---
+
+# 计算机技术素养漫谈
+
+## 背景
+
+在承受学校安排的考试周和多重课设的压力时，笔者在为制作该ppt查询资料时开启了人生思考模式。且最近一直有写一点东西的想法，于是在移植完课设后打开了文本编辑器开始码字。
+
+<div >
+<img src="http://oss.vaala.ink/img/avatar.png" class="m h-30 rounded shadow">
+</div>
+
+---
+
+# 什么是技术素养？
+
+<v-clicks>
+
+是一种素养~
+
+- 快速上手
+- 上大学学了啥
+- 提升技术力的方向
+
+</v-clicks>
+
+<!--
+某些时候，例如完成课设、大作业的过程中，相信现周围某些dalao上手新技术特别快，拿到一个完全没有接触的新课题时总能在几个小时甚至几十分钟内写出能用的东西QwQ。
+
+又或是在计算机专业的读者在回顾自己大学究竟学了什么东西的时候发现自己从入学到现在似乎没学多少能实际应用的计算机相关知识，但似乎又与入学前有所不同，从而陷入深深的沉思……
+
+笔者想要谈的便是这种 dalao 们赖以快速上手新知识、读者从大学入学到现在所新拥有的东西，也就是技术素养。
+-->
+
+---
+
+# 什么是计算机
+
+<v-clicks>
+
+准确定义：是一种balababal………………………………
+
+- 计算
+- 执行代码
+- 储存数据
+- 连接其他设备
+
+</v-clicks>
+
+<!--
+计算机的准确定义在各个计算机组成原理、汇编语言、计算机系统等计算机科学专业课程的教科书与课程中不厌其烦的多次提到，这里不再赘述，想要了解的读者可以自行查询资料。这里笔者要谈的不是写印刷在纤维素上或刻写在硅片中的定义，是对计算机的感性认知。
+
+回到十几年前，那时智能手机尚未大行其道，笔者在那时拿到了人生中第一台手持智能移动设备——一台安卓pad，具体参数的记忆已经模糊了，不过跑在那台寨板里面的就是Android 2.1，虽然配置非常的拉跨，但的确是一台完整的冯诺依曼机。在划拉阻力极大的电阻屏时我发现了这台设备的操作逻辑非常的自然，执行某功能就是戳上面的小字，想要浏览下面的内容就向下扒。
+
+那么计算机究竟是个什么东西呢？在21世纪，人们已经习惯于不再阅读厂商附赠的产品须知，厂商也顺应消费者的习惯，在很多产品内都仅附带开关机的说明甚至不附带任何纸质说明。但消费者打开新的设备自然的就能知道指点滑动等基本操作，这就是一种计算机素养。
+
+这些与dalao们赖以快速上手新技术所依赖的东西是一样的，当一个东西的原理被理解了后，类似的东西都是触类旁通了。
+
+就像所有的语言都有if else一样，明白了一种语言的结构，其他语言也只是变了一个形式，当理解的原理性的东西多了，技术力自然会大大增加
+-->
+
+---
+
+# Hello World
+
+<v-clicks>
+
+C语言
+
+```c {all}
+#include<stdio.h>
+int main(){
+    printf("Hello World!");
+    return 0;
+}
+```
+
+- 源代码不可执行
+- 需要工具将源代码转换为程序
+- 程序是一个黑框
+
+
+## 疑问
+
+</v-clicks>
+
+<v-clicks>
+
+- 为什么如此之丑陋
+- 为什么不能在其他地方运行
+
+</v-clicks>
+
+<!--
+这就是一个C语言的Hello World，编写完源码后需要将其编译为二进制文件，然后才能在当前计算机系统上运行，完成这个过程后，便会对用C语言写一个程序的过程有了一些认知
+
+这里就存在一个技术素养的问题，当完成了第一个程序过后，虽然不知道书上/教程上每一步让你干的事情到底有什么用，但是最终帮助我们建立了一个编写程序的完整工作流
+
+接触新事物第一步就是要了解这个东西到底该怎么跑起来，宏观的看一个东西非常有助于给读者提供一个了解新技术的原理的视角，简单来说就是先弄一个能用就行的东西，不求甚解的精神
+-->
+
+---
+
+# 从 Hello World.c 到 Hello World.exe
+
+<v-clicks>
+
+需要工具
+
+编译器！
+
+```
+┌───────┐   IDE  ┌─────┐
+│hello.c├───────►│hello│
+└───────┘        └─────┘
+```
+
+集成开发环境 (Integrated development environment)
+
+- `Visual Studio`
+- `Dev cpp`
+- ……
+
+</v-clicks>
+
+<!--
+汇编语言
+
+一步一步指定计算机的行为
+
+一句一句对应机器语言
+
+不同的CPU汇编语言不同
+
+移植需要重新编译
+
+高级语言
+
+汇编语言的打包形式
+-->
+
+---
+
+# 魔法开始
+
+看看源码
+
+```c {0|1|all|all|3|all}
+#include<stdio.h> //balabalabalabala
+int main(){
+    printf("Hello World!"); //printf.o
+    return 0;
+}
+```
+
+<div v-click="1">
+
+1. 替换插入预处理`hello.i`
+
+</div>
+
+<div v-click="2">
+
+2. 编译为汇编`hello.s`
+
+```asm
+main:
+    subq $8, %rsp
+    movl $.LC0, %edi
+    call puts
+    movl $0, %eax
+    addq $8, %rsp
+    ret
+```
+
+</div>
+
+<div v-click="3">
+
+3. 汇编程序 `hello.o`
+
+</div>
+
+<div v-click="4">
+
+4. 链接`printf.o`得到可执行文件`hello`
+
+</div>
+
+<!--
+前面提到由源代码变成可执行程序需要一些工具，实现的主要是和自然语言翻译类似的功能，我们将其称之为编译
+
+我们所说的编译器完成了这个对于人类非常繁琐的一步。
+
+大家在其他课程上应该了解到我们要想将源代码变换成为程序需要用到 `Visual Studio`或者`Dev cpp`之类的工具
+
+这里图中我们将其标注为IDE（集成开发环境 Integrated development environment）
+
+现在我们来分析这个IDE到底干了些啥。再来看看我们的源代码
+
+这个程序实现了在屏幕上（黑框中）输出一个字符串的功能
+
+但是实际上我们并没有通过C语言明确的去操作我们的计算机，事无巨细的指定我们的计算机在显示器的哪个位置用什么颜色输出到哪个像素点。例如我们的程序中用到了一个`printf`函数，这个函数帮助我们输出了这个程序
+
+1. 最开始的#识别到符号，将引用的头文件替换为一整个文件
+
+2. 编译后为汇编代码，汇编代码的每一条指令都对应处理器的一条命令，可以理解为直接对处理器的每种功能进行直接操作
+
+3. 将汇编代码翻译为CPU能读懂的命令，这时候的文件已经是乱码了
+
+4. 链接引用的函数，将乱码文件最终生成为一个可执行文件
+-->
+
+---
+
+# 操作系统如何执行程序
+
+<v-clicks>
+
+代码的运行顺序与程序的结构
+
+思考：程序从哪里开始执行
+
+当然是我们的main函数
+
+```asm
+main:
+    subq $8, %rsp
+    movl $.LC0, %edi
+    call puts
+    movl $0, %eax
+    addq $8, %rsp
+    ret
+```
+
+操作系统与程序的交互约定
+
+从第一行开始！整体搬迁到内存，从头开始执行
+
+</v-clicks>
+
+---
+
+# 计算机硬件
+
+<v-click>
+
+图灵机？
+
+</v-click>
+
+<v-clicks>
+
+- CPU
+- 主存
+- 外设
+
+</v-clicks>
+
+<v-click>
+
+Hello World 用到了
+
+</v-click>
+
+<v-clicks>
+
+- CPU
+- 内存
+- 硬盘
+- 显示器
+
+</v-clicks>
+
+<v-click>
+
+当调用的东西足够多：
+<font color="red">操作系统</font>
+
+</v-click>
+
+<!--
+最基础的计算机必须有计算/存储部件
+
+并且需要连接一些外部设备
+
+我们写出来的Hello World调用了一些计算机硬件资源，使得它成为了一个利用计算机硬件资源实现输出字符串功能的程序
+
+如果调用的资源足够多，写出的功能逻辑足够复杂，那么这个程序就变成了操作系统
+-->
+
+---
+
+# 操作系统内核
+
+<v-click>
+
+调用了很多类型的计算机硬件资源
+
+</v-click>
+
+<v-click>
+
+什么语言？怎么写？
+
+</v-click>
+
+<v-clicks>
+
+- 预处理时不依赖其他库
+- 能够被翻译成汇编语言
+- 链接时不依赖其他文件
+- 实现基本库
+
+</v-clicks>
+
+<v-click>
+
+内核：调用计算机硬件资源
+
+</v-click>
+
+<!--
+回顾前面编译程序的过程，大概的理解一下什么样的语言能写操作系统
+
+依赖其他语言时就不能独立的使用当前语言实现各种功能
+
+-->
+
+---
+
+# 启动操作系统
+
+按下开机按钮后的故事
+
+<v-clicks>
+
+- 通电
+- BIOS (Boot Loader) ：是操作系统的接生婆 `Read Only Memory` 简称 ROM
+- 启动操作系统内核：工作在 RAM 即 `Random Access Memory`
+- 操作系统运行软件
+
+每一步都需要准备，都需要前一级交出控制权
+
+</v-clicks>
+<!--
+按下开机按钮后，电脑会通电，然后第一个工作的就是BIOS，BIOS在电脑看来是一种ROM，里面的内容不可修改，（实际上可以修改）
+BIOS的工作初始化、复制、控制权转移
+操作系统已经存在于内存中(RAM)，CPU依次执行指令
+内存特性：给出一个地址就可以直接读取数据，按字节
+-->
+
+---
+
+# 程序如何执行
+
+程序是什么
+
+<v-clicks>
+
+程序：
+
+- 可执行文件
+
+文件是什么
+
+- 二进制数据集合
+
+> 计算机科学中最重要的思想：抽象
+
+从硬盘到内存到CPU
+
+</v-clicks>
+
+<!--
+程序是一种文件，一种可执行文件，为什么程序如此特殊，和普通的文本文档不同，能够被系统执行。我们对比操作系统的启动过程
+操作系统是由BIOS启动的
+一个CPU一个时刻只能执行一条指令
+操作系统和应用程序运行在同一个CPU上
+操作系统也是一种应用程序，并没有优先级或者其它不同
+都是抽象出来的
+。
+-->
+
+---
+
+# Shell
+
+<v-clicks>
+
+壳
+
+- Windows界面
+- `powershell.exe`
+- `bash`
+
+提供给用户调用内核的功能的软件
+
+- CLI
+- GUI
+
+权限
+
+- 高贵的root
+- 群底层管理员Administrator
+
+试试？ `sudo rm /* -rf`
+
+</v-clicks>
+
+<!--
+内核提供功能非常的复杂，简单的组合并不能发挥内核的实力，所以操作系统提供了一个建立在内核上，调用内核的各种功能，让用户指定调用什么功能的软件，称之为壳，Shell
+
+两类壳都可以调用内核全部的功能，所以他们能实现的功能是一样的，可以在powershell里面尝试一下各种功能
+
+命令行演变到图形界面是一个升级的过程
+
+mc
+
+像素点、文字
+
+二者并没有好坏之分
+
+所以当拿到一个操作系统的壳，就能获取到所在计算机的操作权，能操作壳就是能操作计算机
+
+当然这里的操作权并不是完全自由的，比如在Windows系统中，即使你是管理员，也不能格式化系统所在的C盘，不过在Linux中的权限可以说是完全开放给了用户
+
+假使您是高贵的root用户，可以说这台电脑上的每一个字节都在宁的掌控之中，当然让他删掉自己也是没有任何问题的
+
+手机root
+
+虚拟机
+
+docker
+
+内核
+
+-->
+
+---
+
+# 交互式命令行
+
+<v-clicks>
+
+输入命令得到结果
+
+- shell
+- python
+- nodejs
+
+解释型语言
+
+- 效率低
+- 灵活
+- 跨平台
+
+</v-clicks>
+
+<!--
+运行时直接一行一行输入，仿佛不用进行编译一样直接运行，这就是解释型语言
+
+解释型语言给计算机用户提供了在命令行环境下高效率完成各种任务的途径
+
+解释型语言的运行依赖解释器，不同平台上的解释器不同，但都是按相同的规则翻译
+
+所以解释型语言只需为不同的平台准备不同的解释器，就能实现跨平台
+
+而编译型语言的跨平台则需要为每一个平台都提供编译的所有信息
+
+要有对应的编译器
+
+学习门槛，步骤复杂
+
+脚本语言 vbs
+
+所以跨平台必须为不同的平台编译不同的版本，如果语言的特性过于依赖某些平台的特性，那么这个语言就不适合跨平台
+
+如何实现跨平台，vscode，typora，小程序
+-->
+
+---
+
+# 常见命令
+
+尝试通过CLI shell操作计算机
+
+Power Shell
+
+```
+ls -la
+cd ..
+```
+
+Linux Shell
+
+```
+ls -la
+cat /etc/hostname
+vim
+```
+
+<v-click>
+
+参数？
+
+```c{all|2}
+int main(
+    int argc,char *argv[]
+    )
+```
+
+</v-click>
+
+<!--
+在终端中尝试通过命令操作计算机，其中调用的命令例如ls cat cd，这些都是一个个的程序，性质就和我们写的 Hello World一样，不过他们实现的功能不同
+
+例如ls，就是接受输入，输出的就是当前文件夹的文件
+
+例如cat，接受的是文件路径，输出的就是文件内容
+
+实现起来仔细想想并不是很困难，但就是这些看似简单的软件给我们提供了各种各样的功能
+
+包括我们使用的文件管理器，也是调用了与ls、cd等命令相同的内核层提供的接口来获取数据
+
+所以某种意义上来说，那些漂亮的图形界面就是给黑框的输入和输出套在了一张图片的特定位置上
+
+并且由于图形界面需要提前设计，所以如果软件功能增加就必须要给新的输入和输出重新指定区域，这对于快速开发一个软件工作量是比较大的
+
+而我们的命令行操作，想要新增不同的输入输出，只需要添加一个参数就行
+
+调用时多加几个字母就能完成任务，是非常有优势的
+
+同时也由于这个输入和输出都是字符串的特性，命令行程序很轻松就能调用其他命令行程序
+
+因为他们的输入和输出形式都是字符串，可以实现多程序协同工作的形式
+-->
+
+---
+
+# Linux 程序
+
+<v-click>
+
+我们的Linux怎么获得新程序呢？
+
+Windows
+
+</v-click>
+
+<v-clicks>
+
+- 官网下载
+- 应用商店
+- 神秘网站
+- 自己动手
+
+</v-clicks>
+
+<v-clicks>
+
+Linux
+
+```sh {1|2}
+sudo apt update
+sudo apt install sl
+```
+
+包管理器
+
+```
+cat /etc/apt/sources.list
+```
+
+GitHub.com
+
+</v-clicks>
+
+<!--
+通常情况下我们Windows电脑想要获得一个新程序有两种形式
+
+1. 官网下载安装包，点击安装
+2. 应用商店安装程序
+3. 神秘网站下载终极绿色破解免费汉化版，点击exe运行
+
+运行时就是双击exe或者快捷方式程序就启动了
+
+那么我们的Linux运行一个程序我们已经体验了，那么怎么获得一个新的程序呢
+
+当然是使用Linux发行版都有的一个包管理器，每一种发行版所带的包管理器都有所不同，但是对于我们所使用的debian系来说，包管理器就是apt
+
+这个apt会自动在官方网站的源上寻找你想要安装的包
+
+每一个包都有下载链接，当定位到你想安装的包存在适合你系统的版本时，包管理器就会自动的下载安装，新软件的依赖文件也会自动安装完成
+
+包管理器中源文件的内容指定的就是软件包的来源，访问就能看见各种包的下载链接
+
+包管理器就是通过维护这个源站列表来向用户提供程序下载功能的
+
+pip npm ananconda等
+
+Windows也有包管理器，例如choco，scoop，微软新开发的winget，都是非常的好用
+
+同时也可以在Github上寻你想要的程序
+
+例如本ppt就是使用一个开源项目slidev制作的
+
+-->
+
+---
+
+# 运行程序
+
+<v-clicks>
+
+这还不简单？左键双击！
+
+- 操作系统调用程序
+- 指定文件位置
+
+操作系统寻找：环境变量
+
+```bash {1|2|3}
+env
+where cat
+/bin/cat
+```
+
+用户向程序传递信息：参数
+
+```
+ls -la
+```
+
+Windows->高级
+
+注册表
+
+</v-clicks>
+
+<!--
+前面在Linux尝试运行程序的过程中，我们调用cat程序时直接输入了cat，cat是一个单文件程序，肯定存在于硬盘里面的某个位置，拥有自己的路径
+
+那么操作系统又是如何通过这个名字找到cat程序并顺利运行它的呢
+
+这里用到了一个叫做环境变量的东西
+
+Shell会自动在当前目录、环境变量中寻找你输入给它的东西，如果程序名匹配上了，那么shell就会将你传给shell的参数再次传给程序，就顺利启动这个程序了
+
+Linux向我们提供了一个命令，叫where，是用来向用户说明shell是在哪个地方调用的这个程序，尝试一下where where
+
+找到程序具体路径过后我们就可以直接使用 /bin/cat 调用程序了
+
+在windows中也是一样，装python的时候就会自动加入环境变量
+
+path环境变量的功能就是向操作系统指定全局文件查找范围
+
+echo xxx
+
+其他环境变量的功能是向其他应用提供全局查找范围
+
+注册表用于储存程序和系统的配置/多了会卡
+
+删不干净
+
+-->
+---
+
+# 开源
+
+<v-clicks>
+
+源代码是一种生产资料
+
+各种软件都是由各种语言的代码编写成的
+
+- 开源软件
+- 闭源软件
+
+Github.com
+
+- issue
+- release
+- 开源项目需要有人维护
+- 漏洞可见
+- 功能透明
+- 审核
+
+</v-clicks>
+
+<!--
+由于软件具有可复制的特性，也就是马克思所说的共产主义的生产资料的极大丰富，并且开源开发者大都没有想要通过开源软件获得收益，精神非常的先进
+
+所以我们就是受益者！
+
+Github通过git来进行协作（感觉时间不太够了要不要讲呢）
+
+git diff
+
+git merge
+
+宏观的理解他人开发软件的架构
+
+阅读源码是提升码力的最佳途径
+
+提升技术素养！
+
+思考一个东西是怎么实现的
+
+cat源码
+
+-->

ppt/attack-with-defense-lesson/第一课-计算机网络基础.md

@@ -0,0 +1,331 @@
+---
+type: slide
+slideOptions:
+  transition: slide
+---
+
+# 计算机网络基础
+
+## 互联网是怎样工作的
+
+---
+
+# 概述
+
+使用<a style="color: red">通俗易懂</a>的语言讲述
+
+<span>- 互联网C/S结构和B/S结构的工作模式<!-- .element: class="fragment" --></span>
+
+<span>- 网络中各种设备的具体作用<!-- .element: class="fragment" --></span>
+
+<span>- 协议的功能和使用<!-- .element: class="fragment" --></span>
+
+---
+
+# 互联网的源和汇
+
+<v-clicks>
+
+互联网用以传输信息
+
+互联网的**两端**
+
+从**源**到**汇**
+
+</v-clicks>
+
+<!--
+互联网是设备之间用以传输数据的的途径，一个数据包只能从一个设备发出到另一个设备，数据的源和汇都采用的统一的规则发送和接受数据，在一次通信中，一个设备一般既送出数据也接受数据，互联网在源和汇中一般会存在多个中转点，但我们不着重介绍，本课程中着重介绍源和汇是以何种格式交换和解析数据的
+-->
+
+---
+
+# 客户端
+
+<v-clicks>
+
+从服务端获取资源
+
+一般不会保持长期在线
+
+一般不具有大量的储存空间和强大的计算能力
+
+一般不具有固定的公网IP
+
+</v-clicks>
+
+---
+
+# 服务端
+
+<v-clicks>
+
+储存互联网的资源
+
+一般具有强大的计算和储存能力
+
+一般具有固定的公网IP地址
+
+一般保持24小时长期在线
+
+</v-clicks>
+
+<!--
+客户端和服务端并没有严格的定义，一个设备给别人发东西，那么这个设备就能称之为服务端，一个设备接受数据，就能称之为客户端
+-->
+
+---
+
+# IP地址
+
+你家在哪？
+
+<v-clicks>
+
+IPv4格式为4字节
+
+4,294,967,296  2^32
+
+```text
+111.111.111.111
+```
+
+- 互联网中一切目标都用IP来定位
+
+- 门牌不够长写不下来
+
+- 每一个联网的设备都至少拥有一个IP
+
+- 中转设备一般有不止一个IP （联通两个网络）
+
+- IPV6 `2001:0db8:02de:0000:0000:0000:0000:0e13`
+
+</v-clicks>
+
+<!--
+这个格式非常的通用，数十年前的包放到现在依旧能够正常传播，每一个数据包一定都带有描述IP地址的数据，用以指定该数据包的来源和目的地，中间节点会依照对应的格式将该数据包转发到对应的节点传递下去，在互联网的设计中，每一个节点都遵守相同的规则，那么这个数据包就能传遍全球！中转设备如路由器
+-->
+
+---
+
+# 私有IP地址
+
+<v-clicks>
+
+局域网中的IP地址
+
+- A: `10.0.0.0 ~ 10.255.255.255`
+- B: `172.16.0.0 ~ 172.31.255.255`
+- C: `192.168.0.0 ~ 192.168.255.255`
+
+在运营商的路由器中不存在路由目的地址
+
+</v-clicks>
+
+---
+
+# 端口
+
+抽象的力量
+
+<v-clicks>
+
+现状：
+
+- 操作系统中有很多程序同时都想通讯
+
+- 网络中有很多设备都想通讯
+
+> 数据包送到家里的某个人
+
+端口！
+
+</v-clicks>
+
+---
+
+# 在浏览器中输入网址按下回车后发生了什么!
+
+<v-clicks>
+
+访问目标
+
+- 服务器的地址
+
+- 想要得到的数据
+
+- 自己的地址
+
+</v-clicks>
+
+<!--
+想要访问一个目标首先要知道目标在哪，然后就是要确定客户端想要得到什么数据，最后要附上自己的地址，以便于服务器将你想要的数据发给你
+-->
+
+---
+
+## 1.获取到地址
+
+<v-clicks>
+
+DNS协议，解析域名
+
+域名==IP地址
+
+得到地址！
+
+```
+┌─────────┐          ┌────────────┐
+│baidu.com├─────────►│39.156.69.79│
+└─────────┘          └────────────┘
+```
+
+这是浏览器的工作
+
+</v-clicks>
+
+---
+
+## 2.发送获取数据的请求
+
+<v-clicks>
+
+浏览器根据你输入的网址和刚刚得到的IP地址自动生成一个固定格式的请求发送给服务器
+
+```
+┌──────┐          ┌─────────┐
+│Chrome├─────────►│baidu.com│
+└──────┘          └─────────┘
+```
+
+- 该格式称为HTTP协议
+
+</v-clicks>
+
+---
+
+## 3.服务器查找数据
+
+<v-clicks>
+
+接收到数据包解析，本质是文档
+
+![](https://docs.vaala.cloud/uploads/upload_fde5a7678d3286a7790a926e51632ec7.png)
+![](https://docs.vaala.cloud/uploads/upload_2e39dcd4db6b4bba1cf06f1c83d107cd.png)
+![](https://docs.vaala.cloud/uploads/upload_99a294911f74c844f28f4d3cd628a859.png)
+
+</v-clicks>
+
+---
+
+## 4.服务器返回资源
+
+<v-clicks>
+
+资源=服务器查找到的资源+数据包的基础数据
+
+```
+┌─────────┐          ┌──────┐
+│baidu.com├─────────►│Chrome│
+└─────────┘          └──────┘
+```
+
+如果没有找到资源则会返回对应的错误
+
+</v-clicks>
+
+---
+
+## 5.浏览器解析数据将其变为文档
+
+<v-clicks>
+
+得到的数据由浏览器根据html/css/js语法解析为对应的页面
+
+这时候的工作都在客户端上进行
+
+</v-clicks>
+
+---
+
+## 整个流程
+
+<v-clicks>
+
+```
+                            ┌───────┐        /        ┌─────────┐
+┌─────────────────┐         │       │ ──────────────► │baidu.com│
+│http://baidu.com/│ ──────► │Chrome │                 │(x.x.x.x)│
+└─────────────────┘         │       │ ◄────────────── │         │
+                            └───────┘  balabalabala.. └─────────┘
+
+                               ▲ │
+                               │ │
+                        x.x.x.x│ │baidu.com
+                               │ │
+                               │ ▼
+
+                             ┌─────┐
+                             │ DNS │
+                             └─────┘
+```
+
+</v-clicks>
+
+---
+
+# 服务器接受请求
+
+<v-clicks>
+
+Python!
+
+```bash
+python3 -m http.server 8080
+```
+功能？
+```python
+from flask import Flask
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return '<h1>Hello World</h1>'
+if __name__ == '__main__':
+    app.run()
+```
+
+</v-clicks>
+
+---
+
+# 前端与后端
+
+<v-clicks>
+
+浏览器与服务器
+
+</v-clicks>
+
+---
+
+# 代理服务器
+
+<v-clicks>
+
+- 正向代理
+
+- 反向代理
+
+</v-clicks>
+
+---
+
+# 思考
+
+<v-clicks>
+
+利用前面提到的东西搞事情？
+
+- DNS隧道
+
+</v-clicks>