首页 > 其他分享 >html篇

html篇

时间：2022-09-21 09:22:05浏览次数：83  
标签：http 请求 -- 312312321 html 服务器 客户端

BS架构和http协议

bs架构的服务端和客户端来模拟http请求

服务端.py

# -*- encoding:utf-8 -*-
# @time: 2022/9/16 11:20
# @author: Maxs_hu
import socket


s = socket.socket()
s.bind(("127.0.0.1", 8088))
s.listen(5)

while True:  # 通信循环
   conn, addr = s.accept()
   data = conn.recv(1024)
   print(data.decode('utf8'))
   conn.send('HTTP/1.1 200 OK\r\ncontent-type: text/html;charset=UTF-8\r\n\r\n'.encode('utf8'))
   with open('a.html', 'rb') as f:
       for item in f:
           conn.send(item)

   """
   HTTP/1.1 200 OK  # 状态码
   k1: v1
   k2: v2
   k3: v3
   
   hello
   """
   conn.close()

s.close()

# 服务器接收到两次请求. 第一次是接收到访问网站的请求. 第二次是浏览器寻找图标文件ico

浏览器.py

# -*- encoding:utf-8 -*-
# @time: 2022/9/16 11:27
# @author: Maxs_hu
import socket


client = socket.socket()
client.connect(("127.0.0.1", 8080))

client.send(b'hellodfjasdklfaj')
data = client.recv(1024)
print(data.decode('utf8'))

client.close()

基于http协议向服务端发送请求. 服务端会收到服务器的信息

http协议的介绍

一. http请求/响应步骤:
    1. 客户端连接到web服务器
        一个http客户端. 通常是浏览器. 与web服务器的http端口(默认为80)建立一个tcp套接字链接.
    例如: http://www.oackcms.cn

    2. 发送http请求
        通过tcp套接字. 客户端向web服务器发送一个文本的请求报文. 一个请求报文由请求行.请求头部.空行
    和请求数据四个部分组成

    3. 服务器接收并返回http响应
        web服务器解析请求. 定位请求资源. 服务器将资源副本写到tcp套接字. 由客户端读取. 一个响应由状态行
    响应头部. 空行和响应数据四个部分组成

    4. 释放链接tcp链接
        若connection模式为close. 则服务器主动关闭tcp链接. 客户端被动关闭链接. 释放tcp链接. 若connection
    模式为keepalive. 则该连接会保持一段时间. 在该时间段内可以继续接收请求

    5. 客户端浏览器解析html内容
        客户端浏览器首先解析状态行. 查看表明请求是否成功的状态代码. 然后解析每一个响应头. 响应头告知以下为
    若干字节的html文档和文档的字符集. 客户端浏览器读取响应数据html. 根据html的语法对其进行格式化. 并在浏览器窗口显示

二. 响应状态码
    1xx: 指示信息--表示请求已接收.继续处理
    2xx: 成功--表示请求已经被成功接收.理解.接受
    3xx: 重定向--要完成请求必须进行进一步的更改
    4xx: 客户端错误--请求语法有错误或请求无法实现
    5xx: 服务器端错误--服务器未能实现合法的请求

    200 OK                      // 客户请求成功
    400 Bad Request             // 客户端请求有语法错误.不能被服务器锁解析
    401 Unauthorized            // 请求未经授权. 这个状态码必须和www-authenticate报头域一起使用
    403 Forbidden               // 服务器收到请求. 但是拒绝提供服务
    404 Not Found               // 请求资源不存在
    500 Internal Server Error   // 服务器发生不可预期的错误
    503 Server Unavailable      // 服务器当前不能处理客户端的请求. 一段时间后可恢复正常
    更多状态码: http://www.runoob.com/http/http-status-codes.html

三. cookie season token的大概机制以及演变过程
     Cookie是为了解决HTTP协议无状态的问题，而他是怎么解决的呢？它会在服务器端设置一个key value，
然后将这个key传递给客户端，客户端存在本地，下一次发送请求的时候，客户端会携带这个key，发送给服务端，服务端拿着这个key去寻找value，
然后找到用户的登录状态就登录进去形成一个session，cookie不安全的一个原因就是客户端可以篡改，而加了这种机制过后，客户端篡改之后就登陆不了了，就保证了登录状态中cookie的安全性，
而session是cookie里面的一种机制，从服务端返回cookie中的session ID也就是key，而这种登录状态就相当于服务器的一种， Session会话
     Cookie复制到别的浏览器中依旧可以登陆，这不是cookie的安全性问题，而是电脑的问题
     同一个软件可能有10台服务器在后台运行 ，当第1个用户向负载均衡发送请求，负载均衡会将这个请求随机分配给一个服务器，
