front end

b/s

http protocol: tcp-based protocol, the rear end of the string is sent to the front, the front-end browser to render, and then send the content to show on the page

All contents are ordinary text txt normal font, while in the front end, page styles can be expressed very rich

html language (HTML) to classify these words
css add language to the text styles
js / jq page to add action

# b browser
# s server

# http request  http请求
# http response http响应

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',9000))
sk.listen()
try:
    conn,addr = sk.accept()
    ret = conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK \r\n\r\n')
    # conn.send('你好'.encode('GBK'))    # bytes
    with open('new.html',encoding='utf-8') as f:
        conn.send(f.read().encode('GBK'))
except Exception as e:
    print(e)
finally:
    conn.close()
    sk.close()

# http和socket
# B/S架构是http协议
# http协议基于socket的TCP协议在通信


# 为了标识new是一个前端显示的文件,我们要给他取一个后缀名 : .html

html

Introverted label

# 浏览器怎么和server端交互
# 前端的文件有一个后缀名 : html
# web端的组成 :
#     html  一堆标签组成的内容  基础的排版和样式
#     css   描述了标签的样式
#     js/jq 动态的效果
# html 超文本标记语言
#     超文本 :图片 音频 视频
#     标记:所有内容都是包裹在标签中
# 标记(标签)的分类
#     双边标记 <body></body> 双闭合标记
#     单边标记 <meta>        单闭合标记
#         <br/>
#         <img>
# 1.html标签
#     head : 一个人的思想
#         写在head标签中的所有内容在网页上都不可见
#         title 打开网页的时候标签页显示的内容
#         meta 网页元信息,编码,浏览器版本,关键字,描述
#     body : 一个人的身体
#         特性:
#             1.空白折叠
#                 空格 &nbsp;
#                 其他的网页上的特殊字符 :&lt &gt
#             2.对回车\制表符也不敏感
#         标签的分类:
#         内联标签(行内标签)
#             字体标签
#                 加粗 b /strong
#                 斜体 i /em
#                 上标 sup  下标 sub
#                 中划线 s del 下划线 u
#             换行符 <br/>
#             内容标签 <span>没有任何样式的内容</span>
#             标签 img
#                 src 属性
#                     一张图片的网络地址 "http://xxxx"
#                     一张图片的本地路径 "img/0.jpg"
#                 width 属性
#                     设置图片的宽度 "200px"
#                 height 属性(和width属性二选一)
#                     设置图片的高度 "400px"
#                 alt 属性
#                     在图片加载失败的时候显示的内容
#                         用户体验 爬虫
#             标签 a 超链接标签
#                 锚 anchor
#                 href 属性
#                     1.网络资源,点击跳转到一个网址
#                     2.邮件资源,"mailto:邮箱地址"
#                     3.设置锚点
#                         a.跳转到本页的起始 : href = '#'
#                         b.跳转本地页的某一个地方
#                         给这个地方添加一个标签,属性是id
#                         在a标签设置锚"#id的值"跳转到对应的标签
#                 target 属性
#                     '_self'(默认) 在当前网页打开
#                     '_blank'     在新网页跳转
#                 title 属性
#                     鼠标悬浮显示的小标题
#         块级标签
#             标题标签 h1-h6

Block-level tag

List

ul unordered list

属性type:disc(默认)\square(实心方形)\circle(空心圆)\none(不显示样式)
<!--设置不显示任何样式-->
<ul type="none">
    <li>手机</li>
    <li>电脑</li>
    <li>其他电器</li>
</ul>
<!--设置显示实心方块-->
<ul type="square">
    <li>旧电脑</li>
    <li>旧家具</li>
    <li>旧手机</li>
</ul>
<!--设置显示空心圆-->
<ul type="circle">
    <li>旧电脑</li>
    <li>旧家具</li>
    <li>旧手机</li>
</ul>
<!--默认显示实心圆 disc-->
<ul>
    <li>旧电脑</li>
    <li>旧家具</li>
    <li>旧手机</li>
</ul>

ol ordered list

属性type:1(默认)\a(小写字母)\A(大写字母)\I(罗马数字)
属性start:开始位置
<!--默认显示1,2,3序号,可以指定开始的值-->
<ol>
    <li>长头发</li>
    <li>旧家电</li>
    <li>破剪刀</li>
