HTTP介绍、HTML介绍、标签
学习内容总结
今日学习内容总结
在昨日的学习中，我们的并发编程已经收尾。同时也预示着我们的python的学习需要停一停了。因为接下来我们要学习前端了。这大概也是下一周的主要学习内容。
HTTP
前端简介
在学习前端之前，我们可以先了解一下什么是前端。其实前端，以及后面的数据库与python是没有关系的，这是全新的知识。所以我们会从基础开始学。那么什么是前端呢？
前端，其实就是能直接与用户打交道的页面。所有人都可以访问。比如我们常见的淘宝，京东，B站的页面。操作页面等。目前来说，我们学习的前端，指浏览器端。并且前端从大的方面来讲，你所能看到的一切，网页、移动端网页、小程序、甚至某些app，都是前端程序员的。而前端我们主要要学习什么呢？
我们的前端并不是核心掌握内容，所以我们主要学习 HTML CSS JavaScript 这三种语言。在学习这三种语言之前我们可以看一看前端工程师是做什么的：
1. 前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。
2. 通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。
3. 前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。
HTTP简介
我们知道，可以充当客户端的，在之前已经体验过了。首先就是自己写的python代码。TCP客户端。然后就是别人写的浏览器。那么有一个问题，我们自己写的TCP服务端与浏览器之间通信了，但是浏览器不识别服务端数据。不同的服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理。所以最佳的解决措施就是统一规定一个标准：HTTP协议。
HTTP协议
HTTP，它是用于从万维网到本地浏览器之间的文件传输协议，HTTP是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信息，不仅可用于Web访问，也可以用于其他因特网/内联网应用系统之间的通信，从而实现各类应用资源超媒体访问的集成。
HTPP的四大特性
1.基于请求、响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
2.基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP ...
3.无状态
服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
4.短连接
不保持客户端与服务端之间的链接导通
数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有
响应格式:服务端给客户端发送消息应该遵循的数据格式
1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)
相应状态码
用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了...)
在工作中还会自定义状态码(因为默认的不够)
自定义状态码一般都是从10000开始
HTTP工作流程
1. 建立TCP连接
在HTTP工作开始之前，客户端首先要通过网络与服务器建立连接，该连接是通过 TCP 来完成的。HTTP 是比 TCP 更高层次的应用层协议，根据规则，只有低层协议建立之后，才能进行高层协议的连接，因此，首先要建立 TCP 连接，一般 TCP 连接的端口号是80。
2. 客户端向服务端发送请求
建立了TCP连接，客户端就会向服务器发送请求命令。
3. 客户端发送请求头信息
客户端发送其请求命令之后，还要以头信息的形式向服务器发送一些别的信息，之后客户端发送了一空白行来通知服务器，它已经结束了该头信息的发送。
4. 服务端应答
客户端向服务器发出请求后，服务器会客户端返回响应。
5. 服务端响应头信息
服务器向客户端发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以 Content-Type 响应头信息所描述的格式发送用户所请求的实际数据。
6. 服务端关闭TCP连接
一般情况下，一旦服务器向客户端返回了请求数据，它就要关闭 TCP 连接，然后如果客户端或者服务器在其头信息加入了这行代码 Connection:keep-alive ，TCP 连接在发送后将仍然保持打开状态，于是，客户端可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。
HTML
HTML简介
HTML是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，它使用标记标签来描述网页。
HTML标记标签通常被称为HTML标签：
HTML标签是由尖括号包围的关键词，比如<html>；HTML标签通常是成对出现的，比如<b>和<\b>；标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签。
HTML文档描述网页，HTML文档包含HTML标签和纯文本，HTML文档也被称为网页。
Web浏览器的作用是读取HTML文档，并以网页的形式显示它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。
打开HTML的方式：
1. 查找并右键选择打开方式
2. pycharm快捷方式,html文件内容区右上方浏览器图标
html标签其实没有缩进的概念,之所以缩进是因为我们习惯了，更加美观，查找代码更加容易。
在pycharm中的html文件内，编写标签只需要写表名名称即可，按tab键自动补全。并且在pycharm中，注释的快捷键也是 Ctrl + ？ 。
标签
head内常见标签
Head标签内的信息用于描述网页，即元数据：
1. title标签 控制网页小标题
<title>百度一下，你就知道</title>
2. style标签 定义内部样式的标签，支持写css代码
<style></style>
3. link标签 引入外部css文件
<link rel="stylesheet" href="//at.alicdn.com/t/font_1346053_111ghkv8md9.css">
4. script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
<script src="https://files.cnblogs.com/files/blogs/737883/main.js?t=1650533488"></script>
5. meta标签
5.1. 指定字符集
<meta charset="gbk">
5.2. 页面描述
<meta name="Description" content="具体描述。。。">
5.3. 关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
5.4. 3秒后跳转
<meta http-equiv="refresh" content="3,http://www.baidu.com">
5.5. 3秒后刷新
<meta http-equiv="refresh" content="3">
body内基本标签
body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的，虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情。
标题系列。语义：标记内容为一个标题，全称headline。h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
字体系列，修改样式
1. <br> 换行符
2. <hr> 分割线
3. <font> 修改字体大小，颜色
<font color="red" size="5px">红色字体，5px大小</font>
4. <b></b> 加粗
5. <u></u> 下划线
6. <s></s> 删除线
7. <i></i> 斜体
p标签与特殊符号p标签，标记内容为一个段落，全称paragraph。
# p标签 文本段落
<p></p>
# 特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 羊角符
© 版权
® 商标
布局标签
div标签：div标签用来定义一个块级元素，并没有实际的意义。主要通过CSS样式为其赋予不同的表演。
span标签：span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表演。
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的
注意:
关于标签的嵌套通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
# 写法
<div></div>
<span >我是span标签</span>
img标签。标记一个图片，全称image
# 用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
# 标签语义
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形。那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可。只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形。
a标签，标记一个内容为超链接，全称anchor，锚
# 超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
# a标签不仅可以标记文字，也可以标记图片
<a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
# a标签必须有href属性，href的值必须是http://或https://开头
# a标签还可以跳转到自己的页面
<a href="template/aaa.html">锤你胸口</a>
# target="_blank"代表在新页面中打开，其余的值均无需记忆，
# title="鼠标悬浮显示的内容"
页面内的锚点
#1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到的目标位置
#2、如何为html中的标签绑定一个独一无二的身份证号码呢？
在html中，每一个标签都有一个名称叫做id的属性
这个属性就是用来给标签指定一个独一无二的身份证号码的
#3、所以要想实现通过a标签跳转到指定的位置，分为两步
3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
#4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置
标签中的两大参数
# id
类似于身份证号，同一个html页面上标签的id值不允许重复。用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
# class
类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
列表标签----标记一堆数据是一个整体/列表
# 无序列表 unordered list
# 作用：制作导航条、商品列表、新闻列表等
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
<li>闪购</li>
<li>拍卖</li>
<li>京东服饰</li>
<li>京东超市</li>
<li>生鲜</li>
<li>全球购</li>
<li>京东金融</li>
</ul>
# 注意：ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签。
# 有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
# 虽然是有序列表，但是完全可以用无序列表取代。无序列表是使用频率最高的列表标签，页面上只有是有规则排列的横向或者竖向内容，几乎使用的都是无序列表。
表格属性 ----- 标记一段数据为表格
# 表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
# 格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行数据
td表一行中的一个单元格
# 表格属性
#1、宽度和高度
可以给table和td设置width和height属性
1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高
1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度
#2、水平对齐和垂直对齐
水平对齐align可以给table、tr、td标签设置
垂直对齐valign只能给tr、td标签设置
========水平对齐===========
取值
align=“left”
align=“center”
align=“right”
2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
强调：table只能设置水平方向
2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
========垂直对齐===========
取值
valign=“top”
valign=“center”
valign=“bottom”
2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐
#3、外边距和内边距
只能给table设置
3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"
浙公网安备 33010602011771号