PY基础day14(continue0)

HTML

1. 一套浏览器认识的规则，，

2. 开发者：

学习html 规则

开发后台程序：

写Html文件（充当模板）

数据库获取数据，然后替换到html文件的指定位置（Web框架）

3.本地测试

找到文件路径，直接浏览器打开

pycharm 打开测试

4.编写HTML文件

doctype对应关系

html标签，标签内部可以写属性 ==html的标签只能有一个

注释：

类似于HTML 这种格式，标签，html标签<html>CSDN</html>

标签内部的属性<lang="en">

5.标签分类

自闭和标签

主动闭合标签

head标签中

           <meta charset="UTF-8">
           <!--meta http-equiv="Refresh" content="3"-->
           <!--meta http-equiv="Refresh" content="3;Url = https://mp.csdn.net/postedit/81407395"-->
           <meta name="keywords" content="" />
           <meta name="description" content="" />

<meta http - eqiv = "X-UA-Compatible" content = "IE=IE10;IE=IE9;"/>

title标签

<link/>

7 . body 标签

------图标；&nbsp； &gt ：&lt ；

------ p和br--------------p标签做段落；；；；；br标签换行

--------------总结——————————

所有的标签分为：

块级标签：div(白板)；；H系列标签（加大加粗）；p标签（段落和段落之间有间距）；

行内标签： span标签（白板）

标签之间可以嵌套

标签存在的意义，css操作 ,js 操作；

ps：chorme审查元素的使用；定位，查看样式；；

h系列

div

span

input系列

input type = ‘text’ ---name 属性，value = “默认值”

input type = ‘password’ ----name属性，value = “默认值”

input type = ‘submit’ -----value='提交' ，提交按钮，表单

input type = ‘button’ -----按钮

input type = "radio" ---单选框value,name,checked = “checked”，属性（name相同则互斥）

input type = 'checkbox' ---复选框 value ， checked = “checked”，name 属性（批量获取数据）

input type ='file' 依赖form表单的一个属性enctype="multipart/form-data"

input type= 'rsset' ---重置

<textarea>默认值<textarea/> ---name属性

select标签 ---name，内部option value，提交到后台

a标签 -----跳转；锚；-----href=‘#谋个标签的ID’ 标签的ID不能重复；

img : ----src属性；alt属性；title；

列表: ul （li）；ol（li）；dl（dt，dd）；

表格：table，thead （tr,,,,th）;tbody(tr;;td) ;;;colspan=",rowspan='';

lable

用于点击文字，使得关联的标签获取光标

fieldset （legend）

CSS

1.在标签上设置style属性；

background-color: #2459a2;

height: 48px;

2.写在head里面，style标签中写样式

---id选择区

#i1{
background-color:#2459a2;
height: 48px;
}

-----class 选择器

.名称{

-------------------------

}

<标签 class='名称'> </标签>

-----标签选择器

div{

----------

}

所有的div设置上次样式

-------层级选择器(空格)

.c1 .c2 div{

}

--------------------组合选择器（逗号）

#c1 ，.c2 ， div{

}

---------------属性选择器

对选择的标签再通过属性再进行一次筛选

                      input[type='text']{width:100px;height: 200px;}

ps：优先级，标签上style优先，编写顺序，就近原则

-------------css 样式也可以写在单独文件中

3.注释

/* */

4.边框

----宽度，样式，颜色(border:4px dotted red )

-----border-left

5height，高度百分比%

width，宽度像素px，百分比%

text-align：center，水平方向居中

line-height，垂直方向根据标签高度

color，字体颜色

font-size，字体大小

font-weight--字体加粗

height，width，line-height，color，font-size，font-weight

5.背景

6.float

-------让标签飘起来；块级标签也可以堆叠

------老子管不住：

7.display

display：none；；；让标签消失；

display:inline;

display:block;

display：inline-block;(具有inline属性，默认自己有多少占多少；；具有block，

可以设置设置高度，宽度，padding margin，)

行内标签：无法设置高度，宽度，padding margin，

块级标标签：设置高度，宽度，padding margin，

8.padding margin（0，auto）

--边距，

padding 内边距，

margin 外边距；

9.text-align

---颜色

----属性

<！DOCTYPE html> #默认关系

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <a href = "https://blog.csdn.net/qq_37951246">CSDNBIOG</a>
</body>
</html>