这个服务器会返回一个session id，给这个用户登录，但是当这个用户下一次登录的时候，将这个session ID发送给负载均衡可能分配的就不是上一次的那个服务器了，
这就会产生了登陆问题，所以我们得重新用一台电脑里面装着一个软件叫redis的意思，而这个redis呢就是为了共享session会话，
当用户登录的时候，这个负载均衡就会统一向redis这个机器上去请求，去判断登陆状态
    这种机制虽然是防止了用户篡改的问题，但是却大大增加了服务器的压力，当用户量过多，承载release这个服务器就必须得再继续做集群，这就又提高了服务器的成本，
所以后面大家都说去你妈的session，所以最后又出现了一个东西叫token，使用Jwt技术做一个加密形成token，而token只存在于客户端占用的也是客户端的空间

html标签

head内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    设置网页检索keyword-->
    <meta name="keywords" content="开发者, 程序员, 博客园, 程序猿, 程序媛, 极客, 码农, 编程, 代码, 软件开发, 开源, IT网站, 技术社区">
    <meta name="description" content="我是一个容易让人冲的网站">
    <meta http-equiv="refresh" content="5, http://www.baidu.com">

    <title>冲一下. 你就知道</title>
    <link rel="icon" href="img/bitbug_favicon.ico">

<!--    添加样式-->
<!--    <style>-->
<!--        p {-->
<!--            color: #ff0d31;-->
<!--        }-->
<!--    </style>-->

<!--    使用link添加样式-->
    <link rel="stylesheet" href="css/index.css">

<!--    <script>-->
<!--        // alert("哈啊哈哈");-->

<!--        function changeColor(ths){-->
<!--            ths.style.backgroundColor="yellow";-->
<!--        }-->
<!--    </script>-->

    <script src="js/a.js"></script>

</head>
<body>
    <h2>Hello</h2>
<!--    调用点击操作-->
    <h1 onclick="changeColor(this)">->冲我<-</h1>
</body>
</html>

html标签的语义化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--换行-->
你好<br>哈哈哈
<hr>

<!--<b>加粗</b>-->
<strong>强调</strong>

<!--<u>下划线</u>-->
<ins>插入</ins>

<!--<i>倾斜</i>-->
<em>倾斜</em>

<!--<s>删除</s>-->
<del>删除</del>


</body>
</html>

字符实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    字符实体空格符-->
    你好&nbsp;&nbsp;&nbsp;&nbsp;快来洗脚&nbsp;&nbsp;&nbsp;洗完冲

    <p>&lt;print&gt;</p>
    <p>1000000000&yen;</p>
    <p>maxs_hu&amp;Mcoco</p>
    <p>&Theta;</p>

    <a href="https://tool.chinaz.com/Tools/HtmlChar.aspx">这是关于各种符号的文档</a>

</body>
</html>

这是各种符号的文档: https://tool.chinaz.com/Tools/HtmlChar.aspx

img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    title设置悬浮提示 alt当图片不存在的时候给的提示-->
<!--    <img src="img/1.jpg" title="这是一个帅气的狗子" alt='照片被怪兽吃掉了' width="300px" height="700px">-->
    <img src="img/1.jpg" title="这是一个帅气的狗子" alt='照片被怪兽吃掉了' width="300px">
</body>
</html>

a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--点击文字和图片实现跳转页面-->
    <a href="http://www.baidu.com">点我啊</a>

    <a href="http://www.baidu.com">点我
        <img src="img/1.jpg" alt="" title="我是一直帅气的狗子">
    </a>


<!--  target默认为_self(当前页面跳转). 改成_blank会跳转到另外一个空白页-->
    <a href="http://www.baidu.com" title="i am a handsome dog" target="_blank">click me</a>



<!--跳转到开头 第一个直接跳转到开头 第二个会刷新页面跳转到开头-->
    <a href="#">点我啊</a>
    <a href="">点我啊</a>

<!--    假链接: 配合js代码实现自己想要的效果-->
    <a href="javascript:">点我啊</a>



