二十三.Python _Web编程

Python _Web编程

#模拟Web服务器

#模拟Web服务器
#导入selectors和socket模块
import selectors,socket
#创建server类
class server:
    def __init__(self):
        #创建socket服务器
        self.sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
        #创建IO多路复用
        self.sel=selectors.DefaultSelector()
        #HTTP协议请求头
        self.format="HTTP/1.1 201 OK \r\n\r\n"
        #执行conf方法
        self.conf()
    def conf(self):
        #绑定ip和端口
        self.sock.bind((input("host>>"),int(input("port>>"))))
        #开启监听
        self.sock.listen(5)
        #注册监听事件,请求该事件,调用acce方法
        self.sel.register(self.sock,selectors.EVENT_READ,self.acce)
        #开启selectors的select
        self.getLink()
    def getLink(self):
        while 1:
            #阻塞运行,请求返回请求的对象
            events=self.sel.select()

            for k,i in events:
                #获取请求成功的回调函数
                fun=k.data
                #执行回调函数,k.fileobj获取对象
                fun(k.fileobj,i)
    def acce(self,fun,mask):
        #获取客户端的连接
        conn,addr=fun.accept()
        #注册客户端监听的事件
        self.sel.register(conn,selectors.EVENT_READ,self.read)
    def read(self,fun,mask):
        try:
            #接收信息
            data=fun.recv(1024).decode("utf-8")
            #打印接收的信息
            print(data)
            #发送HTTP协议头
            fun.sendall(self.format.encode("utf-8"))
            #发送信息
            fun.sendall("<h1>hello World</h1>".encode("utf-8"))
            # while 1:
            #     da=input("*-*")
            #     if da=="quit":
            #         raise Exception
            #     fun.sendall(da.encode("utf-8"))
        except Exception as e:
            #异常,取消注册该连接的事件
            self.sel.unregister(fun)
            #关闭连接
            fun.close()


if __name__ == '__main__':
    #启动类
    server()

#HTML使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网页刷新-->
    <!--<meta http-equiv="Refresh" content="2;url=http://www.baidu.com">-->
    <!--网页描述-->
    <meta name="description" content="1111">
    <!--网页关键字-->
    <meta name="keywords" content="12312">
    <!--修改网页图标-->
    <link rel="icon name" href="https://static.veer.com/veer/static/img/favicon.ico">
    <!--网页标题-->
    <title>首页</title>
</head>
<body>
<div id="top"></div>
<!--Hn-->
<!--<h1>Hello World</h1>-->
<!--<h2>Hello World</h2>-->
<!--<h3>Hello World</h3>-->
<!--<h4>Hello World</h4>-->
<!--<h5>Hello World</h5>-->
<!--<h6>Hello World</h6>-->
<h1>注册页面</h1>
<!--enctype="multipart/form-data"  上传文件的配置-->
<form action="" method="post" enctype="multipart/form-data">
    <!--lable 定向到某个id-->
    <!--placeholder  未输入时显示的信息-->
    <!--disabled  禁用标签-->
    <p><label for='name'>姓名</label><input type="text" id="name" name="username" disabled placeholder="请输入用户名"></p>
    <p><label for="password">密码</label><input type="password" id="password" name="userpassword" placeholder="请输入密码"></p>
    <!--checked 默认选中多选框-->
    <p>爱好:听歌<input type="checkbox" value="listen"  name="userhobby" checked/>读书<input type="checkbox" value="read"  name="userhobby"></p>
    <!--selected 默认选择单选框-->
    <p>性别:男<input type="radio" value="man" name="usergender" checked >女<input type="radio" value="women" name="usergender"></p>
    <p>头像:<input type="file" name="userhead" /></p>
    <!--multipe  允许显示多行-->
    <!--size     最多显示的行数-->
    <p>地址:<select name="useradd" multiple size="2">
        <!--optgroup    组  可以存放多个option-->
        <optgroup label="河北省">
            <option value="廊坊" selected>廊坊</option>
            <option value="唐山">唐山</option>
            <option value="保定">保定</option>
        </optgroup>
    </select></p>
    <p>自我介绍:<textarea cols="15" rows="5" name="userintroduce"></textarea></p>
</form>

<table border="1px" cellpadding="15" cellspacing="5" >
    <tr>
        <th>111</th>
        <th>222</th>
        <th>333</th>
    </tr>
    <tr>
        <!--占两列-->
        <td rowspan="2">1111</td>
        <td>2222</td>
        <td>33333</td>
    </tr>
        <tr>
        <td>2222</td>
        <td>33333</td>
        </tr>
        <tr>
        <td>1111</td>
        <!--占两行-->
        <td colspan="2">33333</td>
    </tr>
