zoukankan      html  css  js  c++  java
  • 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)

             

     1 <!DOCTYPE html>
     2 <!-- 类似html这种格式,标签,html标签 <html>fasdfasdf</html>
     3 # 标签内部的属性-->
     4 <html lang="en">
     5 <head>
     6     <meta charset="UTF-8">
     7     <!--<meta http-equiv="Refresh" Content="3">-->
     8     <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">-->
     9     <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
    10     <meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。"/>
    11 
    12     <title>老男孩</title>
    13 
    14 </head>
    15 <body>
    16     <div></div>
    17 
    18     <a href="http://www.oldboyedu.com">老男孩</a>
    19 </body>
    20 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8" />
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
     9     <p>123</p>
    10 z
    11     <h1>Alex</h1>
    12     <h2>Alex</h2>
    13     <h3>Alex</h3>
    14     <h4>Alex</h4>
    15     <h5>Alex</h5>
    16     <h6>eric</h6>
    17 
    18     <span>hello</span>
    19     <span>hello</span>
    20     <span>hello</span>
    21     <span>hello</span>
    22 
    23     <div>1</div>
    24     <div>2</div>
    25     <div>3</div>
    26 
    27     <!--<a href="http://www.oldboyedu.com">李&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;a&gt;杰</a>-->
    28 </body>
    29 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     asdfasdf
     9     <div>
    10         <div id="i1" style="position:fixed;bottom:0;right:0;">asdf</div>
    11         <div></div>
    12         <span></span>
    13     </div>
    14 </body>
    15 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <form action="http://192.168.16.35:8888/index" method="POST">
     9         <input type="text" name="user" />
    10         <input type="text" name="email"/>
    11         <input type="password" name="pwd"/>
    12         <!--{'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' }-->
    13         <input type="button"  value="登录1"/>
    14         <input type="submit"  value="登录2"/>
    15     </form>
    16     <br/>
    17     <form>
    18         <input type="text" />
    19         <input type="password" />
    20         <input type="button"  value="登录1"/>
    21         <input type="submit"  value="登录2"/>
    22     </form>
    23 </body>
    24 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <form action="https://www.sogou.com/web">
     9         <input type="text" name="query" value="赵凡" />
    10         <input type="submit" value="搜索" />
    11     </form>
    12 </body>
    13 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <form enctype="multipart/form-data">
     9         <div>
    10 
    11             <textarea name="meno" >asdfasdf</textarea>
    12 
    13             <select name="city" size="10" multiple="multiple">
    14                 <option value="1">北京</option>
    15                 <option value="2">上海</option>
    16                 <option value="3" selected="selected">南京</option>
    17                 <option value="4">成都</option>
    18             </select>
    19 
    20 
    21             <input type="text" name="user" />
    22             <p>请选择性别:</p>
    23             男:<input type="radio" name="gender" value="1"  />
    24             女:<input type="radio" name="gender" value="2" checked="checked"/>
    25             Alex:<input type="radio" name="gender" value="3"/>
    26             <p>爱好</p>
    27             篮球:<input type="checkbox" name="favor"  value="1" />
    28             足球:<input type="checkbox" name="favor"  value="2" checked="checked" />
    29             皮球:<input type="checkbox" name="favor"  value="3" />
    30             台球:<input type="checkbox" name="favor"  value="4" checked="checked"/>
    31             网球:<input type="checkbox" name="favor"  value="5" />
    32             <p>技能</p>
    33             撩妹:<input type="checkbox" name="skill" checked="checked" />
    34             写代码:<input type="checkbox" name="skill"/>
    35             <p>上传文件</p>
    36             <input type="file" name="fname"/>
    37         </div>
    38 
    39 
    40 
    41 
    42 
    43         <input type="submit" value="提交" />
    44         <input type="reset" value="重置" />
    45     </form>
    46 </body>
    47 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <a href="#i1">第一章</a>
     9     <a href="#i2">第二章</a>
    10     <a href="#i3">第三章</a>
    11     <a href="#i4">第四章</a>
    12 
    13     <div id="i1" style="height:600px;">第一章的内容</div>
    14     <div id="i2" style="height:600px;">第二章的内容</div>
    15     <div id="i3" style="height:600px;">第三章的内容</div>
    16     <div id="i4" style="height:600px;">第四章的内容</div>
    17 </body>
    18 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <a href="http://www.oldboyedu.com">
     9         <img src="1.jpg" title="大美女" style="height: 200px; 200px;" alt="美女">
    10     </a>
    11 
    12     <ul>
    13         <li>asdf</li>
    14         <li>asdf</li>
    15         <li>asdf</li>
    16         <li>asdf</li>
    17     </ul>
    18 
    19     <ol>
    20         <li>asdf</li>
    21         <li>asdf</li>
    22         <li>asdf</li>
    23         <li>asdf</li>
    24     </ol>
    25 
    26     <dl>
    27         <dt>ttt</dt>
    28         <dd>ddd</dd>
    29         <dd>ddd</dd>
    30         <dd>ddd</dd>
    31         <dt>ttt</dt>
    32         <dd>ddd</dd>
    33         <dd>ddd</dd>
    34         <dd>ddd</dd>
    35     </dl>
    36 </body>
    37 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <table border="1">
     9     <tr>
    10         <td>主机名</td>
    11         <td>端口</td>
    12         <td>操作</td>
    13     </tr>
    14     <tr>
    15         <td>1.1.1.1</td>
    16         <td>80</td>
    17         <td>
    18             <a href="s2.html">查看详细</a>
    19             <a href="#">修改</a>
    20         </td>
    21     </tr>
    22     <tr>
    23         <td>1.1.1.1</td>
    24         <td>80</td>
    25         <td>第二行,第3列</td>
    26     </tr>
    27 </table>
    28 
    29 <table border="1">
    30     <thead>
    31         <tr>
    32             <th>表头1</th>
    33             <th>表头1</th>
    34             <th>表头1</th>
    35             <th>表头1</th>
    36         </tr>
    37     </thead>
    38     <tbody>
    39         <tr>
    40             <td>1</td>
    41             <td colspan="3">1</td>
    42         </tr>
    43         <tr>
    44             <td rowspan="2">1</td>
    45             <td>1</td>
    46             <td>1</td>
    47             <td>1</td>
    48         </tr>
    49         <tr>
    50             <td>1</td>
    51             <td>1</td>
    52             <td>1</td>
    53         </tr>
    54         <tr>
    55             <td>1</td>
    56             <td>1</td>
    57             <td>1</td>
    58             <td>1</td>
    59         </tr>
    60     </tbody>
    61 </table>
    62 
    63 </body>
    64 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 
     9 
    10     <fieldset>
    11         <legend>登录</legend>
    12         <label for="username">用户名:</label>
    13         <input id="username" type="text" name="user" />
    14         <br />
    15         <label for="pwd">密码:</label>
    16         <input id="pwd" type="text" name="user" />
    17     </fieldset>
    18 </body>
    19 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         /*
     8         #i1{
     9             background-color: #2459a2;
    10             height: 48px;
    11         }
    12         #i2{
    13             background-color: #2459a2;
    14             height: 48px;
    15         }
    16         #i3{
    17             background-color: #2459a2;
    18             height: 48px;
    19         }
    20         .c1{
    21             background-color: #2459a2;
    22             height: 10px;
    23         }
    24         */
    25         /*#c2{*/
    26             /*background-color: black;*/
    27             /*color: white;*/
    28         /*}*/
    29 
    30         /*.c1 div{*/
    31             /*background-color: black;*/
    32             /*color: white;*/
    33         /*}*/
    34         .i1,.i2,.i3{
    35              background-color: black;
    36             color: white;
    37         }
    38         .c1[n='alex']{ width:100px; height:200px; }
    39     </style>
    40 </head>
    41 <body>
    42     <div class="i1">ff</div>
    43     <div class="i2">ff</div>
    44     <div class="i3">2</div>
    45     <input class="c1" type="text" n="alex">
    46     <input class="c1" type="password">
    47 </body>
    48 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <link rel="stylesheet" href="css/commons.css" />
     7 </head>
     8 <body>
     9     <div class="c1 c2" style="color: pink">asdf</div>
    10     <div class="c1 c2" style="color: pink">asdf</div>
    11     <div class="c1 c2" style="color: pink">asdf</div>
    12     <div class="c1 c2" style="color: pink">asdf</div>
    13     <div class="c1 c2" style="color: pink">asdf</div>
    14     <div class="c1 c2" style="color: pink">asdf</div>
    15     <div class="c1 c2" style="color: pink">asdf</div>
    16     <div class="c1 c2" style="color: pink">asdf</div>
    17 </body>
    18 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <link rel="stylesheet" href="css/commons.css" />
     7 
     8 </head>
     9 <body>
    10     <div class="c1 c2" style="color: pink">asdf</div>
    11 </body>
    12 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <div style="border: 1px solid red;">
     9         asdfasdf
    10     </div>
    11     <div style="height: 48px;
    12     80%;
    13     border: 1px solid red;
    14     font-size: 16px;
    15     text-align: center;
    16     line-height: 48px;
    17     font-weight: bold;
    18     ">asdf</div>
    19 </body>
    20 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <div style=" 20%;background-color: red;float: left">1</div>
     9     <div style=" 20%;background-color: black;float: left">2</div>
    10 </body>
    11 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .pg-header{
     8             height: 38px;
     9             background-color: #dddddd;
    10             line-height: 38px;
    11         }
    12     </style>
    13 </head>
    14 <body style="margin: 0">
    15     <div class="pg-header">
    16         <div style=" 980px;margin: 0 auto;">
    17             <div style="float: left;">收藏本站</div>
    18             <div style="float: right;">
    19                 <a>登录</a>
    20                 <a>注册</a>
    21             </div>
    22             <div style="clear: both"></div>
    23         </div>
    24     </div>
    25     <div>
    26         <div style=" 980px;margin: 0 auto;">
    27             <div style="float: left">
    28                 Logo
    29             </div>
    30             <div style="float: right">
    31                 <div style="height: 50px; 100px;background-color: #dddddd"></div>
    32             </div>
    33             <div style="clear: both"></div>
    34         </div>
    35     </div>
    36     <div style="background-color: red;">
    37          <div style=" 980px;margin: 0 auto;">
    38              asdfsdf
    39          </div>
    40     </div>
    41     <div style=" 300px;border: 1px solid red;">
    42         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    43         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    44         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    45         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    46         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    47         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    48         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    49         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    50         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    51         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    52         <div style=" 96px;height:30px;border: 1px solid green;float: left;"></div>
    53         <div style="clear: both;"></div>
    54     </div>
    55 </body>
    56 </html>
    View Code
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <!--<div style="background-color: red;display: inline;">asdf</div>-->
     9     <!--<span style="background-color: red;display: block;">asdf</span>-->
    10     <span style="display:inline-block;background-color: red;height: 50px; 70px;">Alex</span>
    11     <a style="background-color: red;">Eric</a>
    12 </body>
    13 </html>
    View Code
  • 相关阅读:
    How to alter department in PMS system
    Can't create new folder in windows7
    calculate fraction by oracle
    Long Wei information technology development Limited by Share Ltd interview summary.
    ORACLE BACKUP AND RECOVERY
    DESCRIBE:When you mouse click right-side is open an application and click left-side is attribution.
    ORACLE_TO_CHAR Function
    电脑BOIS设置
    JSP点击表头排序
    jsp+js实现可排序表格
  • 原文地址:https://www.cnblogs.com/Ian-learning/p/11228117.html
Copyright © 2011-2022 走看看