day38(前端)
WeChat1: 1549609629(加我微信)
WeChat2: 17530715675(加这个也行)
今日内容详细
昨天结束了网络编程，今天迎来了一个全新的内容
前端，听过前端也一定听过后端，接下来让我们去了解一下什么是前端，什么是后端？
什么是前端？什么又是后端呢？
1，在你机子上（PC端/手机端）看到的界面，安装的程序。给用户看的、操作的就是前端。你看不到的，帮你保存网络游戏数据，保存应用数据，处理数据的就是后端（服务端）。
2， 目前一般来说，前端指的就是浏览器端，后端指的就是直接为浏览器端提供服务以及数据的服务器端。
3， 从大的方面来讲，你所能看到的一切，网页、移动端网页、小程序、甚至某些app，都是前端程序员的。
前端
任何与用户直接打交道的界面都可以称之为前端
eg:淘宝页面 游戏页面 操作页面
后端
不直接与用户打交道的用于执行真正业务逻辑的代码
eg:python代码 java代码 c++代码
知识脉络:
HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
只要学习前端看到要学'前端三剑客'>>>:HTML CSS JavaScript
比喻说明:
HTML:网页的骨架
蜡笔小新不穿衣服 赤裸裸的(难看)
CSS:网页的样式
穿上衣服 化好妆(好看)
JavaScript:网页的动态效果
扭起来 跳起来 动起来(生动)
HTTP简介
HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。
# 问题
我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据
# 推导
不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理
最佳的解决措施是统一规定一个标准>>>:HTTP协议
# HTTP协议
规定了服务端与浏览器之间的数据交互格式及其他事项
"""
如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容
如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端
如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)
"""
HTTP协议四大特性
(1) 基于TCP/IP
http协议是基于TCP/IP协议之上的应用层协议。
应用层协议:HTTP HTTPS FTP ...
(2) 基于请求－响应模式
HTTP协议规定,请求从客户端发出,最后服务器端响应该请求并 返回。换句话说,肯定是先从客户端开始建立通信的,服务器端在没有 接收到请求之前不会发送响应
(3) 无状态保存
HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议 自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个 级别,协议对于发送过的请求或响应都不做持久化处理。
服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
无连接
无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
短连接
不保持客户端与服务端之间的链接导通
补充:websocket(长连接) 主要用于加好友聊天等业务
数据格式、
# 2.数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有
响应格式:服务端给客户端发送消息应该遵循的数据格式
1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)
# 3.响应状态码
用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了...)
在工作中还会自定义状态码(因为默认的不够)
自定义状态码一般都是从10000开始
# 以后我们进公司写后端也需要给前端提供一个手册
eg:聚合数据
HTML简介
<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>、
# 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)
1.存放HTML代码的文件后缀名一般都是.html
2.HTML:超文本标记语言
它没有任何的逻辑 固定搭配 """所见即所得"""
3.HTML文档结构
<html>
<head>给浏览器看的数据</head>
<body>给用户看的数据</body>
</html>
4.HTML标签的分类
1.双标签:有头有尾 内容写在中间
<h1></h1> <html></html>
2.自闭合标签:单标签
<img/> 一般有特殊功能
5.HTML注释语法
<!--单行注释-->
<!--
多行注释
-->
'''html由于标签非常的多 所以可以通过注释区分页面区域'''
HTML（HyperText Mark-up Language）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图 形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的 具体内容。
HTML语言被称为互联网的三大基石之一(其余两大基石分别为：HTTP协议、URL)。它解决了如何以丰富的效果展示数据内容的问题。互联网中，数据是在服务器和浏览器之间互相传送和执行。三大基石分别解决了如下问题：
HTTP协议：解决了服务器和浏览器之间数据如何传送、传送格式的问题！实现了分布式的信息共享。
URL协议：解决了众多服务器中资源定位问题。从而让浏览器可以访问不同的服务器资源，实现了全球信息的精确定位。
HTML语言：解决了数据在浏览器中如何丰富多彩的展示，及如何合理标示信息的问题。
补充
1.如何打开html标签
1.查找并右键选择打开方式
2.pycharm快捷方式(重要)
html文件内容区右上方浏览器图标
2.html标签其实没有缩进的概念
之所以缩进是因为我们习惯了 更加美观
3.在pycharm中的html文件内
编写标签只需要写表名名称即可 按tab键自动补全
4.在pycharm中的html文件内
注释的快捷键也是ctrl+?
head内的常见标签、
# head标签内编写的标签一般都是给浏览器看的
| head常见标签 | 功能 |
|---|---|
| title标签 | 用于控制网页小标题 |
| style标签 | 风格，内部支持编写css代码 |
| script标签 | 内部支持编写js代码，也可以通过src属性引入外部js文件 |
| link标签 | 用于引入外部css文件 |
| meta标签 | 是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！功能较多不一一说明了 |
| keywords | 搜索引擎查询关键字：为搜索引擎提供的关键字列表 |
| description | 用于展示页面搜索结果用来告诉搜索引擎你的网站主要内容。 |
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""
body内基本标签
"""相同的样式可能存在多种标签 区别在于语义不一样(后面再说)"""
标题系列
标题我们是不陌生的 h1~h6一级到六级标题
字体系列
<i>斜体</i>
<b>加粗</b>
<u>下划线</u>
<s>删除线</s>
文字段落
<p></p>行标签
hr 水平分割线
br 换行符
body内特殊符号
 : 空格