----20个标签

CSS ----颜色----配置

Web框架本质

对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。

import socket
def handle_request(client):
    buf = client.recv(1024)

    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))

    client.send(bytes("Hello, Seven",encoding='utf-8'))
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':

    main()

<body>
   <p>1393043=03290439<br/>219379831939194</p>
   <p>456</p>
   <p>456</p>
   <p>456</p>
   <h1>ALIX</h1>
   <h2>ALIX</h2>
   <h6>ALIX</h6>
   <span>Hello</span>

   <div>1</div>
   <div>2</div>
   <div>3</div>
      <!--<a href="https://blog.csdn.net/qq_37951246">some&nbsp;&nbsp;&nbsp;&nbsp;&gt;body</a>-->
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ALIX zhang</title>
</head>
<body>
         ALIXzhng
   <div>
        <div id="i1" style="position:fixed;bottom:0;right:0;">zhang</div>
        <div></div>
        <span></span>
   </div>
</body>

<body>
     <form action="https://blog.csdn.net/qq_37951246" method="GET">
          <input type="text" name="user"/>
          <input type="text" name="email"/>
          <input type="password"name="pwd"/>
          <input type="button"value="登入1"/>
          <input type="submit"value="登入2"/>
         <!-- {'user':'用户输入用户'，‘email’:'xx','pwd':'xx'}-->
     </form>
     <br/>
     <form>
          <input type="text"/>
          <input type="password"/>
          <input type="button"value="登入1"/>
          <input type="submit"value="登入2"/>
     </form>
</body>

<body>
             <form action="https://blog.csdn.net/qq_37951246">
                 <input type="text" name="query"/>
                 <input type="submit" name="搜索" />

             </form>
</body>

<body>
           <form enctype="multipart/form-data">
               <div>
                   <input type="text" name="user"/>
                   <p>请选择性别：</p>
                   男：<input type="radio" name="gender" value="1"checked="checked"/>
                   女：<input type="radio" name="gender" value="2"/>
                   中：<input type="radio" name="gender"value="3"/>
                   <p>爱好</p>
                   篮球：<input type="checkbox"name="favour"value="1"/>
                   足球：<input type="checkbox" name="favour"value="2"/>
                   台球：<input type="checkbox"name="favour"value="3"/>
                   网球：<input type="checkbox"name="favour"value="4"/>
                   <p>技能</p>
                   c：<input type="checkbox"name="skill"/>
                   c++：<input type="checkbox"name="skill"/>
                  java：<input type="checkbox"/>
                  python：<input type="checkbox"/>
                   <p>上传文件</p>
                   <input type="file"name="fname"/>
               </div>
               <input type ="submit" value = "提交"/>
               <input type ="reset" value = "重置"/>
           </form>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
           <form enctype="multipart/form-data">
               <div>
                     <select name="city" size="10" multiple="multiple">
                          <option value="1">北京</option>
                          <option value="2">上海</option>
                          <option value="3"selected="selected">青岛</option>
                          <option value="4">烟台</option>
                     </select>
                   <input type="text" name="user"/>
                   <p>请选择性别：</p>
                   男：<input type="radio" name="gender" value="1"checked="checked"/>
                   女：<input type="radio" name="gender" value="2"/>
                   中：<input type="radio" name="gender"value="3"/>
                   <p>爱好</p>
                   篮球：<input type="checkbox"name="favour"value="1"/>
                   足球：<input type="checkbox" name="favour"value="2"/>
                   台球：<input type="checkbox"name="favour"value="3"/>
                   网球：<input type="checkbox"name="favour"value="4"/>
                   <p>技能</p>
                   c：<input type="checkbox"name="skill"/>
                   c++：<input type="checkbox"name="skill"/>
                  java：<input type="checkbox"/>
                  python：<input type="checkbox"/>
                   <p>上传文件</p>
                   <input type="file"name="fname"/>
               </div>
               <textarea name="meno"></textarea>
               <input type ="submit" value = "提交"/>
               <input type ="reset" value = "重置"/>
           </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <a href="#i1">第一章</a>
      <a href="#i2">第二章</a>
      <a href="#i3">第三章</a>
      <a href="#i4">第四章</a>
      <div id="i1" style="height: 600px;">第一章的内容</div>
      <div id="i2" style="height: 600px;">第二章的内容</div>
      <div id="i3" style="height: 600px;">第三章的内容</div>
      <div id="i4" style="height: 600px;">第四章的内容</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <a href="https://blog.csdn.net/qq_37951246">
     <img src="1.jpg" title="小美女"style="height: 300px;width: 300px;" alt="美女">
      </a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <a href="https://blog.csdn.net/qq_37951246">
     <img src="1.jpg" title="小美女"style="height: 300px;width: 300px;" alt="美女">
      </a>
      <ul>
          <li>ALIX</li>
          <li>ALIX</li>
          <li>ALIX</li>
          <li>ALIX</li>
      </ul>
      <ol>
          <li>ALIX</li>
          <li>ALIX</li>
          <li>ALIX</li>
          <li>ALIX</li>
      </ol>
      <dl>
          <dt>tttt</dt>
          <dd>dddd</dd>
          <dt>tttt</dt>
          <dd>dddd</dd>
          <dt>tttt</dt>
          <dd>dddd</dd>
      </dl>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <table border="1">
          <tr>
              <td>主机名</td>
              <td>端口</td>
              <td>操作</td>
          </tr>
          <tr>
              <td>1.1.1.1</td>
              <td>8000</td>
              <td>
                  <a href="https://blog.csdn.net/qq_37951246">查看详细</a>
                  <a href="#">修改</a>
              </td>
          </tr>
          <tr>
              <td>1.1.1.1</td>
              <td>8000</td>
              <td>第二行，第3列</td>
          </tr>
          <tr>
              <td>1.1.1.1</td>
              <td>8000</td>
              <td>第二行，第3列</td>
          </tr>
      </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>主机名</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>8000</td>
        <td>
            <a href="https://blog.csdn.net/qq_37951246">查看详细</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>8000</td>
        <td>第二行，第3列</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>8000</td>
        <td>第二行，第3列</td>
    </tr>
