day44天 HTTP协议和前端html协议

╰半橙微兮° 2023-08-17 17:48 147阅读 0赞

# web服务器的本质(\*\*\*) #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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.clos

代码

在浏览器中敲入网址发生了几件事情

1.浏览器向服务端发送请求数据

2.服务端接收请求发送响应数据

3.服务端发送响应数据

4.浏览器接收响应 根据特定的规则来渲染页面给用户展示(响应数据跳转页面)

## HTTP协议(\*\*\*) ##

超文本传输协议

规定服务器与浏览器消息传输的数据格式

### 四大特性:(\*\*\*) ###

1.基于请求响应

2.基于TCP(传输协议)/IP( 地址) 之上的作用于应用层的协议

3.无状态(服务端不保存用户的状态)

4.无连接(请求一次,就响应一次,之后就立马端来连接,两者无任何关系)

如QQ,陌陌,之类的交友软件,用的是WEBSOCKET,相当于是HTTP协议的一个大的补丁,支持长连接.

### 格式(\*\*\*) ###

#### 请求数据格式 ####

<!DOCTYPE html>请求数据首行
    用来标识HTTP协议版本,当前请求方式
    <head>、</head>请求头
    一大堆   k:v键值对
    <body>、</body>请求体
    一些敏感信息

#### 响应数据格式 ####

<!DOCTYPE html>响应数据首行
    标识HTTP协议版本,当前响应方式
    <head>、</head>响应头
    一大堆 k:v键值对
    <body>、</body>响应体
    返回给浏览器页面的数据,通常响应体都是HTML页面

### 响应状态码(\*\*\*) ###

用一串简单的数字来表示一些复杂的状态或提示信息
    1XX:服务端已经成功接受了你的数据,正在处理,你可以继续提交数据
    
    2XX:服务端成功响应你想要的数据 (200:请求成功)
    
    3XX:重定向(当你在访问一个需要登录的页面时,你会发现跳转到登录页面     301   302   )
    
    4XX:请求错误(404:请求资源不存在,403:q请求资源不合法,或)
    
    5XX:服务器内部错误(500)

### 请求方式(\*\*\*) ###

get请求

朝服务器要资源

如:在浏览器中输入www.baidu.com

post请求

朝服务器提交资源

如:用户登录时,提交用户和密码

URL:统一资源定位符(网址)

# HTML #

超文本标记语言

要想让你的页面能够被浏览器正常显示出来,就的遵守HTML协议

也就是说,所有能够被浏览器显示的页面,内部都是HTML代码

浏览器只认识 html , css , ml

网页文件的扩展名：.html或.htm

##### web本质 #####

浏览器 与 服务器

文件 (后缀以 .html 结尾的文件 是 前端页面文件)

文件的后缀名 只是为了给人看 ,知道哪种类型文件,而相对于计算机来讲,只是一堆二进制数据

###### html注释 ######

写网页的一套规范

注释:

单行注释

多行注释

一般情况下 html的注释都会按照下面的方式书写

## HTML文档结构 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        定义一些配置,是用来给浏览器看的,不是给用户展示的
    </head>
    <body>
        是浏览器给用户展示的内容
    </body>
    </html>

### 打开HTML页面的俩种方式 ###

1.找到文件路径,选择浏览器打开

2.用pycharm快捷方式打开

### 标签的分类(1) ###

单标签

标签是单独呈现的

自闭和标签    <img/>    <br/>、<hr/>

双标签

第一个标签是开始，第二个标签是结束。结束标签会有斜线

## head内常用标签 ##

title    显示网络标题
    style    控制样式,内部支持写css代码
    script    内部支持写js代码,也支持外部导入js代码
    link    专门用来引入外部的css文件
    meta    定义网页原信息

### 重要属性 ###

id:
        定义标签的唯一ID，在一个html文档中id应该保证唯一不重复
        
    class:
        为html元素定义一个或多个类名（classname）(CSS样式类名)
        
    style:
        规定元素的行内样式（CSS样式） 属于行内样式 优先级最高
    任何标签都支持自定义属性!!!

### 标签的分类(2) ###

块级标签

独占浏览器一行
    如: <div></div>  <h></h>系列的   <p></p>     
    1.快级标签 可以修改长度
    2.p标签 不能嵌套其他块级标签,也不能嵌套p标签,但可以嵌套行内标签

总结:

只要是块级标签,都可以嵌套行内标签

p标签只能嵌套行内标签,其他块级标签可以嵌套任意的块级标签

行内标签

文本有多大,就占多大,由文本的内容撑开
    <span></span>    <b>加粗</b>    <i>斜体</i>    <u>下划线</u>    <s>删除</s>

div标签用来定义一个块级元素,span标签用来定义内联(行内)元素

div标签 和span 标签 通常是用来构建网页布局的

### body内标签 ###

##### 基本标签 #####

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<p>段落标签</p>
    
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    
    
    <br>  换行标签
    <hr/> 分割线标签
    <hr>

##### 转义字符 #####

空格  &nbsp
    >    &gt
    <    &lt
    版权    &copy
    注册    &reg
    &    &amp     
    ¥    &yun

##### 常用标签 #####

<div></div>      "架构"标签
    <span></span>    行文本标签
    <p></p>            段落标签
    <img/>            图片标签
    <a></a>            超链接标签