>: 大于号、
<: 小于号、
&: &符号、
©: 版权
¥: 羊角符、
®: 商标
body内常见标签、
"""
标签的类别
块儿级标签:h1~h6 p div
默认独占浏览器一行内
行内标签:s i u b span
自身内部文本多大就占多大
标签之间支持嵌套(最好是布局类相关标签参与)
块儿级标签可以嵌套任意标签
不属于布局标签的块儿级标签不建议嵌套块儿级标签
行内标签只能嵌套行内标签
"""
"""
1.布局标签
div
span
# 页面的编写首先就是先用布局标签占位 之后填充内容即可
ps:课下随便找几个网站查看一些div的使用
2.图片标签
img
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
# height和width调整一个另外一个自适应调节 单位是px(像素)
3.链接标签
a
href 点击跳转到位置
可以写网址
<a href='网址'></a>
也可以写标签id值
<a href='页面上某个标签id值'></a>
target 控制是否当前页跳转
默认_self当前页
设置_blank新建页
<body>
<!-- 这是身体标签 -->
<div class="div1">
<!--这是一个盒子标签-->
<p>我是段落文本p标签</p>
<h1>我是一级标题标签</h1>
<h2>我是二级标题标签</h2>
<h3>我是三级标题标签</h3>
<h4>我是四级标题标签</h4>
<h5>我是五级标题标签</h5>
<h6>我是六级标题标签</h6>
</div>
<hr>
<div class="div2">
<!--这也是一个盒子标签-->
<!-- 区别是p会自动换行，而span不会自动换行，共用一行 -->
<p>你好</p>
<p>我爱前端</p>
<p>好好学习</p>
<hr>
<!--分隔符-->
<span>你好</span>
<span>我爱前端</span>
<span>好好学习</span>
<br>
<span>我被br强制换行了</span>
</div>
<hr>
<div class="div3">
<!--这还是一个盒子标签-->
<p>我是正常的p</p>
<p><i>我是被斜体i定义后的p</i></p>
<p><em>我是被斜体em定义后的p，我更容易被浏览器识别</em></p>
</div>
<hr>
<div class="div4">
<span>现价：￥99
<del>原价：￥399</del>
<!--这是删除符-->
<center>我是居中对齐</center>
H<sub>2</sub>O
CO<sup>2</sup>
</span>
</div>
<hr>
<div class="5">
<p>
你好 我是前端小白
我爱学前端
我的空格和换行没有被p保留
</p>
<pre>
你好 我是前端小白
我爱学前端
我是被pre保留了空格和换行
</pre>
</div>
</body>
标签的两大重要参数
1.id
类似于身份证号 同一个html页面上标签的id值不允许重复
用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
列表标签
# 无序列表
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
"""
无序列表是使用频率最高的列表标签
页面上只有是有规则排列的横向或者竖向内容 几乎使用的都是无序列表
"""
表格标签、
20、表格
<table></table>标签用于制作表格
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
1）基本语法：
<table>
<tr>
< th>第一列表头</th>
<th>第二列表头</th>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
table表示表格标签，th表示表头，tr表示行标签，td表示单元格标签
table属性：使用width和border设置表格的宽度和边框；cellpadding创建单元格内容与其边框之间的空白、cellspacing增加单元格之间的距离， bgcolor设置整个表格的背景，更多属性上网查看
| 表格标签 | 说明 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 一文读懂知识蒸馏
· 终于写完轮子一部分：tcp代理 了，记录一下