python_day12 html/CSS

HTML知识

import socket
sock=socket.socket()
sock.bind(("127.0.0.1",8800))
sock.listen(5)
while True:
    print('waiting....')
    conn,addr=sock.accept()
    res=conn.recv(1024)
    print(res)
    with open("day12.html") as f:
        data=f.read()
    conn.send(("HTTP/1.1 201 OK 

 %s"%data).encode('utf-8'))
    conn.close()
sock.close()

服务器端ServerJD.py

客户端浏览器输入：127.0.0.1:8800
HTTP:建立在TCP协议上
HTTP协议：请求协议   浏览器------>server
               响应协议   server----->浏览器
数据包格式：请求首行、头、

、数据
HTTP/1.1 201 OK
HEADERS



data    
例如：
with open("index.html",encoding="utf-8") as f:
    res=f.read()
conn.send(("HTTP/1.1 201 OK 

 %s"%res).encode('utf-8'))   

index.html 闭合标签
<img src="图片链接" title='egon'>
html：是有一组组标签构成的文件
标签分为两类：block(块级标签)-----自己独占一行
    inline（内联标签）-------------按内容划分
因浏览器性质不同，建议爬虫用火狐，分析用谷歌

标签嵌套: 块级标签 可以嵌套内联，块级
     内联标签 只能嵌套内联

HTML文件的结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html

常用标签
<!DOCTYPE>标签
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
<head>内常用标签
    <meta>标签
    (1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
    (2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
    <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
    <meta http-equiv="content-Type" charset=UTF8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
    非meta标签
    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>　
<body>内常用标签
    基本标签（块级标签和内联标签）
        <hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
            <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
                <b> <strong>: 加粗标签.
                    <strike>: 为文字加上一条中线.
                        <em>: 文字变成斜体.
                            <sup>和<sub>: 上角标 和 下角表.
                                <br>:换行.
                                <hr>:水平线
                                特殊字符：&lt; &gt；&quot；&copy;&reg;
        <div>和<span>
        <div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
        <span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
        图形标签: <img>
                src: 要显示图片的路径.
                alt: 图片没有加载成功时的提示.
                title: 鼠标悬浮时的提示信息.
                 图片的宽
                height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
        超链接标签(锚标签): <a> </a>
        URL地址由4部分组成
        第1部分：为协议：http://、ftp://等
        第2部分：为站点地址：可以是域名或IP地址
        第3部分：为页面在站点中的目录：stu
        第4部分：为页面名称，例如 index.html
        各部分之间用“/”符号隔开。
        <a href="" target="_blank" >click</a>
                href属性指定目标网页地址。该地址可以有几种类型：
                绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
    相对 URL - 指当前站点中确切的路径（href="index.htm"）
    锚 URL - 指向页面中的锚（href="#top"）

<h1>hello</h1>
<a href="http://www.cnblogs.com/yuanchenqi/articles/6835654.html">click</a>
<img src="http://img1.imgtn.bdimg.com/it/u=3144465310,4114570573&fm=27&gp=0.jpg" title="egon">

style可以在任何标签中加，属性=属性值。
style="background-color: aqua"
<h1 style="background-color: aqua">hello</h1>

<ul><li>111</li></ul>  
<ol><li>222</li></ol>
<dl>
    <dt>河北省</dt>
    <dd>保定</dd>
    <dd>邯郸</dd>
</dl>

表格
<table>
    <tr>
        <td>111</td>
        <td>222</td>   生成1行2列表
    </tr>
</table>
<table border="1px"></table> 边框线设置
<table cellpadding="5px" cellspacing="2px"></table> 单元格内距离即内边距设置 单元格与边框距离即外边距设置
<td rowspan="2"></td> 独占两行
<td colspan="2"></td> 独占两列

表单标签form:与server端交互
<form action="127.0.0.1:8800/path" method="get">
    <p>姓名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="passwd" placeholder="username"></p>   placeholder提醒功能
    <p><input type="submit" value="提交"></p>
</form>
URL：IP+Port+Patch+data只要有？后面的为传输数据
    127.0.0.1:8800/blog/addBlog?a=1&b=3
<p>性别：<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p>
<p>爱好：<input type="checkbox" name="hobby" value="football" checked="checked">足球
<input type="checkbox" name="hobby" value="basketball">蓝球
<input type="checkbox" name="hobby" value="doubleball">双色球
</p>
<p>头像：<input type="file"></p>
有上传文件类型时form必须加enctype
<form action="127.0.0.1:8080" enctype="multipart/form-data"></form>
<p><input type="reset" name="" id=""></p>
<p><input type="button" value="按钮" onclick="alert(12345)"></p>
<p><input type="hidden" name="key" value="v1"></p>
<p>省份：<select name="province" size="3" mutiple="multiple" id="">
    <option value="河北省">河北省</option>
    <option value="河南省" selected="selected">河南省</option>
</select></p> size=3默认显示3个  selected设置默认，属性名=属性值时，可简写selected。
<p><textarea name="个人简介" id="1" cols="30" rows="10"></textarea></p>
<p><label for="c1">姓名</label></p>

CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
CSS的引入方式：
CSS、JS的共同特性：1、查找标签 选择器
    2、操作标签
    <style>
/*方式1、按标签名字选择*/
    p{
        color: red;
    }
/*方式2、按ID属性选择*/
    #c1 {
    font-size: 40px;
    }
    /*方式3、按class属性选择*/
    .c2 {
    background-color: blue;
    }
    /*方式4、* 所有标签        */
    * {
        font-size: 50px;
    }
</style>
</head>
<body>
<p style="color: red">hello</p>
<p class="c2">hello1</p>
<p id="c1">hello2</p>
<p class="c2">hello2</p>
<p>hello3</p>

    组合选择器：
    <style>
    /*1、后代迭代器：子子代代都变*/
        .outer p {
            color: antiquewhite;
        }
    /*2、子代选择器*/
        .outer > p {
            background-color: red;
        }
    /*3、多元素选择器*/
        .outer,#c3{
        background-color: blue;
     }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
CSS属性分析
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        span{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
块级标签：可以设置长宽的
内联标签：设置长宽无效
文本居中
    <style>
        div {
            text-align: center;
            /*文本水平居中*/
            /*text-align: justify;*/
            /*两端对齐*/
            overflow: hidden;
            line-height: 300px;
            /*文本垂直居中*/
        }
        .btn{
            width: 600px;
            height: 200px;
            background-color: darkgray;
            color: wheat;
            font-size: 40px;
            text-align: center;
            /*line-height: 90px;*/
        }
    </style>
背景属性
    <style>
        .c1{
            width: 100%;
            height: 60px;
            background-color: aqua;
            color: red;
            font-size: 30px;
            text-align: center;
            line-height: 90px;
            /*background-image: url("4e6a572etw1diy87cauhbj.jpg");*/
            /*background-repeat: repeat-x;*/
            /*!*x轴填满*!*/
            /*background-position: center;*/
            background: url("4e6a572etw1diy87cauhbj.jpg") no-repeat center;
        }
    </style>
边框属性
    <style>
        .c2{
            width: 200px;
            height: 200px;
            background-color: red;
            border-style: solid;
            border-width: 10px;
            border-color: blue;
            /*border:solid 10px blue;*/
            border-radius: 20%;
        }
    </style>
内边距、外边距 padding/margin
    <style>
        .c3{
            width:300px;
            height: 300px;
            background-color: red;
            border: solid 10px blue;
            padding: 50px;
            margin: 20px;
        }
    </style>

</head>
<body>
<!--<div class="outer">-->
    <!--<p>P</p>-->
<!--</div>-->
<!--<p>P</p>-->
<!--<p id="c3">P</p>-->
<!--<span>span</span>-->
<!--<p class="btn">btn</p>-->
<!--<img src="4e6a572etw1diy87cauhbj.jpg" alt="图片">-->
<div class="c3">
    yuan
</div>
</body>
</html>