</ol>
<!--设置根据a,b,c显示,可以指定开始的值-->
<ol type="a" start="2">
    <li>长头发</li>
    <li>旧家电</li>
    <li>破剪刀</li>
</ol>
<!--设置根据A,B,C显示,可以指定开始的值-->
<ol type="A" start="26">
    <li>长头发</li>
    <li>旧家电</li>
    <li>破剪刀</li>
</ol>
<!--设置根据罗马数字,可以指定开始的值-->
<ol type="I">
    <li>长头发</li>
    <li>旧家电</li>
    <li>破剪刀</li>
</ol>

dl definition list

<dl>
    <dt>title</dt> <!--dt表示标题--> 
    <dd>alex</dd>  <!--dd表示内容--> 
    <dd>wusir</dd>
    <dd>太白</dd>
    <dt>title</dt>
    <dd>alex</dd>
    <dd>wusir</dd>
    <dd>太白</dd>
</dl>

form

标准表格: thead tbody的内容
tr表示每一行
th表示thead中的每一个元素
td表示tbody中的每一个元素

cellpadding:文字和内边框的距离
cellspacing:内边框和外边框的距离
border：边框宽度
 <table border="1" cellpadding="10px" cellspacing="5px">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">第一个值</td>

                <td>qqxing</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>wahaha</td>
                <td rowspan="2">ab钙</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>wahaha</td>

            </tr>
        </tbody>
    </table>

不写thead只写tbody 就没有表头样式
 <table border="1" cellpadding="10px" cellspacing="5px">
        <tbody>
            <tr>
                <td colspan="2">第一个值</td>

                <td>qqxing</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>wahaha</td>
                <td rowspan="2">ab钙</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>wahaha</td>

            </tr>
        </tbody>
    </table>

Publishing label

p tag

Paragraph tag will automatically add a paragraph to separate paragraphs blank
p is a text label tag, can no longer be nested inside block element

div tag

What style do not have block-level tag - the most common

hr tag

Single closure tab displays a dividing line

form form

form : 表单标签
    action : 提交到的地址,把表单中的数据提交到对应的地址上
input :
    type种类:text,password,radio,checkbox,submit
    name\value :把数据提交到后台的,提交的是input标签的name值和value值
    对于选择框 : checked属性表示默认选中
    readonly :对于输入框的禁止修改 可以提交
    disabled :对于所有元素不能修改 也不能提交
button :
    input的submit类型和button放在form表单中都表示提交
<form action="http://127.0.0.1:9000">
    <input type="text" name='username' value = 'alexander' placeholder="请输入用户名或密码" readonly>
    <input type="password" name="password" value="3714" disabled>
    <!--注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,但是可以提交-->
    <!--注意:如果设置了disabled,可以给所有的表单元素设置,那么不能修改,也不能提交-->
    <input type="radio" name="sex" value="1" checked disabled> 男
    <input type="radio" name="sex" value="2" disabled> 女
    <input type="checkbox" name="hobby" value="a" checked> 抽烟
    <input type="checkbox" name="hobby" value="b" checked> 喝酒
    <input type="checkbox" name="hobby" value="c"> 抠脚
    <input type="submit" value="表单按钮">
    <button>提交按钮</button>
    <!--注意 input的submit类型和button放在form表单中都表示提交-->
</form>

input的其他type:
reset hidden button file date
注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-data
<form>
    <input type="hidden">
    <input type="reset">  
    <input type="button" value="普通按钮">
    <input type="file">
    <input type="date">
</form>

lable:
     for属性,点击lable中的内容,让for标示的id对应的元素获得焦点
<label for="user">姓名 : </label>
<input type="text" name='username' id="user" >

文本框:
<textarea name="" id="" cols="30" rows="10"></textarea>

select选择框:
    multiple:设置多选框
    size:选择框显示大小
option选项:
    selected:默认选中
<select name="city" id="a" size="3">
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
</select>
<select name="" id="" multiple>
        <option value="" selected>抽烟</option>
        <option value="" selected>喝酒</option>
        <option value="" >烫头</option>
</select>
<!--注意:默认是单选-->
<!--注意:使用multiple属性设置为多选:按住鼠标下拉,按住ctrl选,按住shift选-->

css styles

