Web入门

什么是前端?

任何与操作系统打交道的界面都可以称之为"前端"

例如:手机界面(app) 电脑界面(软件) 平板界面(软件)

什么是后端?

不需要和用户打交道,不需要呈现给用户的逻辑结构,后端是控制核心逻辑的运行;

什么是全栈?

通俗的理解为前后端都会,但是不止于此;

学习web路线

接下来本类博文会分享前端的学习笔记,学习前端的路线是怎么样的呢?

从前端三剑客(HTML、CSS、JS)到框架(JQuery、Bootstrap)到”CV大法”·····

前端基础

HTML、CSS、JavaScript

  • HTML:标签
  • CSS:选择器和属性
  • JavaScript:基础语法和BOM&DOM

三剑客的作用

  • HTML:超文本标记语言 (HTML) 是用于构建 Web 内容并赋予其含义和目的的代码;
  • CSS:级联样式表 (CSS) 是用于设置网站样式的代码;
  • JavaScript :用于向网站添加交互式功能的编程语言;

BS架构

我们学习Web的目的是为了更好的编写我们的BS架构程序,我们在编写TCP服务端的时候,针对客户端的选择可以是自己写的客户端代码也可以是浏览器充当客户端(bs架构本质也是cs架构);

数据格式

如果我们在自己编写的服务端发送数据浏览器不识别,原因在于每个人的服务端发送的数据格式千差万别,浏览器有浏览器识别的标准;

这样统一格式的目的?

浏览器可以访问很多的服务端,如何做到无障碍与这么多不同程序员开发的软件实现数据交互?

主要原因:

  1. 所选的浏览器自身功能强大,可以自动识别,但是不推荐这样,过于消耗资源
  2. 统一与浏览器交互的数据方式,那么这时候就有了HTTP协议等,推荐

HTTP协议

通俗的理解协议就是大家共同认可的标准;

HTTP协议:规定了浏览器与服务端之间数据交互的方式及其他事项,如果我们开发的时候不遵循该协议 那么浏览器就无法识别我们的网站

四大特性

  1. 基于请求响应:服务端永远不会主动给客户端发消息 必须是客户端先发请求,如果想让服务端主动给客户端发送消息可以采用其他网络协议;

  2. 基于TCP/UDP、IP作用于应用层之上的协议

    OSI七层:应(默认使用HTTP协议),表,会,传,网,数,物

  3. 无状态:不保存客户端的状态信息,每次过来都仿佛第一次看见

  4. 无连接/短连接:两者请求响应之后立刻断绝关系

数据格式

主要有以下两种:

请求格式:

请求首行(http协议版本,网络请求的方法)
请求头(一大堆k,v键值对)
/r/n # 换行符不能省略
请求体(存放的是一些数据,并不是每种请求方式都有请求体,get没有请求体,post有请求体) # 请求方式
get:朝服务器索要数据,比如输入网址获得相应的数据
post:向服务器提交数据,比如用户登录输入用户名和密码后,提交到后端做身份校验

响应格式:

响应首行(http协议版本,网络请求的方法)
响应头(一大堆k,v键值对)
/r/n # 换行符不能省略
响应体(交给给浏览器展示给用户看的数据)

HTTP 状态码分类

HTTP 状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)

分类 分类描述
1** 信息,服务器收到请求,需要请求者继续执行操作
2** 成功,操作被成功接收并处理
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求
5** 服务器错误,服务器在处理请求的过程中发生了错误
# 注意
公司还会自定义状态码 一般以10000开头
参考:聚合数据

状态码列表

状态码 状态码英文名称 中文描述
100 Continue 继续。客户端应继续其请求
101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议
200 OK 请求成功。一般用于GET与POST请求
201 Created 已创建。成功请求并创建了新的资源
202 Accepted 已接受。已经接受请求,但未处理完成
203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本
204 No Content 无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档
205 Reset Content 重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域
206 Partial Content 部分内容。服务器成功处理了部分GET请求
300 Multiple Choices 多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303 See Other 查看其它地址。与301类似。使用GET和POST请求查看
304 Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305 Use Proxy 使用代理。所请求的资源必须通过代理访问
306 Unused 已经被废弃的HTTP状态码
307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
400 Bad Request 客户端请求的语法错误,服务器无法理解
401 Unauthorized 请求要求用户的身份认证
402 Payment Required 保留,将来使用
403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面
405 Method Not Allowed 客户端请求中的方法被禁止
406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
407 Proxy Authentication Required 请求要求代理的身份认证,与401类似,但请求者应当使用代理进行授权
408 Request Time-out 服务器等待客户端发送的请求时间过长,超时
409 Conflict 服务器完成客户端的 PUT 请求时可能返回此代码,服务器处理请求时发生了冲突
410 Gone 客户端请求的资源已经不存在。410不同于404,如果资源以前有现在被永久删除了可使用410代码,网站设计人员可通过301代码指定资源的新位置
411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息
412 Precondition Failed 客户端请求信息的先决条件错误
413 Request Entity Too Large 由于请求的实体过大,服务器无法处理,因此拒绝请求。为防止客户端的连续请求,服务器可能会关闭连接。如果只是服务器暂时无法处理,则会包含一个Retry-After的响应信息
414 Request-URI Too Large 请求的URI过长(URI通常为网址),服务器无法处理
415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
416 Requested range not satisfiable 客户端请求的范围无效
417 Expectation Failed 服务器无法满足Expect的请求头信息
500 Internal Server Error 服务器内部错误,无法完成请求
501 Not Implemented 服务器不支持请求的功能,无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应
503 Service Unavailable 由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504 Gateway Time-out 充当网关或代理的服务器,未及时从远端服务器获取请求
505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本,无法完成处理

