- 1 > 前端
- 2 > HTTP简介
- 2.1 > HTTP协议四大特征
- 2.2 > 数据格式
- 2.3 > 响应状态码
- 3 > HTML简介
- 3.1 > 补充
- 4 > head内常见标签
- 5 > body内的标签
- 5.1 > 基本标签
- 5.2 > 特殊符号
- 5.3 > 常见标签
- 6 > 标签的两大重要参数
- 7 > 列表标签
- 8 > 表格标签
任何与用户直接打交道的界面都可以称之为是前端，例如：淘宝页面、游戏页面、操作页面。我们将不直接与用户打交道的用于执行真正业务逻辑的代码，例如：python代码、java代码、c++代码。
我们主要需要学习以下几个知识，HTML、CSS、JavaScript、jQuery（框架）、Bootstrap(框架)，最最主要学的是 前端三剑客 >>> HTML、CSS、 JavaScript。
HTML: 网页的骨架 蜡笔小新不穿衣服 赤裸裸的（难看） CSS:网页的样式 穿上衣服 化好妆(好看) JavaScript:网页的动态效果 扭起来 跳起来 动起来(生动)2 > HTTP简介
# 可以充当客户端的有哪些? 1. 自己写的python代码（TCP客户端） 2. 别人写的浏览器 https://blog.csdn.net/weixin_64178950/article/details/'''cs架构与bs架构:bs本质也是cs''' # 问题 我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据 # 推导 不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理 最佳的解决措施是统一规定一个标准>>>:HTTP协议 # HTTP协议 规定了服务端与浏览器之间的数据交互格式及其他事项 """ 如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容 如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端 如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app) """2.1 > HTTP协议四大特征
1.基于请求、响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
2.基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP ...
3.无状态
服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
4.短连接
不保持客户端与服务端之间的链接导通
补充:websocket(长连接) 主要用于加好友聊天等业务
2.2 > 数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式 1.请求首行(请求方法 协议版本) 2.请求头(一大堆k:v键值对) 3.(换行不能省略) 4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有 响应格式:服务端给客户端发送消息应该遵循的数据格式 1.响应首行(响应状态码 协议版本) 2.响应头(一大堆k:v键值对) 3.(换行不能省略) 4.响应体(给浏览器展示给用户看的页面内容)2.3 > 响应状态码
用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了...)
在工作中还会自定义状态码(因为默认的不够)
自定义状态码一般都是从10000开始
# 以后我们进公司写后端也需要给前端提供一个手册
eg:聚合数据
3 > HTML简介
3.1 > 补充hello big baby
click me
# 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成) 1.存放HTML代码的文件后缀名一般都是.html 2.HTML:超文本标记语言 它没有任何的逻辑 固定搭配 """所见即所得""" 3.HTML文档结构 给浏览器看的数据 给用户看的数据 4.HTML标签的分类 1.双标签: 有头有尾 内容写在中间 2.自闭合标签:单标签一般有特殊功能 5.HTML注释语法 '''html由于标签非常的多 所以可以通过注释区分页面区域'''
1.如何打开html标签 1 > 查找并右键选择打开方式 2 > pycharm快捷方式(重要) html文件内容区右上方浏览器图标 2.html标签其实没有缩进的概念 之所以缩进是因为我们习惯了 更加美观 3.在pycharm中的html文件内 编写标签只需要写表名名称即可 按tab键自动补全 4.在pycharm中的html文件内 注释的快捷键也是ctrl+?4 > head内常见标签
# head标签内编写的标签一般都是给浏览器看的 title标签 控制网页小标题 style标签 内部支持编写css代码 link标签 引入外部css文件 script标签 内部支持编写js代码 也可以通过src属性引入外部js文件 meta标签 功能非常多 keywords:搜索引擎查询关键字 description:用于展示页面搜索结果的文本描述 """ 正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合 """5 > body内的标签 5.1 > 基本标签
"""相同的样式可能存在多种标签 区别在于语义不一样""" 1.标题系列 h1~h6(1到6级标题) 2.字体系列 斜体 加粗 下划线5.2 > 特殊符号删除线3.文本段落 4.其他 hr 水平分割线 br 换行符
空格 > 大于号 < 小于号 & &符号 ¥ 羊角符 © 版权 ® 商标5.3 > 常见标签
""" 标签的类别 块儿级标签:h1~h6 p div 默认独占浏览器一行内 行内标签:s i u b span 自身内部文本多大就占多大 标签之间支持嵌套(最好是布局类相关标签参与) 块儿级标签可以嵌套任意标签 不属于布局标签的块儿级标签不建议嵌套块儿级标签 行内标签只能嵌套行内标签 """ 1.布局标签 div span # 页面的编写首先就是先用布局标签占位 之后填充内容即可 2.图片标签 基本格式 ：6 > 标签的两大重要参数src 图片路径 title 鼠标悬浮自动展示提示信息 alt 当图片无法正常展示自动提示的信息 height 自定义图片高度 width 自定义图片宽度 # height和width调整一个另外一个自适应调节 单位是px(像素) 3.链接标签 基本格式 ： href 点击跳转到位置 https://blog.csdn.net/weixin_64178950/article/details/网址跳转写法 可以写标签id值 target 控制是否当前页跳转 默认_self当前页 设置_blank新建页
1.id 类似于身份证号 同一个html页面上标签的id值不允许重复 用于精确查找某个标签(因为一个html页面上相同标签名的标签太多) 2.class 类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)7 > 列表标签
# 无序列表
- 001
- 002
- 003
- 004
- 005
| 编号 | 姓名 | 年龄 |
|---|---|---|
| 1 | jason | 18 |
| 2 | tony | 28 |
| 3 | kevin | 38 |
