前端
前端简介
# 1.什么是前端 什么是后端
前端
任何与用户直接打交道的界面都可以称之为前端
eg:淘宝页面 游戏页面 操作页面
后端
不直接与用户打交道的用于执行真正业务逻辑的代码
eg:python代码 java代码 c++代码
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
真正的前端工程师也需要培训六个月左右 我们作为python全栈工程师只需要掌握前端最核心的知识点即可 做到能看到前端代码并且将来有能力去钻研前端即可
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知识脉络:
HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
只要学习前端看到要学'前端三剑客'>>>:HTML CSS JavaScript
比喻说明:
HTML:网页的骨架
蜡笔小新不穿衣服 赤裸裸的(难看)
CSS:网页的样式
穿上衣服 化好妆(好看)
JavaScript:网页的动态效果
扭起来 跳起来 动起来(生动)
Web服务本质
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
HTTP简介
# 可以充当客户端的有哪些?
1.自己写的python代码(TCP客户端)
2.别人写的浏览器
'''cs架构与bs架构:bs本质也是cs'''
# 问题
我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据
# 推导
不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理
最佳的解决措施是统一规定一个标准>>>:HTTP协议
# HTTP协议
规定了服务端与浏览器之间的数据交互格式及其他事项
"""
如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容
如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端
如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)
"""
HTTP协议
四大特性
1.基于请求、响应
服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
2.基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP ...
3.无状态
服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
4.短连接
不保持客户端与服务端之间的链接导通
补充:websocket(长连接) 主要用于加好友聊天等业务
数据格式
请求格式:客户端给服务端发送消息应该遵循的数据格式
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开始
# 以后我们进公司写后端也需要给前端提供一个手册
eg:聚合数据
HTML简介
HTML是什么？
1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
3. 网页文件的扩展名：.html或.htm
'''HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。'''
========================================================================================================
<h1>good afternoon everybody</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注释语法
1. <!--单行注释-->
2. <!--
多行注释
-->
'''html由于标签非常的多 所以可以通过注释区分页面区域'''
补充
1.如何打开html标签? 1.查找并右键选择打开方式
2.pycharm快捷方式(重要) html文件内容区右上方浏览器图标
2.html标签其实没有缩进的概念 , 之所以缩进是因为我们习惯了 更加美观
3.在pycharm中的html文件内 , 编写标签只需要写表名名称即可 按tab键自动补全
4.在pycharm中的html文件内 , 注释的快捷键也是ctrl+?
head内常见标签
# head标签内编写的标签一般都是给浏览器看的
title标签 控制网页小标题
style标签 内部支持编写css代码
link标签 引入外部css文件
script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
meta标签 功能非常多
keywords:搜索引擎查询关键字
description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""
body内特殊符号
空格
> 大于号 [>]
< 小于号 [<]
& &符号
¥ 羊角符 [￥]
© 版权
® 商标 [注册商标]
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>
"""
'''块儿级标签:h1~h6 p div
默认独占浏览器一行内
行内标签:s i u b span
自身内部文本多大就占多大'''
标签之间支持嵌套(最好是布局类相关标签参与)
块儿级标签可以嵌套任意标签
不属于布局标签的块儿级标签不建议嵌套块儿级标签
行内标签只能嵌套行内标签
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
p标签不能包含块级标签，p标签也不能包含p标签。
1.布局标签[div标签和span标签]
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
# 页面的编写首先就是先用布局标签占位 之后填充内容即可
ps:课下随便找几个网站查看一些div的使用
2.图片标签
img
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
# height和width调整一个另外一个自适应调节 单位是px(像素)
""" <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"> """
3.链接标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
标签两大重要参数
1.id
类似于身份证号 同一个html页面上标签的id值不允许重复
用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
列表标签
# 无序列表
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
"""
无序列表是使用频率最高的列表标签
页面上只有是有规则排列的横向或者竖向内容 几乎使用的都是无序列表
"""
# 有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
表格标签
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table >
<thead>
<tr> <!--tr表示一行-->
<th>编号</th> <!--th加粗文本-->
<th>姓名</th>
<th>年龄</th>
</tr>
</thead> <!--表头字段-->
<tbody>
<tr>
<td>1</td> <!--td普通文本-->
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>tony</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>kevin</td>
<td>38</td>
</tr>
</tbody> <!--表单数据-->
</table>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
浙公网安备 33010602011771号