python学习--html

HTML

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

    2、开发者：

        学习Html规则

        开发后台程序：

            - 写Html文件（充当模板的作用） ******

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

    3、本地测试

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

         - pycharm打开测试

    4、编写Html文件

       

        - doctype对应关系

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

        - 注释：  <!--  注释的内容  -->

    5、标签分类

        - 自闭合标签

            <meta charset="UTF-8">

        - 主动闭合标签

            <title>老男孩</title>

    6、

        head标签中

            - <meta  -> 编码，跳转，刷新，关键字，描述，IE兼容

                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />

            - title标签

            - <link /> 搞图标，欠

            - <style />欠

            - <script> 欠

    7、body标签

         - 图标，  &nbsp;  &gt;   &lt;

         - p标签，段落

         - br，换行

         ======== 小总结  =====

            所有标签分为：

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

                行内标签： span（白板）

            标签之间可以嵌套

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

            ps:chorme审查元素的使用

                - 定位

                - 查看样式

        - h系列（必会）

        - div（必会）

        - span（必会）

        - input系列 + form标签 （必会）

            input type='text'     - name属性，value="赵凡"

            input type='password' - name属性，value="赵凡"

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

            input type='button'   - value='登录' 按钮

           

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

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

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

            input type='rest'     - 重置

   

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

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

       

        - a标签（必会）

            - 跳转

            - 锚     href='#某个标签的ID'    标签的ID不允许重复

           

        - img（必会）

             src

             alt

             title

            

        - 列表

            ul

                li

            ol

                li

            dl

                dt

                dd

        - 表格（必会）

            table

                thead

                    tr

                        th

                tbody

                    tr

                        td

            colspan = ''

            rowspan = ''

        - label（必会）

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

            <label for="username">用户名：</label>

            <input id="username" type="text" name="user" />

        - fieldset

            legend

       

    - 20个标签

CSS

   

    在标签上设置style属性：

        background-color: #2459a2;

        height: 48px;

        ...

   

    编写css样式：

        1. 标签的style属性

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

            - id选择区

                  #i1{

                    background-color: #2459a2;

                    height: 48px;

                  }

                 

            - class选择器 ******（必会）

               

                  .名称{

                    ...

                  }

                 

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

           

            - 标签选择器（必会）

                    div{

                        ...

                    }

                   

                   

                    所有div设置上此样式

           

            - 层级选择器（空格） ******（必会）

                   .c1 .c2 div{

                        

                   }

            - 组合选择器（逗号） ******（必会）

                    #c1,.c2,div{

                       

                   }

           

            - 属性选择器 ******（必会）

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

                   .c1[n='alex']{ 100px; height:200px; }

                  

            PS:

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

           

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

            <link rel="stylesheet" href="commons.css" />

           

        3、注释

            /*   */

   

        4、边框（写在style里面）

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

             - border-left

　　　  - border

       

        5、 style 属性里面：

            height，         高度 百分比

            width，          宽度 像素，百分比

            text-align:ceter, 水平方向居中

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

            color、     字体颜色

            font-size、 字体大小

            font-weight 字体加粗

       

        6、float

            让标签浪起来，块级标签也可以堆叠

            老子管不住：

                <div style="clear: both;"></div>

           

        7、display

            display: none; -- 让标签消失

            display: inline;

            display: block;

            display: inline-block;

                     具有inline,默认自己有多少占多少

                     具有block，可以设置无法设置高度，宽度，padding  margin

            ******

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

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

           

           

        8、padding  margin(0,auto)

         

<!DOCTYPE html>
<!-- 类似html这种格式,标签，html标签 <html>fasdfasdf</html>
# 标签内部的属性-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="Refresh" Content="3">-->
    <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">-->
    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
    <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>

    <title>老男孩</title>

</head>
<body>
    <div></div>

    <a href="http://www.oldboyedu.com">老男孩</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
    <p>123</p>
z
    <h1>Alex</h1>
    <h2>Alex</h2>
    <h3>Alex</h3>
    <h4>Alex</h4>
    <h5>Alex</h5>
    <h6>eric</h6>

    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <!--<a href="http://www.oldboyedu.com">李&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;a&gt;杰</a>-->
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://192.168.16.35:8888/index" method="POST">
        <input type="text" name="user" />
        <input type="text" name="email"/>
        <input type="password" name="pwd"/>
        <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
    <br/>
    <form>
        <input type="text" />
        <input type="password" />
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query" value="赵凡" />
        <input type="submit" value="搜索" />
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>

            <textarea name="meno" >asdfasdf</textarea>

            <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"  />
            女：<input type="radio" name="gender" value="2" checked="checked"/>
            Alex：<input type="radio" name="gender" value="3"/>
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor"  value="1" />
            足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
            皮球：<input type="checkbox" name="favor"  value="3" />
            台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
            网球：<input type="checkbox" name="favor"  value="5" />
            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" checked="checked" />
            写代码：<input type="checkbox" name="skill"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
        </div>





        <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="http://www.oldboyedu.com">
        <img src="1.jpg" title="大美女" style="height: 200px; 200px;" alt="美女">
    </a>

    <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>

    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ol>

    <dl>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</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>80</td>
        <td>
            <a href="s2.html">查看详细</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</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>
        <tr>
            <td>1</td>
            <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>


    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>
        <input id="username" type="text" name="user" />
        <br />
        <label for="pwd">密码：</label>
        <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;
        }
        */
        /*#c2{*/
            /*background-color: black;*/
            /*color: white;*/
        /*}*/

        /*.c1 div{*/
            /*background-color: black;*/
            /*color: white;*/
        /*}*/
        .i1,.i2,.i3{
             background-color: black;
            color: white;
        }
        .c1[n='alex']{ width:100px; height:200px; }
    </style>
</head>
<body>
    <div class="i1">ff</div>
    <div class="i2">ff</div>
    <div class="i3">2</div>
    <input class="c1" type="text" n="alex">
    <input class="c1" type="password">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/commons.css" />
</head>
<body>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/commons.css" />

</head>
<body>
    <div class="c1 c2" style="color: pink">asdf</div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" 20%;background-color: red;float: left">1</div>
    <div style=" 20%;background-color: black;float: left">2</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">
    <div class="pg-header">
        <div style=" 980px;margin: 0 auto;">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div>
        <div style=" 980px;margin: 0 auto;">
            <div style="float: left">
                Logo
            </div>
            <div style="float: right">
                <div style="height: 50px; 100px;background-color: #dddddd"></div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div style="background-color: red;">
         <div style=" 980px;margin: 0 auto;">
             asdfsdf
         </div>
    </div>
    <div style=" 300px;border: 1px solid red;">
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style=" 96px;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;">asdf</div>-->
    <!--<span style="background-color: red;display: block;">asdf</span>-->
    <span style="display:inline-block;background-color: red;height: 50px; 70px;">Alex</span>
    <a style="background-color: red;">Eric</a>
</body>
</html>