Python正课101 —— 前端 入门
本文内容皆为作者原创，如需转载，请注明出处：https://www.cnblogs.com/xuexianqi/p/12867885.html
一：问号三连
什么是前端？
任何与用户直接打交道的操作界面 都可以称之为前端
比如：电脑界面 手机界面 平板界面
什么是后端？
后端类似于幕后操纵者（一大堆令人头皮发麻的代码）
不直接和用户打交道
为什么学前端？
因为我们是全栈开发工程师
但是 前端这一块我们不会学得很详细
只要求能够看得懂基本的前端代码 以及能够搭建一些简单的页面即可
先打下前端的基础 为后续可能需要的扩展做准备
学习的思路里历程？
1.信心满满 我一定可以学会 凭啥学不会
2.哎呦我去 好像有点难 可能学不会
3.擦 怎么还不毕业 我要出去挣大钱
4.卧槽 怎么毕业了 我啥都不会
每个学生都会经历上述的4个阶段
但是 学得好的同学 每个阶段只会经历一两天
学得差的自暴自弃的 可能每个阶段会持续一两个月
当你遇到这几个阶段 一定要快速地调整回来！
前端学习历程：
HTML:网页的骨架 没有任何的样式
CSS：给骨架添加各种样式 变得好看
JS：控制网页的动态效果
前端框架：Bootstrap、JQuery、Vue
提前给你封装好了很多操作 你只需要按照固定的语法调用即可
软件开发架构：
C/S：客户端 - 服务端
B/S：浏览器 - 服务端
ps：B/S本质也是C/S
浏览器窗口输入网址 回车后 发生了几件事？
1.浏览器 朝 服务端 发送请求
2.服务端 接收请求（请求百度首页）
3.服务端 返回相应的响应（返回一个百度首页）
4.浏览器 接收 响应 根据特定的规则渲染页面 展示给用户看
浏览器可以充当很多服务端的客户端
百度 腾讯视频 优酷视频...
如何做到浏览器能够与多个不同的客户端之间进行数据交互？
1.浏览器很牛逼 能够自动识别不同服务端 做不同的处理
2.制定一个统一的标准 如果你想要你写的服务端能够跟客户端之间做正常的数据交互 必须制定一些规则
二：HTTP协议：
HTTP就是Hyper Text Transfer Protocol（超文本传输协议）
用来规定服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 自己跟自己玩
你就可以自己写个客户端 客户想要使用 就下载你专门的app即可
# 四大特性：
1.基于请求响应
2.基于TCP/IP 作用与应用程序之上的协议
3.无状态
不保存用户的信息
eg：一个人来了一千次 你都记不住 每次都当他如初见
由于HTTP协议 是无状态的 所以后续出现了一些专门用来记录用户状态的技术：
Cookie、Session、Token...
4.无/短连接
请求来一次 我响应一次 之后就再也没有任何链接和关系了
长链接：双方建立连接后 默认不断开 websocket（后面讲项目的时候会讲）
# 请求数据格式
1.请求首行：用来标识当前HTTP协议版本、当前请求方式
2.请求头：一大堆k，v键值对
3.\r\n：换行符
4.请求体：并不是所有的请求方式都有，get没有，post有（存放的是post请求提交的敏感数据）
# 响应数据格式
1.响应首行：用来标识当前HTTP协议版本、响应状态码
2.响应头：一大堆k，v键值对
3.\r\n：换行符
4.响应体：并不是所有的请求方式都有，get没有，post有（存放的是post请求提交的敏感数据）
# 响应状态码：
用一串简单的数字表示一些复杂的状态或者描述性信息 404：请求资源不存在
分类 分类描述
1xx 服务端已经接收到了你的数据 正在处理 你可以继续提交额外的数据
2xx 服务端成功响应了你想要的数据（200 OK 请求成功）
3xx 重定向（当你在访问一个需要登录之后才能看的页面，会自动跳转到登录页面）
4xx 客户端错误，请求包含语法错误或无法完成请求
404：请求资源不存在
403：当前请求不合法 或者 不符合访问资源的条件
5xx 服务器错误，服务器在处理请求的过程中发生了错误（500，服务器炸了，机房着火了）
# 请求方式：
1.get请求：
朝服务端 要数据
eg：输入网址 获取对应的内容
2.post请求：
朝服务端 提交数据
eg：用户登录 输入用户名和密码之后 提交到后端做身份校验
# URL：Uniform Resource Locator 统一资源定位符，就是网址
三：HTML简介
HTML就是Hyper Text Markup Language超级文本标记语言
如果你想要浏览器能都渲染出你写的页面 你就必须遵循HTML语法
所有网站内部都是HTML代码 浏览器按F12可以查看源代码
<h1> Hello World</h1>
<a href = 'http://www.baidu.com'>点我</a>
<img src = 'https://images.cnblogs.com/cnblogs_com/xuexianqi/1652079/o_200221125314%E5%98%9A%E7%91%9F.gif'>
HTML就是书写网页的一天套标准
# 注释：注释是代码之母
<!-- 单行注释 -->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章 并且很多，所以我们习惯性地用注释来划分区域 方便后续的查找
<!-- 导航条开始 -->
导航条所有的HTML代码
<!-- 导航条结束 -->
<!-- 左侧菜单栏开始 -->
侧菜单栏HTML代码
<!-- 左侧菜单栏结束 -->
HTML文档结构
<html>
<head> </head>：head内标签不是给用户看的 而是定义一些配置 主要是给浏览器看的
<body> </body>：body内的标签写什么 浏览器就渲染什么 用户就看到什么
</html>
PS：文件的后缀名 其实是给用户看的，只不过对应不同的文件后缀名 有不同的软件来处理 并添加很多功能
注意：HTML代码是没有格式的，可以全部写在一行都没问题，只不过我们习惯了缩进来表示代码
2种打开HTML文件的方式
1.找到文件所在的位置，双击打开
2.在pycharm内部，集成了自动条用浏览器的功能，直接点击即可
（前提是你的电脑上安装了该浏览器）推荐使用谷歌浏览器
四：标签的分类
<h1> </h1>
<a href = 'http://www.baidu.com'></a>
<img/>
1.双标签
2.单标签（自闭和标签）
1.head内常用标签：
在书写HTML代码的时候 只需要写标签名 然后按Tab键即可自动补全
<title>Title</title> 网页标题
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训"> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
2.body内常用标签
你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
基本标签
<h1>我是h1</h1> 标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
标签的分类2
# 1 块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
商标® ®
常用标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
img标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
标签具有的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>
列表标签
-
无序列表(较多)
<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> </ul> 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签 -
有序列表(了解)
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> 1 A I a ... 参考博客了机即可 -
标题列表(了解)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
总结
"""
学习前端就是死记硬背 思想关联一定要改变
学习HTML的时候 它是一门标记语言
你在学的时候 你就记每一个标签到底表示什么意思
p
h
"""