</table>

<!--为表单添加修饰-->

<fieldset>
    <legend>百度一下</legend>
    <input type="text" />
</fieldset>

<!--锚节点回到顶部-->
<a href="#top">回到顶部</a>
</body>
</html>

#CSS

#导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式导入</title>
    <!--导入方式-->
    <!--1.行内导入   style=""-->
    <!--2.外部导入    <style>...</style>-->
    <!--3.链接导入 <link rel="stylesheet" href="....css">-->
    <!--4.style代码导入  <style>@import "...css";</style>-->
</head>
<!--链接导入-->
<!--<link rel="stylesheet" href="index.css">-->
<!--外部导入-->
<style>
/*style代码导入*/
@import "index.css";
div{
    color:gold;
}
</style>
<body>
<!--行内导入-->
<p style="color:greenyellow;">Hello World!</p>
<div>Style样式</div>
</body>
</html>

#选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--基本选择器-->
       <!--元素 直接标签名
       类  .表示
       id  #表示
       *-->

    <!--属性选择器-->

        <!--|元素[属性名] -->
        <!--|元素[属性名=属性值] -->
        <!--| 元素[属性名~=属性值]  属性值为前面的几个字母 -->
        <!--| 元素[属性名^=属性值]  属性值为首字母-->
        <!--|元素[属性名$=属性值]   属性值为最后一个字母-->
        <!--|元素[属性名*=属性值]   匹配带有该属性值内容的任意属性值-->
    <!--组合选择器-->
        <!--|元素.(id,class)  -->
        <!--|元素>子元素     获取子元素-->
        <!--|元素 后代元素       获取后代元素-->
        <!--|元素+元素            获取元素后面的元素-->
    <!--伪类选择器-->
        <!--:hover  鼠标悬浮-->
        <!--:link   链接-->
        <!--:visited    访问过后触发-->
        <!--:active     点击时触发-->
        <!--:after-->
        <!--:before-->
    <style>
        a{
            font-size: 45px;
            text-decoration: none;
        }
        a:visited{
            color:green;
        }
        a:link{
            color:pink;
        }
        a:hover{

            color:yellow;
        }
        a:active{
            color:red;
        }
        a::after{
            content: "点击";
            color:purple;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

#文字,背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <!--字体-->
    <!--背景-->
    <style>
        /*字体*/
        p{
            /*字体类型*/
        font-family: "DejaVu Sans Mono";
            /*字体大小*/
        font-size: 45px;
             /*字体是否加粗  <700 细   >700  粗号字体*/
        font-weight: 700;
            /*字体颜色*/
        color: purple;
        }
        /*背景颜色*/
        #img{
            width: 1200px;
            height: 800px;
            border:1px solid red;

            /*背景颜色*/
            /*background-color: green;*/
            /*背景图片*/
            background-image: url("b.jpg");
            /*背景图片禁止平铺*/
            background-repeat: no-repeat;
            /*背景图片的位置*/
            background-position: 60px 50px;
            /*一张图片铺满整个div*/
            /*background-size: cover;*/
        }

    </style>
</head>
<body>
<p>hello world!</p>
<div id="img"></div>
</body>
</html>

#浮动定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--float浮动-->
        <!--float:right;-->
    <!--清除浮动-->
        <!--clear:both;-->
        <!--div:after{-->
        <!--content:"";-->
        <!--display:block;-->
        <!--clear:both;-->
        <!--}-->
    <!--文本居中-->
        <!--text-align:-->
        <!--line-height-->
        <!--text-index   首行缩进-->
        <!--word-spacing 设置字母间隔-->
        <!--letter-spacing   文字间隔-->
        <!--text-transform:capitalize  首字母大写-->
    <!--列表样式-->
        <!--list-style=none;-->
    <!--盒子模型-->
        <!--border:1px solid red;   设置盒子边框-->
        <!--padding:20px;   设置盒子内边距  -->
        <!--margin:20px;        设置盒子外边距-->
    <!--标签元素属性-->
        <!--display:inline-block;   设置元素为内联块状元素-->
    <!--position定位: 相对定位,绝对定位,固定定位-->
        <!--相对定位:-->
            <!--position:relative;-->
        <!--绝对定位:-->
            <!--position:absolute;-->
        <!--固定定位:-->
            <!--position:fixed;-->
        <!--定位用法:-->
            <!--top:; bottom:; left:;  right:; -->

<style>
    div{
    padding: 20px;
    }
</style>
</head>
<body>
<div>aaa  bb</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_39663113/article/details/86027028