前端介绍
cs 客户端 服务端
bs 浏览器 服务端
ps: bs本质也是cs
浏览器窗口输入网址回车发生了几件事
"""
1. 浏览器超服务端发送请求
2. 服务端接受请求
3. 服务端返回相应的响应
4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看
"""
浏览器可以充当很多服务端的客户端
百度、腾讯视频
HTTP协议
"""
超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式
"""
#四大特性
1. 基于请求响应
2. 基于TCP/IP作用应用层之上的协议
3. 无状态
不保存用户的信息
由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术（cookie、session、token....）
4. 无连接/短链接
请求一次响应依次，之后两个就无联系
长链接：双方建立链接之后默认不断开 websocket
#请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆K,V键值对)
#这里的\r\n不能省略
请求体(并不是所有的请求方式都有,get没有post有，存放的是post请求提交的敏感数据)
#响应数据形式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆K,V键值对)
#这里的\r\n不能省略
响应体(返回给浏览器展示给用户看的数据)
#响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息（404：请求资源不存在）
1xx:服务端已经成功接收到你的数据正在处理，你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据（200 OK请求成功）
3xx:重定向（当你在访问一个需要登陆之后才能看的页面，你会发现会自动调转到登录界面）
4xx:请求错误（404：请求资源不存在 403：当前请求不合法或者不符合访问资源的条件）
5xx:服务器内部错误（500）
#请求方式
1. get请求
向服务端要数据
eg:输入网址获取对应的内容
2. post请求
向服务端提交数据
eg:用户登录 输入用户名和密码后 提交到服务端后端做身份校验
#URL：统一资源定位符（大白话：网址）
HTTP简介
超文本标记语言
<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me</a>
HTML就是书写网页的一套标准
#注释：注释是代码之母
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
<body></body>:body内的标签写什么，浏览器就渲染什么，用户就能看到什么
</html>
注意：HTML代码是没有格式的，可以全部写在一行
两种打开HTML文件的的方式
-
找到文件所在的位置，右键选择浏览器打开
-
在pycharm内部集成了自动调用浏览器功能，选择即
标签的分类
1. 双标签
2. 单标签
head 内标签
<title>Title</title> 展示网页标题
<style></style> 用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 用来引入外部css文件
body内常用标签
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3> 标题标签1~6级
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p> 段落标签
<br> 换行
<hr> 水平分割线
标签的分类2
1. 块儿级标签：独占一行
<h1> <p>
1. 块儿级标签可以修改长宽，行内标签不可以
2. 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是<p>标签只能嵌套行内标签，不能嵌套块儿级标签
2. 行内标签：自身文本多大就占多大
i u s b
行内标签不能嵌套块儿级标签
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ ¥符号
© ©符号
® ®符号
常用标签
<div> 块儿级标签
<span> 行内标签
页面的布局一般先用div和span占位后再去调整样式，尤其是div使用非常的频繁
div可以看作是一块区域，也就意味着div来提前规定所有的区域
之后往该区域添加内容
而普通的文本先用span标签
img标签
#图片标签
<img src="" alt="" title="" height="800px" weight="">
src
1. 图片的路径 可以是本地也可以是网上的
2. url 自动朝该url发送get请求获取数据
alt
当图片加载不出来后给图片表述性信息
tilte
当鼠标悬浮到图片上后自动展示提供信息
height
改变图片的高度
weight
改变图片的宽度
***高度和宽度只修改一个时，另外一个会等比例缩放
如果修改两个参数，图片会失真
a标签
#链接标签
<a href="" target=""></a>
href
放的是url，用户点击会跳转到url界面
target
双引号里是_blank时，会实现新键页面跳转
双引号里是_self时，会在当前页面跳转
#a标签的描点功能
eg:点击一个文本标题，页面自动跳转到标题对应的内容区域
<a href="" id="d1">顶部</a>
<a href="" id="d2">底部</a>
<a href="" id="#d2">顶部</a>
<a href="" id="#d1">底部</a>
标签具有的两个重要属性
1. id值
类似于标签的身份证号，在同一个html也买你上的id值不能重复
2. class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
列表标签
无序列表（较多）
有序列表
标题列表
#无序列表
<ul type="">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
排版一致的几行数据基本上用的都是ul标签
type
默认为实心圆
双引号中为circle时，为空心圆
双引号中为none时，内容前没有
#有序列表
<ol type="">
<li></li>
<li></li>
<li></li>
</ol>
type
默认为数字序号
双引号中为A时，为大写英文序号
