python前端基础知识----html、css

其他 2021-03-04 10:13:02 阅读次数: 0

文章目录

  1. socket与浏览器通信

    socket_server.py

    """
请求和响应
请求：浏览器socket客户端给服务端发信息
相应：服务端socket给客户端回信息
"""
import socket

server = socket.socket()
server.bind(('127.0.0.1', 9000))

server.listen(2)
while 1:
    conn, addr = server.accept()

    from_browser_msg = conn.recv(1024).decode('utf-8')
    print(from_browser_msg)

    # conn.send(b'hello')
    # conn.send(b'HTTP/1.1  200  ok \r\n\r\n')
    #     # conn.send(b'<h1>s22 welcome to China</h1>')
    conn.send(b'HTTP/1.1  200  ok \r\n\r\n')  # 响应必须有
    with open('test.html', mode='rb') as f:
        data = f.read()
    conn.send(data)

    conn.close()

# 在浏览器中输入127.0.0.1 9000 回车会显示回应的内容

"""
http协议请求消息格式：
GET / HTTP/1.1
Host: 127.0.0.1:9000
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
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: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
响应格式
b'HTTP/1.1 200 ok \r\n\r\nHello!'

"""

  2. html5

    测试文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="refresh" content="2">-->
    <title>Title</title>
</head>
<body>
    <BUTTON>按钮</BUTTON>
    <b>你好你好</b>
    <i>你好你好</i>
    <u>你好你好</u>
    <s>你好你好</s>
    <h1>22期皇家赌场上线了！</h1>
    <h2>22期皇家赌场上线了！</h2>
    <h3>22期皇家赌场上线了！</h3>
    <p>段落</p>
    <div>分块</div>
    <img src="1.jpg" alt="图片加载不出来时显示这些文字" title="图片提示" width="200" height="300">
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <ul>
        <li> 你好</li>
        <li> 你好</li>
        <li> 你好</li>
    </ul>
    <ol>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ol>
    <dl>
        <dt>彩带你</dt>
        <dd>你好</dd>
        <dd>你好</dd>
        <dt>彩带你</dt>
        <dt>彩带你</dt>
        <dt>彩带你</dt>
    </dl>
    <table border="1" cellpadding="10" cellspacing="20">
        <thead></thead>
        <tbody>
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
        </tbody>
    </table>
    <form action="http://127.0.0.1:9000">
        <select name="city">
            <option value="1">北京</option>
            <option>哈尔滨</option>
            <option>上海</option>
        </select>
        用户名：<input type="text" name="username" value="dazhuang" readonly="readonly">
        <label for="pwd">
            密码：
        </label>
        <input id="pwd" type="password" name="password">
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2" checked="checked">女
        <input type="checkbox" name="hobby" value="smoke">抽烟
        <input type="checkbox" name="hobby" value="drunk">喝酒
        <input type="checkbox" name="hobby" value="fair">烫头
        <!--        <input type="submit">-->
        <input type="data">
        <input type="button" value="普通按钮">
        <input type="reset">
        <input type="hidden">
        <input type="file">
        <button>提交按钮</button>
    </form>



</body>
</html>

    标签

    必须是封闭的
<meta >
<h1></h1>
标签属性
<h1 id= ‘’></h1>
标签分类：
	内敛标签（行内标签）：不独占一行，只可以嵌套内敛标签 b s i u a img
	块级标签（行外标签）：独占一行，可以嵌套内敛标签和某些块级标签  h1-h6
    head
    body
        <!--  这是注释 -->
	<h1></h1>  标题标签
    <BUTTON>按钮</BUTTON>
    <b>你好你好</b> 黑体
    <i>你好你好</i> 斜体
    <u>你好你好</u> 下划线
    <s>你好你好</s>  中划线
    <h1>22期皇家赌场上线了！</h1>
    <h2>22期皇家赌场上线了！</h2>
    <h3>22期皇家赌场上线了！</h3>
	</br>换行
	</hr>加一行分割线
	<p></p> 段落标签
    img图片标签
    <img src="1.jpg" alt="图片加载不出来时显示这些文字" title="图片提示" width="200" height="300">
    a超链接标签
    href:超链接地址
