HTTP协议、 HTML介绍、head标签的使用、body中常用的标签、标签的分类1、特殊字符、div标签和span标签、标签的嵌套
什么是前端?
# 所有与用户直接打交道的都可以称之为是前端.------>能够直接使用肉眼直接看到的都是前端
举例：PC端页面、手机端页面、平板页面、车载显示器等
什么是后端：不直接与用户打交道的都可以称之为是后端，后端其实就是幕后操作者
举例：Python语言、Java、Go、C、C++、PHP等都是常见的后端语言
# 在招聘网站上常见的岗位描述：Python后端工程师、Java后端工程师、Go工程师、前端工程师等
Python全栈工程师、Java全栈工程师等
# 常见的招聘网站: Boss直聘、智联、拉钩、51等，互联网人一般都使用Boss直聘
为什么要学前端
我们只学习Python远远不够，甚至于只能找Python后端的工作
我们学完前端之后，就可以找到Python全栈工程师、学了前端我们就可以独立的搭建一个完成的项目出来
# 前端对于我们做后端的来说要求并不高，只要求能够写一些简单的页面和看得懂别人的写简单的前端代码，在能够调试一些基础的页面即可
前端需要学习的内容
"""前端三剑客"""
HTML：一个网站的骨架，没有任何的样式
CSS：就是给网页添加样式的，目的是让其更加的美观、好看、漂亮而已
JavaScript：它主要用来让网页动起来，简称js
# 还有学一些简单的前端框架
jQuery、bootstrap、Vue----->中国人开发的(尤雨溪)、react、angluar等
总结:
前端页面在浏览器中展示浏览器中的每一个页面，我们称之为网页文字、图片、音频、视频、超链接
等组成了网页前端技术由 html、css、js组成，实现网页展示效果前端可以做app、小程序、手机端，PC端，软件等
根据需求的不同，前端可以做很多实现如视频，游戏，后台管理，可视化展示等网页在不同浏览器中显示会有所不同，
因为不同浏览器渲染引擎不同，解析的效果会存在差异，因些推荐谷歌浏览器（Chrome）
软件开发架构
"""前端的学习只需要一个浏览器即可，前端的代码是有浏览器开解释的"""
1. C/S架构
2. B/S架构
# 前端的代码在哪里写呢?
在浏览器中写的前端代码不能够永久生效，只能临时看到效果，刷新页面就消失
因此，我们写前端代码依然需要写在文件里
# 辅助我们写前端的工具有哪些：
1. 都可以直接写在文本中.txt
2. vscode、pycharm、notepad++、sublime等
在浏览器中输入网站，按下回车键，到页面渲染成功，中间发生什么事情
"""
1. 客户端(浏览器)向服务端发起请求
2. 服务端接收浏览器的请求
3. 服务端要处理好前端要的数据返回
4. 把数据返回给前端---->浏览器中，按照一定的规则把后端返回的数据展示给用户
"""
# 如果我们写一个服务端，让浏览器充当我的客户端，我也可以写出一个基于浏览器的项目
# 目前我们缺的就是服务端，很显然我么可以通过socket写出来一个服务端
言外之意，浏览器是可以充当很多服务端的客户端的
1. 可以充当百度的客户端
2. 京东的
3. 腾讯视频的
...
# 问题：浏览器是如何识别是哪个服务端的
"""
所有的服务端必须遵循一个原则，这个原则就是浏览器来规定的，如果不遵循这个规则，那么你的数据我就没办法来识别，这个规则是什么?
"""
# 如果你的服务端返回的数据项被浏览器识别，你就必须遵循HTTP协议
HTTP协议
"""
超文本传输协议，作用：就是规定了服务端和客户端之间的数据传输格式
超文本传输协议，作用：就是规定了服务端和客户端之间的数据传输格式
"""
TCP协议、UDP协议、IP协议、以太网协议等协议
HTTP协议的四大特性:
1. 是基于请求和响应的------>请求：客户端主动向服务端发起请求------->响应：服务端向客户端返回
2. 它是基于TCP/IP协议之上的应用层协议，
# HTTP协议它是基于TCP协议写出来的
3. 无状态
# 就是它不能够保存用户的信息
'''背景：早期的网站用户是不需要登录的，比如新闻类的、博客类的网站是不需要登录的，也就不需要保存用户的消息。随着技术的发展，诞生了像支付宝、京东网站等网站， 就需要用户登录了，由于HTTP协议压根就不能保存用户信息，所以就诞生了一些保存用户信息的技术：'''
cookie、session、token...
4. 短链接/无连接
# 当服务端和客户端要想传输数据就必须建立连接，正常情况，二次成功发送一次消息就断开连接，称之为是短链接
长链接：二者成功发送一次消息之后，不会立马断开连接，而是中间会隔一段时间，如果双方都没有再次发送消息，就断开.
场景：客服系统(逻辑很复杂)
"""客户端向服务端发起请求会携带一些数据，就称之为是请求数据"""
HTTP协议的请求数据格式
常用的版本号就是http1.X版本，新版本应该是http2.x
请求首行(请求方式、协议/版本号)
请求头
\r\n ----回车---换行符
请求体(不是什么请求方式都有的，GET请求方式没有)
HTTP协议的响应数据格式
响应首行(响应状态码)
响应头
\r\n ----回车---换行符
响应体
响应状态码：
"""简单描述就是使用一个简单的数字代表一段复杂的描述性信息"""
1xx: 了解，服务端接收数据成功，客户端还可以继续提交
2xx：掌握，200，代表的是响应成功
3xx: 301, 302，代表的是重定向，代码内部帮助我们跳转到了指定页面
4xx：404，资源不存在，找不到，not found，制作404定制页面
5xx：500，服务器内部错误
以上图解：
"""如果你想深入了解HTTP协议，推荐看图解HTTP，图解TCP"""
# 重要
请求方式：
GET
"""朝服务端要数据的时候，一般都是使用GET请求方式"""
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=49055317_42_hao_pg&wd=%E7%BE%8E%E5%A5%B3
协议：// 域名/后缀/?参数
协议：// 域名/后缀/?k=v&k1=v1&k2=v2...
# URL: 统一资源定位符(网址)
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=49055317_42_hao_pg&wd=%E7%BE%8E%E5%A5%B3
POST:
"""朝服务端提交数据逇时候，一般使用POST请求方式"""
例子：百度的登录功能，把用户名和密码提交到百度的后端做验证.用的就是POST请求
对于以上GET图解：
对于以上POST图解：
面试题：聊聊GET请求和POST请求的区别
1. get请求方式数据不够安全，POST请求数据更加安全
2. GET请求方式没有请求体，而POST请求有请求体
3. GET请求能够携带的数据量没有POST请求携带的多
GET请求一般携带4KB的大小
POST请求基本上没有限制
"""记住：学前端，以后就是有谷歌浏览器，默认浏览器：360,qq,ie(必须不能用)"""
在前端中，最难的就是浏览器兼容性问题：同样的代码在不同的浏览器中展示的效果不一样
谷歌浏览器的兼容性是最强的，另外一点就是它非常好用的，调试代码方便等
HTML介绍：如果你想让你的网页在浏览器中正常显示，你就必须遵循HTML标签
<h1>helloworldaaa</h1>
<a href='http://www.baidu.com'>click me</a>
<img src='https://img2.baidu.com/it/u=2942449272,1418584815&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689699600&t=6840fd4bcbd7f1c87dd657700e7010db'>
# 以上这些标签就是HTML标签
h1
a
img
# HTML中标签的名字不能改只能这样写
HTML如何书写
"""HTML文件的后缀名是.html"""
1. 书写位置
# 文件中
# 浏览器中
# 各种工具中
2. 如何打开一个html文件
# 只需要使用浏览器打开文件即可，前端的代码就是浏览器来识别的
HTML文档介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
# head标签一般写的不是让用户看的
# body标签一般写什么内容，浏览器中就能够看到什么内容，给用户看的
# 主要就是学这两个标签的
以上例：
head标签的使用
常用标签
<title>你看我在哪里显示</title> # 标签顶部显示的内容
<link rel="stylesheet" href="css/my.css"> # 引入外部CSS
在pycharm中注释符号的快捷键是：ctrl + ?
body中常用的标签
你在浏览器中想看到什么就在这个标签中写
基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
标签的分类1
块儿级元素
# 独占一行，不管自身有多大，他自己就占一行
h1标题标签都是
p标签
hr标签
行内元素(内联元素)
# 自身文本有多大就占多大，不会独占一行
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
标签的分类2
双标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
h1标题标签都是
p标签
单标签
hr标签
br
img
a
特殊字符(实体符号)
内容 对应代码
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
div标签和span标签
div
span
这两个标签没有实际的意义，一般用来'布局'使用
div它是块儿级元素，给页面占布局
span标签是行内元素，用来给文本内容占布局
标签的嵌套
# 我们使用亲戚关系来表示标签之间的关系
<div> div标签是p标签的父标签
<p> p标签是div标签的儿子，是span标签的父标签
<span></span> span标签是p的儿子，是div的孙子
</p>
<p></p> # p标签是div标签的儿子，是p标签的兄弟，也是span的兄弟标签
<span></span>
</div>
"""
注释事项:
块级儿级元素能够嵌套所有的行内元素，块儿级元素也能够嵌套所有的块儿级元素，但是出了p标签之外
行内元素不能够嵌套块儿级元素，但是可以嵌套所有的行内元素
"""
# 前端里面一般不会轻易的报错!!!!!!!!，你写的代码不正确不规范，没有效果而已，但是不会报错.
# 前端是跟用户打交道的，不能随随便便的报错，要不然体验很差
其他
<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义列表中项目的描述。
<del> 定义被删除文本。
<details> 定义元素的细节。
<dir> 不赞成使用。定义目录列表。
<div> 定义文档中的节。
<dfn> 定义定义项目。
<dialog> 定义对话框或窗口。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> 不赞成使用。定义文字的字体、尺寸和颜色。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<h1> to <h6> 定义 HTML 标题，可以改变标题的大小。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<html> 定义 HTML 文档。
<i> 定义斜体字。
<iframe> 定义内联框架。
<img> 定义图像。
<input> 定义输入控件。
<ins> 定义被插入文本。
<isindex> 不赞成使用。定义与文档相关的可搜索索引。
<kbd> 定义键盘文本。
<keygen> 定义生成密钥。
<label> 定义 input 元素的标注。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<link> 定义文档与外部资源的关系。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义菜单列表。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象。
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 定义对象的参数。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> 定义 section。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> 定义媒介源。
<span> 定义文档中的节。
<strike> 不赞成使用。定义加删除线文本。
<strong> 定义强调文本。
<style> 定义文档的样式信
浙公网安备 33010602011771号