The introduction of style

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入方式二:内接引入-->
    <!--<style>-->
        <!--div{-->
            <!--color: blue;-->
        <!--}-->
    <!--</style>-->

    <!--引入方式三: 外接样式-链接式 :link导入一个连接 重点重点重点*****-->
    <!--<link rel="stylesheet" href="index.css">-->

    <!--引入方式四: 外接样式-导入式 :style导入一个@import url('路径')-->
    <!--<style>-->
        <!--@import url("index.css");-->
    <!--</style>-->
</head>
<body>
<!--引入方式一 :行内引入-->
<!--<div style="color:red">wahaha</div>-->
<body>

The most simple basic style

<style>
        div{
            color: red;
            width: 200px;
            height: 200px;
            background-color: yellow;
             /*background-color: yellow;* 注释css样式/ 
        }
    </style>

Selector

The basic selector

标签\类\id\通用选择器:
标签名直接选择标签,#选择id, .表示class,*表示所有标签
<style>
        span{
            color:green
        }
        div{
            color: #c4db69
        }
        a{
            color: red;
        }
</style>

1.样式的继承 : 子元素会继承父元素的样式(但是a标签除外)
2.要想对a标签进行样式设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的样式的优先级为0(最低)

#div1{
   color: cornflowerblue;
}
.sp{
     color: orangered;
}

通用选择器:所有的标签都会被选中
*{
   color: yellow;
}

Senior selector

后代\子代
    后代选择器:找的是子孙
    子代选择器:只找子代
后代选择器:
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div span{
           color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>

子代选择器
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div>span{
           color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>

毗邻+\弟弟~
    <style>
       span+a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>  <!--变色-->
        <a>我是a2标签</a>
    </div>

    <style>
       span~a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>   <!--变色-->
        <a>我是a2标签</a>   <!--变色-->
    </div>

属性选择器 [属性]/[属性='值']
<style>
       /*a[href]{*/
            /*color: green;*/
        /*}*/
        /*a[href='http://www.taobao.com']{*/
            /*color: lightpink;*/
        /*}*/
        input[type='text']{
            background-color: lightblue;
        }
 </style>
 <body>
     <div>
        <a href="http://www.taobao.com">我是a0标签</a>
        <span>span标签</span>
        <a href="http://www.jd.com">我是a1标签</a>
        <a href="http://www.mi.com">我是a2标签</a>
        <a>没有href属性</a>
    </div>
    <input type="text">
    <input type="password">
 </body>

并集,\交集

<style>
    ul,ol,span{
       background-color: gainsboro;
    }
</style>
<body>
<ul>
    <li>u-first</li>
</ul>
<ol>
    <li>o-first</li>
</ol>
</body>

交集选择器
<style>
    div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
    }
</style>
<body>
    <div class="box1 box2">box1box2</div>
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span标签</span>
</body>

伪类选择器
a : link visited active
input: focus
通用: hover
<style>
        a:link{
            color:tomato;
        }
        a:visited{
            color: gray;
        }
        a:active{
            color: green;
        }
        input:focus{
            background-color: aquamarine;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        div:hover{
            background-color: pink;
        }
</style>
<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>

伪元素选择器
first-letter
before
after  : *****

<style>
        p:first-letter{
            color: green;
        }
        p:before{
            content: '**';
            /*color: pink;*/
        }
        p:after{
            content: '.....';
            color: lightblue;
        }
</style>
<body>
<div>春江水暖鸭先知</div>
</body>

通用选择器 *{}
在组合选择器
    后代选择器   选择器 选择器{}
    儿子选择器   选择器>选择器{}
    毗邻选择器   选择器+选择器{}
    弟弟选择器   选择器~选择器{}
属性选择器
    [属性名]---[title]
    [属性名=属性值]---[title=xxx]
伪类选择器
    a:hover{}   鼠标悬浮
    a:link{}    为未访问的a标签
    a:active{}  点击瞬间设置的效果
    a:visited{} 已访问连接设置的效果
    input:focus{}   获取焦点时设置的样式
伪元素选择器
    选择器:first-letter 首字母
    选择器:before  选择器对应标签内部前面插入一些内容
    选择器:after   选择器对应的标签内部后面插入一些内容
分组选择器 选择器,选择器,选择器...{}

Front-end basis --css