第七章(1)

1.html介绍

一套规则，浏览器认识的规则
开发者：

学习HTML规则
开发后台程序
写HTML文件(充当模板的作用)
数据库获取数据，然后替换到html文件的指定位置(web框架)

3.本地测试

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

　　4.编写html文件

doctype对应关系
html标签，标签内部可以写属性 ===>  只能有一个

<!DOCTYPE html>           <!-- 定义规则(有多个版本)-->
<html lang="en">          <!--标签和标--签属性 -->
<head>                     <!--头 -->
    <meta charset="UTF-8">
    <title>han</title>
</head>
<body>                       <!--身 -->
     <a href="http://www.phicomm.com">斐讯</a>   <!--定义超链接 -->
</body>
</html>

　　2.input标签

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='reset'                -重置

import tornado.ioloop
import tornado.web
#pip install tornado

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print(111)
        u = self.get_argument('user')
        p = self.get_argument('pass')
        if u == 'abc' and p == '123':
            self.write('OK')
        else:
            self.write('NO')

    def post(self,*args,**kwargs):
        u = self.get_argument('user')
        p = self.get_argument('pass')
        print(u,p)
        self.write('POST')
application = tornado.web.Application([
    (r"/index",MainHandler),
])
if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

　　3.select标签

-name，内部option value,提交到后台size,muiltip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <form enctype="multipart/form-data">
          <div>
              #框内输入多行
              <textarea name="meno" >asdasdasd</textarea>
              
              #设置框大小
              <select name="ctiy" size="5" multiple="multiple">
                  <option value="1">北京</option>
                  <option value="2">上海</option>
                  #默认选中
                  #分组</optgroup lable=河南省>_</optgroup>
                  <option value="3" selected="selected">南京</option> 
                  <option value="4">深圳</option>
              </select>
          </div>
      </form>

</body>
</html>

　　4.a标签

跳转
锚 href='#某个标签的id' 标签的id不允许重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <!--超链接，target="_blank在新窗口打开-->
     <!--<a href="http://www.baidu.com" target="_blank">百度</a>-->
     <a href="#i1">第一章</a>
     <a href="#i2">第二章</a>
     <a href="#i3">第三章</a>

     <div id="i1" style="height:600px;">第一章内容</div>
     <div id="i2" style="height:600px;">第二章内容</div>
     <div id="i3" style="height:600px;">第三章内容</div>
</body>
</html>

　　5.img标签

<body>
      #图片超链接
      <a href="http://www.baidu.com"> 
      #设置图片，名字，图片大小。
      <img src="a.jpg" title="测试" style="height:200px;200px;" alt="测">
      </a>
</body>

　　6.列表ul,ol,dl,dd

<body>
     <ul>
         <li>abc</li>
         <li>abc</li>
         <li>abc</li>
     </ul>

     <ol>
         <li>abc</li>
         <li>abc</li>
         <li>abc</li>
     </ol>

     <dl>
         <dt>123</dt>
         <dd>abc</dd>
         <dd>abc</dd>
     </dl>
</body>

　　7.table标签

<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="s9.html">查看详细信息</a>
                  <a href="$">修改</a>
              </td>
          </tr>
          <tr>
               <td>1.1.1.1</td>
               <td>80</td>
              <td>第二行，第三列</td>
          </tr>
      </table>
</body>

　　table 标准写法和合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<table border="1">
    <thead>       #表头
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
    </tr>
    </thead>
    <tbody>       #表身
    <tr>
        <td>1</td>
        <td colspan="3">2</td>  #横合并单元格
    </tr>
    <tr>
        <td rowspan="2">1</td> #竖合并单元格
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>
<body>

</body>
</html>

8.交互加边框

<body>
  <fieldset> 加框
      <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>

　　9.cssid选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          #i3{
             background-color: #660033;
             height：48px;
             }
           #i2{
             background-color: #66FF99;
             height：48px;
             }
      </style>
</head>
<body>
      <div style="background-color: #2459a2;height;48px;">ff</div>
      <div id="i3">test1</div>
      <div id="i2">test1</div>

</body>

　　10.class选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          .c1{
             background-color: #660033;
             height：48px;
             }
      </style>
</head>
<body>
      <div style="background-color: #2459a2;height;48px;">ff</div>
      <div class="c1">test1</div>
      <div class="c1">test1</div>

</body>

　　11.标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          div{
             background-color: #660033;
             height：48px;
             }
      </style>
</head>
<body>
      <div style="background-color: #2459a2;height;48px;">ff</div>
      <p style="background-color: #FF3399;height;48px;">abc,abc</p>
      <div class="c1">test1</div>
      <div class="c1">test1</div>

</body>