<!--    页面的描点-->
    text-decoration:none -> 去掉下划线 在需要跳转的位置设置一个空a标签. 这样可以省掉id的位置
    <p>
        <a rel="nofollow noopener" href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">一 编程与编程语言</a>
    </p>
    <p>
        <a rel="nofollow noopener" href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px">二 开发</a>
    </p>

    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <a href="" name="p1"></a>
    <p style="color: red">312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <a href="" name="p2"></a>
    <p style="color: #0059ff">312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>
    <p>312312321</p>


</body>
</html>

列表 table form表单

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    设置标签无样式-->
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
<!--无序列表-->
<ul>
    <li>maxs_hu</li>
    <li>Mcoco</li>
    <li>alex</li>
</ul>

<!--有序列表-->
<ol>
    <li>list</li>
    <li>dic</li>
    <li>str</li>
</ol>

<!--自定义列表-->
<dl>
    <dt>智商排名</dt>
    <dd>maxs_hu</dd>
    <dd>Mcoco</dd>
    <dd>alex</dd>
</dl>

<!--练习题-->
<dl>
    <dt>购物表单</dt>
    <dd>111</dd>
    <dd>111</dd>
    <dd>222</dd>

    <dt>购物流程</dt>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>

    <dt>支付方式</dt>
    <dd>111</dd>
    <dd>111</dd>
    <dd>111</dd>
</dl>

<hr>
<h1>物品清单</h1>
<ul>
    <li>
        <h2>蔬菜</h2>
        <ul>
            <li>西红柿</li>
            <li>萝卜</li>
            <li>青菜</li>
        </ul>
    </li>
    <li>
        <h2>水果</h2>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
        </ul>
    </li>
</ul>


</body>
</html>

table标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    表格的一些常用用法-->
    <table border="1px" width="300px" height="500px" align="right">
<!--        left bottom 左下-->
        <tr align="left" valign="bottom">
            <td width="50px" align="right">姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr align="right" valign="center">
            <td>maxs_hu</td>
            <td>Mcoco</td>
            <td>alex</td>
        </tr>
        <tr align="top" valign="bottom">
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>male</td>
            <td>female</td>
            <td>male</td>
        </tr>
    </table>



<!--细线表格的实现方式一: 设置单元格间隔为0. 让两条线合并 -->
    <table border="1px" width="300px" height="500px" align="left" cellspacing="0px">
        <tr align="left" valign="bottom">
            <td width="50px" align="right">姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr align="right" valign="center">
            <td>maxs_hu</td>
            <td>Mcoco</td>
            <td>alex</td>
        </tr>
        <tr align="top" valign="bottom">
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>male</td>
            <td>female</td>
            <td>male</td>
        </tr>
    </table>

<br>

<!--细线表格实现方式二: 设置style-->
    <table border="1px" width="300px" height="500px" align="right" style="border-collapse: collapse;border: 1px solid">
        <tr align="left" valign="bottom">
            <td width="50px" align="right">姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr align="right" valign="center">
            <td>maxs_hu</td>
            <td>Mcoco</td>
            <td>alex</td>
        </tr>
        <tr align="top" valign="bottom">
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>male</td>
            <td>female</td>
            <td>male</td>
        </tr>
    </table>



</body>
</html>

table表格合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--设置格式为单线表格    -->
    <style>
        table {
            border-collapse: collapse;
            border: 1px solid;
        }
    </style>

</head>
<body>
<!--合并单元格-->
<table border="1px" width="300px" height="500px" align="right" style="border-collapse: collapse;border: 1px solid">
        <tr align="left" valign="bottom">
            <td width="50px" align="right">姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr align="right" valign="center">
            <td>maxs_hu</td>
<!--            将第二列和第三列合并-->
            <td colspan="3" align="left">Mcoco</td>
        </tr>
        <tr align="top" valign="bottom">
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>male</td>
            <td>female</td>
            <td>male</td>
        </tr>
    </table>
<hr>


<!--传统表格格式-->
<table border="1px" width="500px" height="500px">
    <caption>冲吧俱乐部</caption>
    <thead>
        <th align="center">姓名</th>
        <th>年龄</th>
        <th>冲过几次</th>
    </thead>
    <tbody>
        <tr align="center">
            <td>裴腰</td>
            <td>70</td>
            <td>7万次</td>
        </tr>
        <tr align="center">
            <td>孙庆军</td>
            <td>88</td>
            <td>8亿次</td>
        </tr>
        <tr align="center">
            <td>枕家里</td>
            <td>20</td>
            <td>20亿次</td>
        </tr>
    </tbody>