target:是否新建页面打开
<a href="https://www.baidu.com/" target="_blank">百度</a>
    列表标签ul li
    ul:无序列表
ol：有序列表
<ul>
    <li> 你好</li>
    <li> 你好</li>
    <li> 你好</li>
</ul>
<ol>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
</ol>
    标题列表标签
    <dl>
    <dt>彩带你</dt>
    <dd>你好</dd>
    <dd>你好</dd>
    <dt>彩带你</dt>
    <dt>彩带你</dt>
    <dt>彩带你</dt>
</dl>
    特殊符号
    &nbsp; 一个空格
&lt;小于号
&amp;and符号
&copy;版权标识
...
    表格标签
    table:
    border：边框的宽度
    cellpadding:文字和内边框的距离
    cellspacing：内边框和外边框的距离
格式：
    <table border="1" cellpadding="10" cellspacing="20">  
        <thead></thead>
        <tbody>
            <tr>  
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
            <tr>
                <td>你好</td>
                <td>你好</td>
                <td>你好</td>
            </tr>
        </tbody>
    </table>
    form表单标签
    action：指定数据提交路径
input标签：
	type属性：控制输入框的样式的
	name属性：分组，携带数据的key  key:value
	value:选择框提交的数据值，输入框的默认值，提交框的按钮名称
form表单出发提交数据的操作：必须卸载form表单标签里面，写在外面就是普通的按钮
	<input type="submit">
	<button>提交按钮</button>
checked默认选中：
	<input type="radio" name="sex" value="2" checked="checked">女
readoly只能读不能改:
    用户名：<input type="text" name="username" value="dazhuang" readonly="readonly">
下拉选择框：
        <select name="city">
            <option value="1">北京</option>
            <option>哈尔滨</option>
            <option>上海</option>
        </select>
<form action="http://127.0.0.1:9000">
        <select name="city">
            <option value="1">北京</option>
            <option>哈尔滨</option>
            <option>上海</option>
        </select>
        用户名：<input type="text" name="username" value="dazhuang" readonly="readonly">
        密码：<input type="password" name="password">
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2" checked="checked">女
        <input type="checkbox" name="hobby" value="smoke">抽烟
        <input type="checkbox" name="hobby" value="drunk">喝酒
        <input type="checkbox" name="hobby" value="fair">烫头
        <!--        <input type="submit">-->
        <input type="data">
        <input type="button" value="普通按钮">
        <input type="reset">
        <input type="hidden">
        <input type="file">
        <button>提交按钮</button>
</form>
    label标签
    标识标签的功能
 <label for="pwd">密码：
 </label>
 <input id="pwd" type="password" name="password">

  3. CSS

    css选择器（Cascading Style Sheet，层叠样式表）
    选择器{
      
      css属性:属性值;}
h1{
      
      color:red;font-size:14px;}
css代码引入：
	方式1：head标签里面写
    <style>
        div{
      
      
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>
	方式2：内敛样式
    <div style="background-color: blue;height: 300px; width: 300px;"></div>
	方式2：外部文件引入，在head标签里面写link标签引入
    <link rel="stylesheet" href="test.css"
	test.css
    div{
      
      
        background-color: chocolate;
        height: 100px;
        width: 100px;
    }
    选择器
    <head>
    <!-- 元素选择器 -->
    div{
      
      
        color: blue;
    }
    <!-- ID选择器 -->
    #snow{
      
      
        color: aquamarine;
    }
    <!-- 类选择器 -->
    .c1{
      
      
        color: burlywood;
    }
	<!-- 通用选择器 -->
	*{
      
      
		color: cadetblue;
	}
</head>
<body>
    <div>   
        alex
    </div>
    <div id="snow" class="c1">
        白雪
    </div>
    <div id="laowang" class="c1">
        老王
    </div>