　　12.层级选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          .c1{
             background-color: #660033;
             height：48px;
             }
          .c2{
             background-color: #66CC99;
             height：48px;
             }
          div span{
             background-color: #6600CC;
             height：48px;
             }
      </style>

</head>
<body>
      <!--<div style="background-color: #2459a2;height;48px;">ff</div>-->
      <!--<p style="background-color: #FF3399;height;48px;">abc,abc</p>-->
      <!--<div class="c1">test11</div>-->
      <div class="c2">test12
          <span>test2</span>
          <span>test3</span>
      </div>
</body>

　　13.组合选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          #i1,#i2{
             background-color: #660033;
             height;48px;
             }
      </style>

</head>
<body>
      <div id="i1">test11</div>
      <div id="i2">test12</div>
</body>

　　14.属性选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           input[type='text']{ 100px; height:200px;}
    </style>
</head>
<body>
      <input type="text">
      <input type="password">
</body>

　　15.css优先级

   <style>
           .c1{                          #优先级3
               background-color：red;
               color:white
           }
           .c2{                           #优先级2
               font-size: 58px;
               color:black;
           }
    </style>
</head>
<body>
      <div class="c1 c2 " style="color:pink">testabc</div> #优先级1
</body>

css注释

/* /*

16.css导入引用文件

css.css文件

.c1{
    background-color：red;
    color:white
}
.c2{
    font-size: 58px;  #字体大小
    color:black;      #字体颜色
}



<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css"/>
</head>
<body>
      <div class="c1 c2">testabc</div>
</body>

　　上级路径

17.边框

border-left 左边框

<body>
      <div style="border: 1px solid red;">
          test12
      </div>
</body>

　　18.字体设置

.c2{
    font-size: 58px;  #字体大小
    color:black;      #字体颜色
}

<body>
      <div style="height:48px;  像素 高度 百分比
      80%;                宽度 高度 百分比
      border:1px solid red;     边框
      font-size:16px;           字体大小
      text-align:center;        左右居中
      line-height:48px;         上下居中
      font-weight:bold;         字体加粗
      ">asdasdasd</div>
</body>

　　19.float标签

<body>
     <div style="%20;background-color:red;float:left">123</div>
     <div style="%60;background-color:black;float:right">456</div>

</body>

    <style>
        .c1{
        background-color: #dddddd;
        height: 38px;
        line-height: 38px
        }
    </style>
</head>

<body style="margin: 0 auto;">   #去除开头空格
      <div class="c1">
          <div style="float: left;">收藏本站</div>
          <div style="float: right;">
              <a>登录</a>
              <a>注册</a>
          </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="clear:both;"></div> 关闭浮动
      </div>
</body>

　　20.标签互转

<body>
      <div style="background-color: red;display: inline;">test1</div>  #块转换为行内
      <span style="background-color: red;display:block;">test2</span>  #行内转换为块
</body>

display: none 让标签消失

display: inlien

display:block

display:inline-block

具有inlien 默认自己有多少占多少

具有block 可以设置高度，宽度

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

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

<body>
      <span style="display:inline-block;background-color: red;height: 50px; 70px">sdsd</span>
      <a style="background-color:red;">asdf</a>
</body>

　　display:inline-block

<body>
      <span style="display:none;background-color: red;height: 50px; 70px">sdsd</span>
      <a style="background-color:red;">asdf</a>
</body>

　　21.padding margin

margin:外边框(向下移动)

<body>
      <div style="border:1px solid red;height:70px;">
          <div style="background-color : green; height: 50px;
               margin-top: 47px;">...</div>
      </div>
</body>

padding:内边框(向下延长)

<body>
      <div style="border:1px solid red;height:70px;">
          <div style="background-color : green; height: 50px;
               padding-top: 8px;">...</div>
      </div>
</body>

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

22.嵌套边框居中

<body style="margin: 0 auto;">
      <div class="c1">
          <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>

第七章(1)

目录

1.html介绍

2.input标签

3.select标签

4.a标签

5.img标签

6.列表ul,ol,dl,dd

7.table标签

8.交互加边框

9.cssid选择器

10.class选择器

11.标签选择器

12.层级选择器

13.组合选择器

14.属性选择器

15.css优先级

16.css导入引用文件

17.边框

18.字体设置

19.float标签

20.标签互转

21.padding margin

22.嵌套边框居中

　　2.input标签

　　3.select标签

　　4.a标签

　　5.img标签

　　6.列表ul,ol,dl,dd

　　7.table标签

　　9.cssid选择器

　　10.class选择器

　　11.标签选择器

　　12.层级选择器

　　13.组合选择器

　　14.属性选择器

　　15.css优先级

　　18.字体设置

　　19.float标签

　　20.标签互转

　　21.padding margin