前端微讲解
前端微讲解
1.HTTP协议简介
# 1.HTTP协议
规定了服务端与浏览器之间的数据交互格式及其他事项。
如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容，如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是
不会影响服务端。
# 2.四大特性
1.基于请求、响应:服务端永远不会主动给客户端发信息，必须是客户端先请求，服务端被动响应。
2.基于TCP/IP作用于应用层之上的协议，常见的有HTTP,HTTPS,FTP...
3.无状态:服务端不保存客户端状态
4.短连接:不保持客户端与服务端之间的链接(websocket长连接，能够长时间保持链接)。
# 3.数据格式
1.请求格式:客户端给服务端发送消息应该遵循的数据格式
(1)请求首行(请求方法、协议版本)
(2)请求头(一大堆K:V键值对)
(3)换行
(4)请求体(携带敏感数据，比如密码身份证号...)，但是不是一直都有的
2.响应格式:服务端给客户端发送信息应该遵循的数据格式
(1)响应首行(响应状态码，协议版本)
(2)响应头(一大堆K:V键值对)
(3)换行
(4)响应体(在浏览器展示给用户看的)
# 4.响应状态码
1XX:服务端成功接收到了客户端的数据正在处理，客户端可以选择等待结果或者继续发送
2XX:常见的就是200 OK,表示请求成功，服务端给出了响应
3XX:常见的是301/302，都表示重定向，意思就是想访问A页面但是自动跳转到了B页面
4XX:常见的是403、404,403表示请求不合法，也就是权限不够，404表示资源不存在
5XX:服务端错误，与客户端无关
'''以后我们还会自定义状态码，因为默认的不够用，自定义状态码一般都是从10000开始'''
# 代码演示
import socket
server = socket.socket()
server.bind(('127.0.0.1',8888))
server.listen(5)
sock,addr = server.accept()
data = sock.recv(1024)
sock.send(b'HTTP/1.1 200 OK\r\n\r\nhello world!') # HTTP的格式
2.前端简介
# 1.什么是前端，什么是后端
1.前端:任何与用户直接打交道的界面都可以称之为前端
2.后端:不直接与用户打交道，用于执行真正的业务逻辑
# 2.前端三剑客
1.HTML:网页的骨架
2.CSS:网页的样式
3.JavaScript:网页的动态效果
3.HTML简介
1.存放HTML代码的文件后缀名一般都是.html
2.HTML是超文本标记语言，它没有任何的逻辑和固定搭配
3.HTML标签分类:
(1)双标签:有头有尾，内容写在中间
(2)自闭和标签:也叫单标签，一般都有特殊的功能
4.HTML文档结构:
<html>
<head>给浏览器看的数据</head>
<body>给用户看的数据</body>
</html>
5.HTML注释语法:
(1)单行注释:<!--单行注释-->
(2)多行注释:<!--
多行注释
-->
4.head内常见标签
1.title标签:控制网页小标题
2.style标签:内部支持编写css代码
3.link标签:引入外部css文件
4.script标签:内部支持编写js代码，也可以通过src属性引入外部js文件
5.meta标签:
(1).keywords:搜索引擎关键字
(2)description:用于展示页面搜索结果的文本描述
5.body内基本标签
1.标题系列:h1~h6(1~6级标题)
2.字体系列:
(1):<i>斜体</i>
(2):<b>粗体</b>
(3):<u>下划线</u>
(4):<s>删除线</s>
3.文本段落:<p>文本段落</p>
4.水平分割线:<hr/>
5.换行符:<br/>
6.body内特殊标签
空格: 
大于号:>
小于号:<
&符号:&
羊角符:¥
版权符:©
商标符:®
7.body内常见标签
1.布局标签:div、span
页面的编写首先就是先用布局标签占位，之后填充内容即可
2.图片标签:<img src = "图片路径" title = "鼠标悬浮自动展示提示信息" alt = "当图片无法正常展示自动提示的信息" height =
"自定义图片高度" width = "自定以图片宽度">
'''title、alt、height、width不是必须填写'''
3.链接标签:<a href = "点击跳转到的位置">，也可以写标签id值，跳转到页面标签id的值，'target'控制是否当前页跳转，默认_self
当前页，设置_blank新建页
8.标签的两大重要参数
1.id:类似于身份证号，同一个html页面上的标签的id值不允许重复，用于精确查找某个标签。
2.class:类似于面向对象知识，可以将多个标签归为一类，用于分类查找
9.列表标签
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
10.表格标签
<table>
<thead> <!--表头字段-->
<tr> <!--tr表示一行-->
<th>编号</th> <!--th加粗文本-->
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--表单数据-->
<tr>
<td>1</td> <!--td普通文本-->
<td>oscar</td>
<td>21</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td> <!--td普通文本-->
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
这里是IT小白陆禄绯，欢迎各位大佬的指点！！！
浙公网安备 33010602011771号