## img标签 ##

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
    
    
    src存放的是图片的路径(该路径可以是本地的也可以是网上的)
    　　1.也可以放url(会自动请求该url获取相应数据)
    　　2.也可以直接放图片的二进制数据 会自动转换成图片
    					
    alt当图片加载不出来的时候 显示的提示信息
    				
    　　title当鼠标悬浮在图片上 提示的信息
    				
    height,width 当你只指定一个参数的时候 另外一个会等比例缩放

### a标签 ###

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
    <a href="" id="d1">顶部</a>
    <div style="height: 1000px;background-color: red"></div>
    <a href="" id="d2" class="c1">中间</a>
    <div style="height: 1000px;background-color: green"></div>
    <a href="#d2">会到中间</a>
    <div style="height: 1000px;background-color: yellow"></div>
    <a href="#d1" username="jason" password="123">点我回到顶部</a>

href后面存放url的时候  点击跳转到该url
    如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
    								
    target 默认是_self当前页面跳转
    blank新建页面跳转
    				
    锚点功能(回到顶部)
        href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签

##### 列表标签 #####

1.无序列表

<ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>
    
    
    type属性：
    
    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）

2.有序列表

<ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>
    
    type属性：
    
    1 数字列表，默认值
    A 大写字母
    a 小写字母
    Ⅰ大写罗马
    ⅰ小写罗马

3.标题列表

##### 表格标签(\*\*) #####

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="20" cellpadding="10" cellspacing="10">
        <thead>
            <tr>
                <th>username</th>
                <th>password</th>
                <th>hobby</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">tank</td>
    
                <td rowspan="2">生蚝</td>
            </tr>
        <tr>
                <td>egon</td>
                <td>123</td>
    
            </tr>
        <tr>
                <td>jerry</td>
                <td>123</td>
                <td>大保健</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>

<table>
        <thead></thead>
         <tbody></tbody>
     </table>
    
    tr表示一行
         th和td都是文本
         建议在thead内用th
         tbody内用td
        
    属性:
    
    border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
    width: 像素 百分比.（最好通过css来设置长宽）
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列（即合并单元格）

##### 表单标签(\*\*\*) #####

能够接收用户输入(输入 选择 上传)并将其发送给后端

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h2>注册页面</h2>
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
        <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p>
        <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p>
        <p>
            <label for="d3">birthday:</label>
            <input type="date" id="d3" name="birth">
        </p>
        <p>性别:
            <input type="radio" name="gender" checked value="male">男
            <input type="radio" name="gender" value="female">女
        </p>
        <p>爱好:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="football">足球
            <input type="checkbox" name="hobby" checked value="doublecolorball">双色球
        </p>
        <p>省市:
            <select name="province" id="">
                <option value="sh">上海市</option>
                <option value="bj">北京市</option>
                <option value="sz">深圳市</option>
            </select>
        </p>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <p>头像:
            <input type="file" name="avatar">
        </p>
        <p>个人简介:
            <textarea name="info" id="" cols="30" rows="10"></textarea>
        </p>
        
        
        
        
        <input type="submit" value="注册1">
        <input type="button" value="注册2">
        <input type="reset" value="注册3">
        <button>button标签</button>
    
    
        
    
    </form>
    </body>
    </html>

###### action ######

action控制数据提交的目的地
       1.不写的情况下 默认提交到当前页面所在的路径
       2.写全路径(https://www.baidu.com)
       3.路径后缀(/index/)

###### input ######

<input> 元素会根据不同的 type 属性，变化为多种形态。

type
      text:普通文本
      password:密文 不展示明文
      date:日期
      submit:触发提交动作
      button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
      reset:重置表单内容
      radio:单选  可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked)  checked="checked"
      checkbox:多选 同上 可以设置默认值
      file:获取用户上传的文件
      hidden:隐藏输入框(防呆标签)
    属性说明:
    
    name：表单提交时的“键”，注意和id的区别
    value：表单提交时对应项的值
    type="button", "reset", "submit"时，为按钮上显示的文本按钮内容
    type="text","password","hidden"时，为输入框的初始值
    type="checkbox", "radio", "file"，为输入相关联的值
    checked：radio和checkbox默认被选中的项
    readonly：text和password设置只读
    disabled：所有input均适用

###### select ######

默认是单选  可以通过multiple变成多选
    如果想默认选择  用selected  (selected="selected")

###### label ######

定义：<label> 标签为 input 元素定义标注（标记）。
    说明：
    
    label 元素不会向用户呈现任何特殊效果。
    <label> 标签的 for 属性值应当与相关元素的 id 属性值相同

###### textarea标签 ######

获取用户输入的大段文本
    属性说明：
    
    name：名称
    rows：行数
    cols：列数
    disabled：禁用

小结:

form表单默认是get请求 你需要通过method参数 换成post提交
    form表单中 要想触发提交动作 
      只有两种情况可以
         1.input标签type指定成submit
         2.直接写button标签
                
    获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
    这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value
                 
            
     <input type="text" id="d1" name="username" value="默认值">
        name就相当于是字典的key
        value就是字典的值
        获取都的用户输入都会被放入value属性中
            
    form表单传文件的时候 需要指定enctype参数

###### flask小试 ######

from flask import Flask,request
    
    
    app = Flask(__name__)
    @app.route('/index/',methods=["GET","POST"])
    def index():
        print(request.form)  # 获取前端form表单提交过来的数据
        print(request.files)
        file_obj = request.files.get("avatar")
        file_obj.save('xxx.pdf')
        return '收到了'
    
    app.run()

######  ######

转载于:https://www.cnblogs.com/komorebi/p/11456235.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230808/20e6bb531b7a4cd882b0cc9d27b87447.png