フロント

B / S

HTTPプロトコル：TCPベースのプロトコルは、文字列の後端が前に送信され、フロントエンドのブラウザはレンダリングし、ページに表示するコンテンツを送信します

フロントエンドでは、ページスタイルは非常に豊かな表現することができる一方、すべての内容は、通常のフォントTXT普通のテキストです

これらの単語を分類するためのHTML言語（HTML）
CSSテキストスタイルに言語を追加
アクションを追加するには、JS / JQページ

# 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

内向的ラベル

# 浏览器怎么和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

ブロックレベルのタグ

属性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>

オールリストを命じました

属性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定義リスト

<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>

テーブル

标准表格: 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>

出版レーベル

pタグ

段落タグは自動的に空白の別の段落に段落を追加します
pはテキストラベルタグで、もはやブロック要素の中にネストすることはできません

divタグ

どのようなスタイルは、ブロックレベルのタグを持っていない - 最も一般的な

時間タグ

シングル閉鎖タブは、分割ラインを表示します

フォームフォーム

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スタイル

スタイルの導入

<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>

最もシンプルなベーシックスタイル

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

セレクタ

基本的なセレクタ

标签\类\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;
}

シニアセレクタ

后代\子代
    后代选择器:找的是子孙
    子代选择器:只找子代
后代选择器:
<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   选择器对应的标签内部后面插入一些内容
分组选择器 选择器,选择器,选择器...{}

フロントエンドの基礎--css

フロント

HTML

内向的ラベル

ブロックレベルのタグ

リスト

UL順不同リスト

オールリストを命じました

DL定義リスト

テーブル

出版レーベル

pタグ

divタグ

時間タグ

フォームフォーム

CSSスタイル

スタイルの導入

最もシンプルなベーシックスタイル

セレクタ

基本的なセレクタ

シニアセレクタ

おすすめ