前端（一）
前端简介
后端不直接与用户打交道主要用于执行真正业务逻辑的
前端是与用户直接打交道的界面,运行在PC端、移动端等游览器上。前端技术一般分为前端设计和前端开发。前端设计工程师拿出想要的效果图，前端开发工程师用代码来实现这个效果图。
学习前端主要学习的就是HTML、CSS、JS以及任意一个框架，这样子你就可以做出自己想要的页面了。
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
HTTP简介
我们用python代码写的程序可以充当客户端(TCP客户端)，别人写的游览器也可以充当客户端(cs架构与bs架构:bs本质也是cs)。
不同的服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理。最佳的解决措施是统一规定一个标准>>>:HTTP协议
HTTP协议规定了服务端与游览器之间的数据交互格式及其他事项。如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容。如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是不影响服务端。如果这个应用特别火爆，那么完全可以让用户下载专属的客户端(app)。
HTTP协议
-
四大特性
-
基于请求、响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
-
基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP、HTTPS、FTP ...
-
无状态
服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
-
短连接
不保持客户端与服务端之间的链接导通
补充：websocket(长连接) 主要用于加好友聊天等业务
-
-
数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
- 请求首行(请求方法 协议版本)
- 请求头(一大堆k:v键值对)
- (换行不能省略)
- 请求体(携带敏感数据:密码 身份证号...)不是每个都有请求体
响应格式:服务端给客户端发送消息应该遵循的数据格式
- 响应首行(响应状态码 协议版本)
- 响应头(一大堆k:v键值对)
- (换行不能省略)
- 响应体(给游览器展示给用户看的页面内容)
-
响应状态码
用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了...)
在工作中还会自定义状态码(因为默认的不够)
自定义状态码一般都是从10000开始
eg:聚合数据响应状态码可以在游览器的检查下的network中查看
第一部分：状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。
第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）
第二部分：消息报头，用来说明客户端要使用的一些附加信息
第二行和第三行和第四行为消息报头，
Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是ISO-8859-1
第三部分：空行，消息报头后面的空行是必须的
第四部分：响应正文，服务器返回给客户端的文本信息。
空行后面的html部分为响应正文。
HTML简介
-
存放HTML代码的文件后缀名一般都是.html
-
HTML:超文本标记语言（Hyper Text Markup Language）
它没有任何的逻辑 固定搭配 """所见即所得"""
-
HTML文档结构
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题<html> <head>给浏览器看的数据</head> <body>给用户看的数据</body> </html> -
HTML标签的分类
-
双标签
有头有尾，内容写在中间
-
单标签
一般有特殊功能
-
-
HTML注释语法
<!-- --> 或者 ctrl + / vscode中 ctrl + ? pycharm中
head内常见标签
title标签 控制网页小标题
style标签 内部支持编写css代码
link标签 引入外部css文件
script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
meta标签 功能非常多
keywords:搜索引擎查询关键字
description:用于展示页面搜索结果的文本描述
基本上html、css、js都是份文件存储的。而且css文件一定会有一份标准，用于把公共要用样式的放在同一个css文件中。(比如li去掉小圆点，取消链接的下划线等)
body内基本标签
-
标题系列
h1~h6(1到6级标题)
-
字体系列
<i>斜体</i> <b>加粗</b> <u>下划线</u> <s>删除线</s> -
文本段落
<p></p> -
其他
<hr> <br>
body内特殊符号
空格
> 大于号
< 于号
& &符号
¥ 羊角符
© 版权
® 商标
body内常见标签
标签的类别
块儿级标签:h1~h6 p div
默认独占浏览器一行内
行内标签:s i u b span
自身内部文本多大就占多大
标签之间支持嵌套(最好是布局类相关标签参与)
块儿级标签可以嵌套任意标签
不属于布局标签的块儿级标签不建议嵌套块儿级标签
行内标签只能嵌套行内标签
-
布局标签
div、span
页面的编写首先就是先用布局标签占位 之后填充内容即可
-
图片标签
<img src=''>img属性:
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度 height和width调整一个另外一个自适应调节 单位是px(像素)
-
链接标签
<a><a/>href 点击跳转到位置,可以写网址,也可以写标签id值
target 控制是否当前页跳转.默认_self当前页,设置_blank新建页。
标签的两大重要参数
-
id
类似于身份证号，同一个html页面上标签的id值不允许重复，虽然重复使用不会报错，但是对于后面js的使用会造成影响。
用于精确查找某个标签(因为一个html页面上相同标签名的标签太多) -
class
类似于面向对象知识，可以将多个标签归为一类 分类查找(范围查找一次性多个)
列表标签
无序列表
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
无序列表是使用频率最高的列表标签
页面上只有是有规则排列的横向或者竖向内容，几乎使用的都是无序列表
表格标签
<table >
<thead>
<tr> <!--tr表示一行-->
<th>编号</th> <!--th加粗文本-->
<th>姓名</th>
<th>年龄</th>
</tr>
</thead> <!--表头字段-->
<tbody>
<tr>
<td>1</td> <!--td普通文本-->
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>tony</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>kevin</td>
<td>38</td>
</tr>
</tbody> <!--表单数据-->
</table>
浙公网安备 33010602011771号