5.11
前端
-
什么是前端
任何于用户直接打交道的页面都可以称之为前端，比如电脑界面，手机界面，网页
-
什么是后端
幕后操作者，不直接与用户打交道
学习历程
- html：内容，网页的骨架
- CSS：外观，添加样式
- JavaScript：动作，网页的动态效果
- bootstrap
- jQuery
- vue
浏览器窗口输入网站回车发生了几件事
1. 浏览器朝服务端发送请求
2. 服务端接收请求
3. 服务端返回响应的响应，返回网站
4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看
浏览器可以充当很多服务端的客户端，浏览器有一个，服务端有很多个，想要一个客户端与多个服务端交互：
1. 浏览器能够自动识别服务端做不同处理
2. 制定一个同一标准，所有服务端都要遵循一些规则：http协议
http协议
超文本传输协议，用来规定服务端与浏览器之间的数据交互格式，这样浏览器就能正常渲染服务端发送的内容
不用http协议也可以，只是就不能用浏览器，需要写一个app
以下的内容要求滚瓜烂熟
http协议四大特性
-
基于请求响应
-
基于TCP / IP作用于应用层之上的协议：协议上面的协议
-
无状态，不保存用户的信息，由于http这个特性，后来出现了一些专门用来技术用户状态的技术：cookie，session，token
-
无链接 / 短链接，请求来一次响应一次，之后没有任何联系
长链接：双方建立链接之后默认不断开：websocket
服务端与浏览器之间的数据交互格式
- 请求数据格式
- 响应数据格式
请求方式
-
get请求：朝服务端要数据
例：输入网址获取对应的内容
-
post请求：朝服务端提交数据
例：用户登陆，输入用户名和密码之后，提交到服务端做身份校验
请求数据格式
请求首行，请求头，/r/n，请求体
1. 请求首行：标识http版本，档期啊请求方式（get/post）
2. 请求头：一堆k:v键值对
3. 回车：/r/n
4. 请求体：get没有请求体，post请求体里面放敏感数据
响应数据格式
响应首行，响应头，/r/n，响应体
1. 响应首行（标识http协议版本，响应状态码）
2. 响应头
3. /r/n
4. 响应体
响应状态码：用一串数字标识一些复杂的状态或描述性信息，如200，500，404
主要有几类：
1xx：服务端已经顺利接收了你的数据，正在处理，可以继续提交额外数据
2xx：服务端成功响应了你的数据，200 request ok
3xx：重定向：当你在访问一个需要登陆之后才能看的页面，页面会重定向到登陆页面
4xx：请求错误：404：请求资源不存在，403：当前请求不合法或不符合访问资源的条件
5xx：服务器内部错误，500：internal server error
url：统一资源定位符，标识资源的位置，也就是网址
让我们在python上写的服务端返回的数据能被浏览器识别：
conn.send(b'HTTP/11 200 OK
')
conn.send(b'hello')
# 此时，在conn里可以发送html代码或文件，可以被浏览器识别
html
简介
超文本标记语言，不是编程语言。能够让浏览器渲染页面，我们现在看到的所有网站都是html代码
书写html
注释
<!--单行注释-->
<!--
多行注释
多行注释
-->
由于html比较杂乱，所以我们习惯性地用注释来划定区域方便后续的查找
<!--左侧菜单栏开始-->
...
<!--左侧菜单栏结束-->
<!--顶端导航栏开始-->
<!--顶端导航栏结束-->
html文档结构
<html>
<head></head> head标签里的代码页面上显示不出来，是定义一些配置给浏览器看的
<body>
hello：用户能够看到的内容，给浏览器渲染
</body>
</html>
文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加功能
新建html文件，会自动帮你生成一些标签；html没有任何格式，可以全部写在一行里面，只不过我们习惯了缩进来显示代码
两种打开html文件的方式
- 使用浏览器打开
- 在pycharm内部集成了自动调用浏览器的功能，前提是电脑上安装了对应的浏览器
标签
标签的分类
1. 双标签：<h1></h1>
2. 单标签，自闭合标签：<image>
head里的标签
在书写html代码的时候，只需要写标签名，table键能自动补全
title，style，script，meta，link等等
<head>
<title>标签名字</title>
<style>
h1{
color:yellow,
}
写css代码
</style>
<script src='myjs.js'>
写js代码或引入js文件
</script>
<link>
用来引入外部css文件
</link>
<meta>
告诉浏览器干什么活
meta name，meta keyword。。。
</meta>
</head>
body里的标签
基本标签：
- h1~h6 一级标签到六级标签
- b：加粗标签
- i：斜体
- u：下划线
- s：删除线
- p：段落标签，一个p标签就是一行
- br：换行：单标签
- hr：水平分割线：单标签
<body>
<h1>
一级标签
</h1>
<h2>
二级标签
</h2>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>
文本标签，单独占一行
</p>
<br> 换行
<hr> 水平分割线
</body>
标签的分类2
- 块级标签：独占一行
- 块级标签可以修改长宽度
- 可以嵌套任意的块级标签和行内标签
- 特例：p标签是块级标签，但是只能嵌套行内标签，不能嵌套块级标签，如果嵌套了，自动会分隔开
- 行内标签：自身文本多大，就占多大
- 不能修改宽高度，宽高度取决于文本大小
- 可以嵌套行内标签，不能嵌套块级标签，但是一般行内标签不会用来嵌套
前端基本不会报错，只是显示的效果会有错误
特殊符号
- 空格：标签内空格只能有一个，要用多个空格要用
- 1 > 2：大于号，防止与标签混淆，> 写作
>小于号 < 写作< - and 符号 &：
& - ￥ 羊角符号：
¥ - 版权 圆圈c：
© - 商标，圆圈r：
®
<<>>
&&¥¥©©®
常用标签
div，span，在构造页面初期最常使用的，一般先用div和span占位，后期再去调整样式
img标签
div
块级标签，可以看作一块区域，也就意味着div用来提前规划位置
span
行内标签，普通的文本用span标签
img
<img src="" alt="" title="" height="" width="">
图片标签
- src里放文件路径，可以是本地的也可以是网上的，如果是网上的，会自动发送get请求得到图片
- alt里面放图片的描述信息，当图片加载失败的时候显示
- title 图片的标题，鼠标悬停在图片上的时候显示
- height，width：高度和宽度，默认模式下，只修改一个的时候另外一个参数会等比例缩放，如果修改两个参数，并且没有考虑比例的问题，图片会被拉伸
a标签
<a href="" target="_blank">描述信息</a>
点击之后跳转到内部关联的网址
- herf里面放的是url网址，点击就会跳转
点之前是蓝色的，点过之后会变色
- 可以放其他标签的id值，点击就会跳转到别的标签的位置
- target默认参数_self，在当前页面跳转，换成_blank之后，在新页面打开
a标签锚点功能
点击一个文本，页面自动跳转到标题对应的内容区域
标签两个重要的属性
id，class
id：每个html页面唯一，相当于身份证号，通过直接找到这个标签
class：类似于面向对象的类的继承，一个标签可以继承多个
标签可以有默认的属性也可以有自定义的属性
列表标签
分为三类：有序列表，无序列表，标题列表
用最多的是无序列表
<body>
<ul type="square">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</body>
现在这样非常丑，以后写样式可以变得很好看
有序列表
简写，emmet插件
ol>li*3 按tab键，会自动帮你生成有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
标题列表
<dl>
<dt>标题1<dt>
<dd>内容1</dd>
<dt>标题2<dt>
<dd>内容2</dd>
</dl>
总结
前端没有逻辑，记忆就行，要花时间记
要记标签的用法，也要记标签的意思