HTTP协议；HTML

目录

  • HTTP协议

  • HTML

内容

前端：任何与用户直接打交道的界面都可以称之为前端；淘宝页面，游戏页面，操作页面

后端：不直接与用户打交道的内部代码

前端三剑客：HTML；CSS；JavaScript

HTML：网页的骨架；CSS：网页样式；JavaScript：网页动态效果

HTTP协议

可以充当客户端的有：

  1. 自己写的python代码（TCP客户端）
  2. 别人写的浏览器；CS架构与BS架构，BS本质也是CS
import socket

server = socket.socket()
server.bind(('127.0.0.1',8888))
server.listen(5)

while True: # 链接循环
    sock,add = server.accept()
    # while True: # 通信循环
    data = sock.recv(1024)
    print(data.decode('utf8'))
    sock.send(b'hello')
View Code

问题：我们自己写的TCP服务端与浏览器之间通信了，但是浏览器不识别服务端数据

不同的服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理

最佳的解决措施是统一规定一个标准>>>:HTTP协议

HTTP协议：规定了服务端与浏览器之间的数据交互格式及其他事项

如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容；

如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是不影响服务端；

如果这个应用特别火爆，那么完全可以让用户下载专属的客户端：APP

四大特性

基于请求、响应

服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应

于TCP/IP作用于应用层之上的协议

应用层协议：HTTP，HTTPS，FTP...

无状态

服务端不保存客户端状态

短链接

不保持客户端与服务端之间的链接通道（数据交互完毕就断开）

长链接：websocket (微信QQ加好友）

数据格式

请求格式

客户端给服务端发送消息应该遵循的数据格式

  1. 请求首行（请求方法，协议版本）
  2. 请求头（一大堆k:v键值对）
  3. （换行不能省略）
  4. 请求体（携带敏感数据：密码；身份证号...）

响应格式

服务端给客户端发送消息应该遵循的数据格式

  1. 响应首行（响应状态码，协议版本）
  2. 响应头（一大堆k:v键值对）
  3. （换行不能省略）
  4. 响应体（给浏览器展示给用户看的页面内容）
GET / HTTP/1.1 # 请求首行
Host: 127.0.0.1:8888
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="8"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.0.3161 SLBChan/105
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: https://www.baidu.com/s?ie=UTF-8&wd=127.0.0.1%EF%BC%9A8888&tn=15007414_dg
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9 # 以上都是请求头
# 换行
# 请求体
View Code

响应状态码

用数字表示一串中文意思（简化理解）

1XX：服务端成功接收到了你的数据正在处理，你可以等待或者继续发送

2XX：200 OK  表示请求成功，服务端给出响应

3XX：301\302  表示重定向（想访问A页面但是自动跳转到了B页面）

4XX：403  请求不合法（权限不够） ；404   请求资源不存在

5XX：都是服务端错误，与客户端无关（代码bug，机房炸了...）

在工作中还会自定义状态码（因为默认的不够），自定义状态码一般都是从10000开始

写后端需要给前端提供一个手册（里面列举了状态码的情况）# 聚合数据网

超文本标记语言：HTML

<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>

上述语法就是HTML，用于构建网页的骨架（所有的网页都是由HTML组成）

存放HTML代码的文件后缀名一般都是.html

HTML没有任何的逻辑，固定搭配：“所见即所得”

HTML文档结构

<html>
<head>给浏览器看的数据</head>
<body>给用户看的数据</body>
</html>

HTML标签的分类

  1. 双标签：有头有尾；<html>内容</html>
  2. 单标签：特殊功能；<img/>（图片标签）

打开HTML标签

  1. 查找并右键选择打开方式
  2. pycharm快捷方式：HTML文件内容区右上方浏览器图标

HTML标签其实没有缩进的概念，之所以缩进是为了更加美观

HTML注释语法

<!--单行注释-->

<!--
多行注释
-->

HTML由于标签非常的多，所以可以通过注释区分页面区域

在pycharm中的HTML文件内：注释的快捷键也是ctrl+?

head内常见标签

  1. title标签；控制网页小标题；
  2. style标签；内部支持编写css代码（检查左侧是HTML，右侧是CSS）
  3. link标签；引入外部css文件
  4. script标签；内部支持编写js代码，也可以通过src属性引入外部js文件
  5. meta标签；功能非常多
  6. keywords：搜索引擎查询关键字
  7. description：用于展示页面搜索结果的文本描述

编写标签：标签名称+tab键

正常的业务逻辑，HTML，CSS，JS都会分不同的文件存储，用于解耦合

body内基本标签

  1. 标题系列：h1~h6（1到6级标题）
  2. 字体系列：

    <i>斜体</i>
    <b>加粗</b>
    <u>下划线</u>
    <s>删除线</s>

  3. 文本段落：<p></p>（一段内容）
  4. 其他：hr：水平分割线；br：换行符 （都是单标签）

body内特殊符号

  1. &nbsp；空格
  2. &gt；&lt：大于号；小于号
  3. &amp；&符号
  4. &yen；羊角符
  5. &copy；版权
  6. &reg；商标

body内常见标签

布局标签

 

div标签（块级标签）：默认独占一行（可以后期调整）

span标签（行内标签）：自身内部文本多大就占多大

标签之间支持嵌套（最好是布局类相关标签参与）

块儿级标签可以嵌套任意标签，不属于布局标签的块儿级标签不建议嵌套块儿级标签，行内标签只能嵌套行内标签

页面的编写首先就是先用布局标签占位，之后填充内容即可

图片标签：img

  1. src：图片路径
  2. title：鼠标悬浮自动展示提示信息
  3. alt：当图片无法正常展示自动提示的信息
  4. height：自定义图片高度
  5. width：自定义图片宽度

height和width调整一个另外一个自适应，调节单位是px（像素）

链接标签：a

  1. href：点击跳转位置

    可以写网址，图片（放到a标签里面）
    <a href='网址'></a>

    也可以写标签id值
    <a href='页面上某个标签id值'></a>

  2. target：控制是否当前页面跳转

    默认_self当前页
    设置_blank新建页

标签的两大重要参数（标签的辨别）

  1. id （找一个）

    类似于身份证号，同一个html页面上标签的id值不允许重复
    用于精确查找某个标签（因为一个html页面上相同标签名的标签太多）

  2. class （找一批）

             类似于面向对象知识，可以将多个标签归为一类 分类查找（范围查找一次性多个）

列表标签

无序列表

<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>

无序列表是使用频率最高的列表标签，页面上只有是有规则排列的横向或者竖向内容，几乎使用的都是无序列表

表格标签

<table border = "1"> <!--表格框架-->
    <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>
View Code

posted @ 2022-04-22 18:28  顺溜_7  阅读(91)  评论(0)  编辑  收藏  举报