</table>


</body>
</html>

form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表单知识点-->
<!--提交表单并使用get和post发送请求-> get: 网页直接携带params. post: form_data携带数据提交表单-->
<form action="http://127.0.0.1:8080/" method="get" enctype="application/x-www-form-urlencoded">
    <p>
<!--    label绑定id. 然后点击文字也可以锁定输入框-->
        <label for="inp1">姓名:</label>
        <input id="inp1" type="text" name="username" placeholder="请输入用户名">
    </p>
    <p>
        <label for="inp2">密码:</label>
        <input id="inp2" type="password" name="password" placeholder="请输入密码">
    </p>
    <p>
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="null">未知
    </p>
    <p>
        <input type="checkbox" name="hobbies" value="sing" checked>唱
        <input type="checkbox" name="hobbies" value="dump">跳
        <input type="checkbox" name="hobbies" value="rap">rap
        <input type="checkbox" name="hobbies" value="basketball">打篮球
    </p>

    <input type="text" disabled name="k">

    <textarea name="content" id="" cols="30" rows="10" style="resize: none">
        this is comment area!!!
    </textarea>

    <p>
        <select name="籍贯" size="2">
<!--        label起提示作用-->
            <optgroup label="一线城市">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州" selected>广州</option>
            </optgroup>
            <optgroup label="二线城市">
                <option value="合肥">合肥</option>
                <option value="芜湖">芜湖</option>
                <option value="池州" selected>池州</option>
            </optgroup>
        </select>
    </p>
    <p>
        <input type="submit" value="登录">
    </p>
</form>
</body>
</html>

以上是总结的html的一些基础知识点

标签：http,请求,--,312312321,html,服务器,客户端
From： https://www.cnblogs.com/Maxs-message/p/16714425.html

相关文章

  • HTML5中的表单详解！
    表单是什么？对于用户而言是数据的录入和提交的界面对于网站而言获取用户信息的途径HTML<form>元素表示文档中的一个区域，此区域包含交互控件，用于向Web服务器提交信息......
  • 前端面试总结01-html与css
    html:(1)语义化标签的理解:1.增加代码的可读性2.让搜索引擎更容易读懂(2)块级元素与内联元素的标签与区别1.块状元素：display:block/table;常用标签：div,h1,h2,table,ul......
  • HTML大文件上传解决方案实例代码
    ​在Web应用系统开发中，文件上传和下载功能是非常常用的功能，今天来讲一下JavaWeb中的文件上传和下载功能的实现。先说下要求：PC端全平台支持，要求支持Windows,Mac,Linux支......
  • HTML详解、HTML标签分类
    什么是HTMLHTML（超文本标记语言——HyperTextMarkupLanguage）是构成Web世界的一砖一瓦。它定义了网页内容的含义和结构。除HTML以外的其它技术则通常用来描述一个网页......
  • 新开源HTML5单文件网页版ACME客户端，可在线申请Let's Encrypt、ZeroSSL免费HTTPS多域名
    目录开源项目的起源项目地址使用方法第一步：选择Let'sEncrypt、ZeroSSL或其他证书颁发机构第二步：证书配置，填写域名第三步：完成域名所有权的验证第四步：下载保存证书PEM文件源......
  • 如何使用html制作简历
    今天跟大家分享一下,如何制作简历页面  从图片可以观察到,头部"个人简历"使用那几个常用的文本标签<span>或者<p>,<h1>即可;简历里有很多的栏,这就需要用到table标签来......
  • delphi中WEBBrowser网页html相互调用（一）
    1、基本操作1.1、激活vardoc,url:Olevariant;beginurl:='about:blank';//或者一个有实际意义的urlWebBrowser1.Navigate2(url);//这样就激活了！end;1.2、写HTM......
  • Delphi 用程序实现自动的html操作
    unitUnit1; interface uses Windows,Messages,SysUtils,Variants,Classes,Graphics,Controls,Forms, Dialogs,OleCtrls,SHDocVw,mshtml,StdCtrls,......
  • HTML5
    HTML :HyperTextMarkupLanguage封装JS的库  Jqueryw3c 标准 万维网联盟结构化标准语言（HTMLXML）表现标准语言(CSS)行为标准(DOMECMAScript)......
  • HTML基础
    第二天HTML基础列表标签ul无序列表（只允许包含li标签）li可以包含任意内容 ol有序列表（只允许包含li标签）li可以包含任意内容 dl自定义列表（只允......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99