</body>
    组合选择器
    # 后代选择器
div a{
      
        # 找到div标签后代里面所有的a标签
    color: brown;
}
# 儿子选择器
div>a{
      
        # 找到div的儿子标签
    color: brown;
}
# 毗邻选择器
div+a{
      
        3 找到的时紧挨着div标签的下一个标签（是兄弟标签）
    color: brown;
}
# 弟弟选择器
div~a{
      
        # 找到是同级的后面的所有的兄弟标签
    color: brown;
}
    属性选择器
    [title=xx]{
      
       # 找所有的title属性
	color:red;
}
div[title=xx]{
      
       # 通过属性找div下的title
	color:red;
}
div[title=xx]{
      
       # 通过属性名找div下的title
	color:red;
}
<div title="xx">
	xxx
</div>
    分组
    div,p{
      
        # div选择器和p选择器共同设置相同的样式，可以用逗号分隔
    color: chocolate;
}
    伪类选择器
    # hover什么的都不限于a标签
/*未访问颜色*/
a:link{
      
      
    color: green;
}
/*访问后*/
a:visited{
      
      
    color: yellow;
}
/*鼠标点上颜色*/
a:hover{
      
      
    color: blueviolet;
}
/*鼠标点住不放时颜色*/
a:active{
      
      
    color: red;
}
    伪元素选择器
    /*伪元素选择器*/
div:first-letter{
      
       # 首字母
    color: blue;
    font-size: 30px;
}
p:before{
      
       # 前边添加内容
    content: '自动添加的内容，不能选中';
    color: chartreuse;
    font-size: 50px;
}
p:after{
      
        # 后边
    content: '自动添加的内容，不能选中';
    color: chartreuse;
    font-size: 50px;
}

  4. 选择器的优先级

    css的继承和优先级
    /*优先级数字越大，月优先显示其效果，优先级相同的显示最后定义的效果*/
/*继承的优先级为0*/
body{
      
      
    color: red;
}
/*标签选择为器的优先级为1*/
div{
      
      
    color: orange;
}
/*类选择器的优先级为10*/
.c1{
      
      
    color: chocolate;
}
/*id选择器的优先级为100*/
#p1{
      
      
    color: yellow;
}
/*内联样式优先级为1000*/
<p style="color:red">p标签</p>
    css属性相关
    高度宽度设置
	只有块级标签可以设置，内敛标签由他的内容决定
        div{
      
      
            width: 100px;
            height: 100px;
            background-color: orange;
        }
 	a标签的字体颜色设置必须单独写
    字体属性设置
    font-family: "Times New Roman";
font-size:20px;
font-weight: bold;   # 加粗
    颜色表示方式
    color:red:
color:#ff0000;
color:rgba(255,0,0);
    文字属性
    text-align:center;
left
right
text-decoration:none;
line-through;下划线
overline;中划线
text-indent:32px;首行缩进
    背景属性
    background-color:red;
background-image:url("");
background-repeat:no-repate; # 图片不重复
background-position:center; # 图片位置

  5. 边框

    border-style:solid;  实线
border-color:red;
border-with:1px;
border-radius:50%;控制边角
padding-top:10px;  与边框的距离，内边距
margin:;  外边距

  6. display属性

    display：inline;  /*将标签设置为内敛标签*/
display：inline-block;  /*将标签设置为内敛和块级标签*/
display：block;  /*将标签设置为块级标签，可以设置高和宽*/

  7. css盒子模型

    content内容区域
padding内边距
border边框宽度
margin外边距
padding-top:10px;  与边框的距离，内边距
margin:;  外边距
样例：
        div{
      
      
            width: 500px;
            height: 500px;
            /*background-color: orange;*/
            font-family: "Times New Roman";
            font-weight: bold;
            border: orange 2px solid;
            padding: 20px 20px 20px 20px;
            margin: 20px 20px 20px 20px;
        }