案例:简易的BS架构

# 浏览器做客户端,本机做服务端
import socket server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen() while True:
sock, addr = server.accept()
while True:
data = sock.recv(1024)
if len(data) == 0:break
print(data)
# 遵循HTTP响应格式
sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
sock.send(b'<h1>hello<h1>')
sock.send(b'<a href="https://www.jd.com"> shopping<a>')
sock.send(b'<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cx1FMyeUUYANoF_1jfSlzgHaLB?w=182&h=271&c=7&r=0&o=5&dpr=1.25&pid=1.7"/>')
# 也可以发送文本内容等
# with open(r'data.txt','rb') as f:
# data = f.read()
# sock.send(data)

浏览器响应内容


# 请求首行
b'GET / HTTP/1.1\r\n
# 请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
# 请求体(当前为空)
'

Web入门的更多相关文章

  1. 8、web入门回顾/ Http

    1 web入门回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作      : 启动:  %tomcat%/bin/startup.bat 关闭: % ...

  2. python web入门程序

    python2.x web入门程序 #!/usr/bin/python # -*- coding: UTF-8 -*- # 只在python2.x 有效 import os #Python的标准库中的 ...

  3. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  4. Java Web入门经典扫描版

    全书共分4篇19章,其中,第一篇为“起步篇”,主要包括开启JavaWeb之门.不可不知的客户端应用技术.驾驭JavaWeb开发环境.JavaWeb开发必修课之JSP语法等内容:第二篇为“核心篇”,主要 ...

  5. Golang Web入门(4):如何设计API

    摘要 在之前的几篇文章中,我们从如何实现最简单的HTTP服务器,到如何对路由进行改进,到如何增加中间件.总的来讲,我们已经把Web服务器相关的内容大概梳理了一遍了.在这一篇文章中,我们将从最简单的一个 ...

  6. 关于CTFshow中Web入门42-54

    0x00前记 ​ 终于把学校上学期的期末考试考完了,刚好复习的时候跟着群里的师傅写了ctfshow上Web入门的42-54的题目,其中有很多的坑,但是收获也是很多的,这里做一下总结吧!给自己挖了很多的 ...

  7. ctfshow的web入门171

    web入门171 看到这个查询语句,我们可以进行相关操作 $sql = "select username,password from user where username !='flag' ...

  8. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

  9. Golang Web入门(1):自顶向下理解Http服务器

    摘要 由于Golang优秀的并发处理,很多公司使用Golang编写微服务.对于Golang来说,只需要短短几行代码就可以实现一个简单的Http服务器.加上Golang的协程,这个服务器可以拥有极高的性 ...

随机推荐

  1. 只需两步在Linux系统安装百度网盘--Ubuntu20

    Linux Ubuntu系统安装百度网盘 百度网盘已支持Linux系统下载和使用.使用Linux系统下载并安装一个百度网盘是非常简单的,只需要以下两个步骤: 第一步 进入官网下载.deb类型的百度网盘 ...

  2. kafka时间轮简易实现(二)

    概述 上一篇主要介绍了kafka时间轮源码和原理,这篇主要介绍一下kafka时间轮简单实现和使用kafka时间轮.如果要实现一个时间轮,就要了解他的数据结构和运行原理,上一篇随笔介绍了不同种类的数据结 ...

  3. Unity3D开发入门教程(三)——添加启动脚本

    五邑隐侠,本名关健昌,12年游戏生涯. 本教程以 Unity 3D + VS Code + C# + tolua 为例. 一.启动脚本 第一篇 "搭建开发环境",在 "配 ...

  4. IDEA导入Web项目配置Tomcat启动

    1.导入项目 2.配置project 3.导入项目模块 配置Models 4.配置Libraries 5. 6. 7.配置tomcat

  5. 【Java】多态性

    文章目录 多态性 向下转型 多态性 可以理解为一个事物的多种形态. 对象的多态性:父类的引用指向子类的对象.只适用于方法,不适用于属性(编译和运行都看左边) 总结:对于对象的多态性,编译,看左边:运行 ...

  6. Solon Web 开发,十一、国际化

    Solon Web 开发 一.开始 二.开发知识准备 三.打包与运行 四.请求上下文 五.数据访问.事务与缓存应用 六.过滤器.处理.拦截器 七.视图模板与Mvc注解 八.校验.及定制与扩展 九.跨域 ...

  7. 【记录一个问题】opencv中 cv::dft()与cv::ocl_dft()计算的结果相差较大

    以一个跟踪算法来测试: 使用cv::dft(), 矩阵未按照2次幂对齐,最终跟踪平均准确率 84.3% 使用cv::dft(),矩阵使用cv::copyMakeBorder对齐,最终跟踪平均准确率 8 ...

  8. golang中http编程

    1. http server package main import ( "fmt" "net/http" ) func main() { // 请求url和对 ...

  9. [luogu P1312]Mayan游戏

    其实就是一道锻炼码力的简单题-- 看到题目中的\(0<x\leqslant 5\)也就知道是爆搜了吧( 我们仿照写游戏的方法多写几个函数,能够有效降低错误率(确信 我们写出大致的搜索流程来: 如 ...

  10. 计算机网络再次整理————tcp例子[五]

    前言 本文介绍一些tcp的例子,然后不断完善一下. 正文 服务端: // See https://aka.ms/new-console-template for more information us ...