</table>
<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="3">1</td>

    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>

        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user"/>
    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>
        <input id="username" type="text" name="user"/>
        <br/>
        <lable for="pwd">密码：</lable>
        <input id="pwd" type="text" name="user"/>
    </fieldset>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        #i1{
            background-color:#2459a2;
            height: 48px;
        }
         #i2{
            background-color:#2459a2;
            height: 48px;
        }
        #i3{
            background-color:#2459a2;
            height: 48px;
        }
        .c1{
             background-color:#2459a2;
               height: 10px
        }
        */
        /*div{
            background-color: black;
            color: white;
        }*/
          span div{
             background-color: black;
              color: red;
        }
        #i1,#i2,#i3{
             background-color: black;
              color: red;
        }
        input[type='text']{width:100px;height: 200px;}

    </style>
</head>
<body>
     <div class="c1">22</div>
     <span class="c1">2328975290989
     <div>2343848209</div>
     </span>
     <div class="c1">3</div>
     <input type="text">
     <input type="password">
</body>
</html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rell="stylesheet" href="commons.css"/>
    <style>
        .c1{
            background-color: red;
            color:white;
        }
        .c2{
            font-size: 48px;
            color:black;
        }
    </style>
</head>
<body>
      <div class="c1 c2" style="color:pink;">148645</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <div style="border: 10px solid red;">26545</div>
       <div style="height:48px;
       width:80%;
       border: 10px solid red;
       font-size: 16px;
       font-weight: bold;
       text-align:center;
       line-height: 48px;
       ">655546566</div>
</body>
</html>

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
     <div class="pg-header">
         <div style="float:left;">收藏本站</div>
         <div style="float:right;">
           <a>登录</a>
             <a>注册</a>
         </div>
     </div>
     <div style="width: 300px;border:1px solid red;">
         <div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
         <div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
         <div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
         <div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
         <div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
         <div style="width: 90px;height:30px;border:1px solid green;float: left;"></div>
         <div style="clear:both;"></div>
         </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--div style="background-color: red;display: inline;">56112312</div>
    <span style="background-color: red;display:block;">56551651353</span-->
     <span style="display:inline-block;background-color:red;height: 50px;width:60px;">ALIX</span>
      <a style="background-color: red;">ZHANG</a>
</body>
</html>

PY基础day14(continue0)

猜你喜欢