两个情况：
	如果垂直方向上下两个标签设置了margin 取最大值
	左右的话取两者边距之和

  8. float浮动

    .c1{
      
      
    background-color: red;
    height: 100px;
    width: 100px;
    float: left;
}
.c2{
      
      
    background-color: blue;
    height: 100px;
    width: 100px;
    float: right;
}
浮动会造成父级标签塌陷问题：
	1.父级标签设置高度
        .c1{
      
      
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .c2{
      
      
            background-color: blue;
            height: 100px;
            width: 100px;
            float: right;
        }
        .c3{
      
      
            background-color: pink;
            height: 200px;
        }
        .cc{
      
      
            height: 100px;
        }
	2.伪元素选择器清除左右浮动
        .c3{
      
      
            background-color: pink;
            height: 200px;
            /*clear: both;*/
        }
        .clearfix:after{
      
      
            content: '';
            display: block;
            clear: both;
        }
        <body>
            <div class="cc clearfix">
                <div class="c1"></div>
                <div class="c2"></div>
            </div>
            <div class="c3"></div>
        </body>

  9. overflow益处属性

    overflow: hidden;  /**隐藏多余内容 **/
overflow: auto;    /**下拉框 **/
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow属性的值。

  10. 定位position

    .c2{
      
      
    background-color: blue;
    height: 100px;
    width: 100px;
    /*position: relative;  !**相对定位，保留原来位置，相对自己原来的位置移动，以左上角为基准**!*/
    /*top: -100px;*/
    /*left: 100px;*/
    /*right: ;*/
    /*bottom: ;*/
    position: absolute;  /**绝对定位，不保留自己原来的位置,按照父级标签以上的标签设置了position为relative的标签的位置进行移动，如果一直找不到设置position为relative的标签，那么按照body进行设置**/
    top: 10px;
    left: 20px;
}
fixed固定定位：
        .c3{
      
      
            background-color: purple;
            height: 100px;
            width: 100px;
            position: fixed;  /**固定定位，位置根据浏览器窗口决定的**/
            left: 500px;
        }

  11. z-index

    数值越大，越在上层显示
z-index:100;

  12. opacity透明度

    opacity:0.3;

作业：小米商城首页框架结构

注意：

写页面充实网页：

body{
    
    
	margin:0;
	padding;0;
}

小米商城导航栏部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
     
     
            margin: 0;
            padding: 0;
        }
        .title{
     
     
            background-color: #333333;
            height: 40px;
            line-height: 40px;
        }
        .title .title-content a{
     
     
            text-decoration: none;
            color: #b0b0b0;
            font-size: 12px;
        }
        .title .title-content span{
     
     
            color: #424242;
        }
        .title .title-content{
     
     
            width: 90%; /*父类标签长度的90%*/
            margin-left: 5%; /*父类标签宽度的5%*/
            height: 40px;
            line-height: 40px;
        }
        .title .title-content .title-content-left{
     
     
            float: left;
            height: 40px;
            line-height: 40px;
        }
        .title .title-content .title-content-right{
     
     
            float: right;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class="title">
        <div class="title-content">
            <div class="title-content-left">
                <a href="">小米商城</a> <span> | </span>
                <a href="">MIUI</a> <span> | </span>
                <a href="">IoT</a> <span> | </span>
                <a href="">云服务</a> <span> | </span>
                <a href="">金融</a> <span> | </span>
                <a href="">有品</a> <span> | </span>
                <a href="">小爱开发平台</a> <span> | </span>
                <a href="">小爱开发平台</a> <span> | </span>
                <a href="">小爱开发平台</a> <span> | </span>
                <a href="">小爱开发平台</a> <span> | </span>
                <a href="">小爱开发平台</a> <span> | </span>
                <a href="">Select Region</a>
            </div>
            <div class="title-content-right">
                <a href="">登录</a> <span> | </span>
                <a href="">注册</a> <span> | </span>
                <a href="">消息通知</a>
                <a href="">购物车</a>
            </div>
        </div>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_31910669/article/details/109319356
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022