• 作业


    5月21号

    ## 自定义点赞功能,点击按钮旁边的数字动态加一
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <script src="jQuery-3.5.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <button class="btn btn-primary" id="btn">
        <span>点赞</span>
        <span class="glyphicon glyphicon-thumbs-up"></span>
        <span id="tem" class="badge badge-light">0<span>
    </button>
    <script>
        $("#btn").click(function () {
            let n = $('#tem').text()
            n = parseInt(n) + 1
            $('#tem').text(`${n}`)
        })
    </script>
    </body>
    </html>
    
    
    ## 自己尝试着搭建图书管理系统页面
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <script src="jQuery-3.5.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            table td{
                line-height: 200% !important;
            }
        </style>
    </head>
    <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">图书管理系统</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">图书 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">作者</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多查询 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">xxx</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-xs-3">
                <div class="list-group">
                    <a href="#" class="list-group-item active">
                        书籍管理
                    </a>
                    <a href="#" class="list-group-item">作者管理</a>
                    <a href="#" class="list-group-item">出版社管理</a>
                    <a href="#" class="list-group-item">其它</a>
                </div>
            </div>
            <div class="col-md-9 col-xs-9">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            图书管理系统
                            <span class="glyphicon glyphicon-book pull-right"></span>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                <button class="btn btn-primary" type="button">搜索</button>
                                </span>
                                </div><!-- /input-group -->
                            </div><!-- /.col-lg-6 -->
                            <div class="col-lg-6">
                                <button class="btn btn-success pull-right">添加</button>
                                </div><!-- /.col-lg-6 -->
                            </div>
                            <hr>
                            <table class="table table-bordered table-hover table-striped">
                                <thead>
                                    <th>ID</th>
                                    <th>书名</th>
                                    <th>作者</th>
                                    <th>价格</th>
                                    <th class="text-center">操作</th>
                                </thead>
                                <tbody>
                                    <tr class="success">
                                        <td>1</td>
                                        <td>《遮天》</td>
                                        <td>辰东</td>
                                        <td>58.8</td>
                                        <td class="text-center">
                                            <button class="btn btn-success btn-sm">编辑</button>
                                            <button class="btn btn-danger btn-sm">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        <nav aria-label="Page navigation" class="text-center">
                          <ul class="pagination">
                            <li>
                              <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                              <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                          </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    
    
    ## 自己尝试着搭建jQuery练习题页面
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <style>
            body{
                margin: 0;
            }
    
        .my-padding {
          padding: 10px 0;
        }
    
        .my-dark {
          background-color: #f5f5f5;
        }
    
        .footer {
          background: #111;
          font-size: 0.9em;
          position: relative;
          clear: both;
        }
        .my-white {
          color: #ffffff;
        }
        </style>
    </head>
    <body>
    <nav class="navbar navbar-expand-lg  navbar-dark bg-dark">
        <div class="ml-4">
            <a class="navbar-brand" href="#"><strong>OldBoy Edu</strong></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Python学院 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Linux学院</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">路飞学城 <span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0 mr-4">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            <ul class="navbar-nav navbar-right mr-4">
                <li class="nav-item">
                    <a class="nav-link" href="#">好好学习<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        联系我们
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Jason</a>
                        <a class="dropdown-item" href="#">Tank</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Egon</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container mt-4">
        <div class="jumbotron">
          <h1 class="display-4">Jason</h1>
          <h1 class="display-4">带你学jQuery</h1>
          <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
              <th>#</th>
              <th>姓名</th>
              <th>爱好</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <th>1</th>
              <td>Jason</td>
              <td>学习</td>
              <td>
                <button class="btn btn-warning">编辑</button>
                <button class="btn btn-danger">删除</button>
              </td>
            </tr>
            <tr>
              <th>2</th>
              <td>Oscar</td>
              <td>大饼</td>
              <td>
                <button class="btn btn-warning">编辑</button>
                <button class="btn btn-danger">删除</button>
              </td>
            </tr>
            <tr id="tr3">
              <th>3</th>
              <td>Egon</td>
              <td>吹牛逼</td>
              <td>
                <button class="btn btn-warning">编辑</button>
                <button class="btn btn-danger">删除</button>
              </td>
            </tr>
            </tbody>
          </table>
        <hr>
      <div class="row">
        <div class="col-md-12">
          <form id="f1">
            <div class="form-group">
                <label for="exampleInputEmail1"><strong>邮箱</strong></label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1"><strong>密码</strong></label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
              <label for="exampleInputFile"><strong>上传头像</strong></label><br>
              <input type="file" id="exampleInputFile">
              <p class="help-block">只支持img格式。</p>
            </div>
            <button id="btnSubmit" type="submit" class="btn btn-primary">提交</button>
          </form>
        </div>
      </div>
      <hr>
        <div class="card">
            <div class="card-header">jQuery学习指南</div>
            <div class="card-body">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="0">
                    jQuery一点都不难
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="1" checked>
                    jQuery一学就会
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="2">
                    jQuery就要多练
                  </label>
                </div>
    
                <div class="checkbox">
                  <label>
                    <input type="checkbox" value="3" disabled>
                    jQuery学不好
                  </label>
                </div>
            </div>
        </div>
        <hr>
        <div class="card">
            <div class="card-header">我来老男孩之后...</div>
            <div class="card-body">
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    我的心中只有学习
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    学习真的太TM有意思了
                  </label>
                </div>
            </div>
        </div>
        <hr>
      <div>
        <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i>
        <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a>
      </div>
        <hr>
    </div>
    <div class="my-dark my-padding">
      <div class="container">
        <div class="col-sm-8 my-center">
          <p>写很少的代码,做很多的事。</p>
          <h4>所以说</h4>
          <p>学好jQuery真的很重要,学好jQuery真的很重要,学好jQuery真的很重要。</p>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <div class="row">
        <div class="col-md-12 text-center">
          <span class="my-white">&copy;2020 xxx</span>
        </div>
      </div>
    </div>
    </body>
    </html>
    

    5月15号

    ## 编写代码,将当前日期按“2017-12-27 11:11 星期三”格式输出(提示:switch结构)
    const WEEK = {
      0:"星期天",
      1:"星期一",
      2:"星期二",
      3:"星期三",
      4:"星期四",
      5:"星期五",
      6:"星期六"
    };
    
    
    function showTime() {
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        var hour = d.getHours();
        var minute = d.getMinutes() < 10?"0"+d.getMinutes():d.getMinutes();
    
        var week = WEEK[d.getDay()];
    
        var strTime = `
            ${year}-${month}-${day} ${hour}:${minute} ${week}
        `;
        console.log(strTime)
    }
    showTime();
    

    5月14号

    ## 博客展示页面
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="1.css">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!-- 此处去font-awesome官网下载  -->
    </head>
    <body>
    <div class="clearfix">
        <div id="left">
            <div class="blog-avatar">
                <img src="2.jpg" alt="">
            </div>
            <div class="blog-title">
                <p>老司机的博客</p>
            </div>
            <div class="blog-info">
                <p>该老司机车速太快,什么都没有留下!</p>
            </div>
            <div class="blog-link">
                <ul>
                    <li><a href="">关于我</a></li>
                    <li><a href="">微博</a></li>
                    <li><a href="">微信公众号</a></li>
                </ul>
            </div>
            <div class="blog-tag">
                <ul>
                    <li><a href="">#Python</a></li>
                    <li><a href="">#Java</a></li>
                    <li><a href="">#Golang</a></li>
                </ul>
            </div>
        </div>
        <div id="right">
            <div>
                <div class="article">
                    <div class="article-title">
                        <span class="title">论开车的重要性</span>
                        <span class="date clearfix">2020-5-14</span>
                    </div>
                    <div class="article-body">
                        <p>我从来不开车,非常正儿八经的!</p>
                    </div>
                    <div class="article-bottom">
                        <span>#Python&nbsp;&nbsp;</span>
                        <span>#JavaScript</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-title">
                        <span class="title">python基础学习</span>
                        <span class="date clearfix">2020-5-14</span>
                    </div>
                    <div class="article-body">
                        <p>1.pythpn数据类型  2.基本数据类型内置方法</p>
                    </div>
                    <div class="article-bottom">
                        <span>#Python&nbsp;&nbsp;</span>
                        <span>#JavaScript</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-title">
                        <span class="title">java学习</span>
                        <span class="date clearfix">2020-5-14</span>
                    </div>
                    <div class="article-body">
                        <p>java配置环境变量</p>
                    </div>
                    <div class="article-bottom">
                        <span>#Python&nbsp;&nbsp;</span>
                        <span>#JavaScript</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-title">
                        <span class="title">Golang学习</span>
                        <span class="date clearfix">2020-5-14</span>
                    </div>
                    <div class="article-body">
                        <p>go环境搭建</p>
                    </div>
                    <div class="article-bottom">
                        <span>#Python&nbsp;&nbsp;</span>
                        <span>#JavaScript</span>
                    </div>
                </div>
                <div class="article">
                    <div class="article-title">
                        <span class="title">论开车的重要性</span>
                        <span class="date clearfix">2020-5-14</span>
                    </div>
                    <div class="article-body">
                        <p>老师从来不开车,非常正儿八经的!</p>
                    </div>
                    <div class="article-bottom">
                        <span>#Python&nbsp;&nbsp;</span>
                        <span>#JavaScript</span>
                    </div>
                </div>
            </div>
            <span class="abc">
                <a href="#right"><i class="fa fa-chevron-up fa-4x" aria-hidden="true"></i></a>
            </span>
        </div>
    </div>
    </body>
    </html>
    
    
    ## css
    body{
        margin: 0;
        background-color: #eeeeee;
    }
    
    a{
        text-decoration: none;
    }
    
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    .clearfix:after {
        content: '';
        display: block;
        clear:both;
    }
    
    .abc{
        z-index: 100;
        display: block;
        position: fixed;
        bottom: 7%;
        right: 7%;
        opacity: 0.6;
    }
    
    .abc i:hover{
        cursor: pointer;
    }
    
    .abc a{
        color: black;
    }
    
    #left{
        float: left;
         24%;
        height: 100%;
        position: fixed;
        background-color: #4e4e4e;
    }
    
    #right{
        float: right;
         76%;
    }
    
    .blog-avatar{
         150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid white;
        overflow: hidden;
        margin: 10px auto;
    }
    
    .blog-avatar img{
        max- 100%;
    }
    
    .blog-title, .blog-info{
        font-size: 16px;
        text-align: center;
        color: darkgray;
    }
    
    ul {
        margin: 50px;
        text-align: center;
    }
    
    ul li {
        margin-top: 3px;
    }
    
    .blog-link a, .blog-tag a{
        font-size: 20px;
        color: darkgray;
    }
    
    .blog-link a:hover, .blog-tag a:hover{
        color: white;
    }
    
    .article{
        background-color: white;
        margin: 20px 40px 10px 10px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    }
    
    .article-title{
        border-left: 5px solid red;
        text-indent: 5px;
    }
    
    .title{
        font-size: 30px;
    }
    
    .date{
        float: right;
        font-weight: bold;
        margin: 15px 15px;
    }
    
    .article-body{
        font-size: 18px;
        text-indent: 20px;
        border-bottom: 1px solid black;
    }
    
    .article-bottom{
        padding: 5px 15px;
    }
    

    5月13号

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>li标签的float示例</title>
      <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            background-color: black;
            height: 40px;
             100%;
            position: fixed;
            top: 0;
        }
        #right{
            height: 40px;
             20%;
            float: left;
            color: #b0b0b0;
        }
        #right span{
            padding: 0 15px;
            line-height: 40px;
        }
        #right span:hover{
            color: #fff;
            cursor: pointer;
        }
        #left{
            height: 40px;
             80%;
            float: left;
        }
        a {
            text-decoration: none;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li {
            float: left;
        }
        li > a {
            display: block;
            padding: 0 15px;
            line-height: 40px;
            color: #b0b0b0;
        }
        li > a:hover {
            color: #fff;
        }
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
      </style>
    </head>
    <body>
    
    <div class="nav">
        <div id="left">
            <ul class="clearfix">
                <li><a href="">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">ioT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">金融</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
            </ul>
        </div>
        <div id="right">
            <span>登录</span>
            <span>注册</span>
            <span>消息通知</span>
        </div>
    </div>
    </body>
    </html>
    

    5月12号

    ## 注册页面
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <style>
           .container1 {
                margin-top: 70px;
                 40%;
                margin-left: 27%;
            }
            .inline-style {
                display: inline-block;
            }
            .font-position-right{
                text-align: right;
            }
            .register-btn{
                margin-left: 25%;
            }
        </style>
    </head>
    <body>
    <div class="container1">
    
        <form action="http://127.0.0.1:5000/regist/" method="post" class="form-horizontal">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label inline-style font-position-right"></label>
                <div class="col-sm-9 inline-style ">
                    <input type="text" class="form-control" name="username" id="name" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label  inline-style font-position-right"></label>
                <div class="col-sm-9  inline-style">
                    <input type="password" class="form-control" name="password" id="password" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="r_pwd" class="col-sm-2 control-label   inline-style font-position-right"></label>
                <div class="col-sm-9  inline-style">
                    <input type="password" class="form-control" name="r_password" id="r_pwd" placeholder="确认密码">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label  inline-style font-position-right"></label>
                <div class="col-sm-9  inline-style">
                    <input type="email" class="form-control" name="email" id="email" placeholder="邮箱">
                </div>
                <div class="form-group">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button class="btn btn-lg btn-primary btn-block register-btn" type="submit">注册</button>
                </div>
            </div>
        </form>
    </div>
    
    </body>
    </html>
    

    5月11号

    ## HTTP协议默写
    超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式
    """
    # 四大特性
    1.基于请求响应
    2.基于TCP/IP作用于应用层之上的协议
    3.无状态
      不保存用户的信息
    4.无/短链接
      请求来一次我响应一次 之后我们两个就没有任何链接和关系了
        
    # 请求数据格式
      请求首行
      请求头
      
    
      请求体
    
    # 响应状态码
      1XX:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
      2XX:服务端成功响应了你想要的数据(200 OK请求成功)
      3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
      4XX:请求错误
        404:请求资源不存在
        403:当前请求不合法或者不符合访问资源的条件
      5XX:服务器内部错误(500)
      
    # 请求方式
    1.get请求
      朝服务端要数据 
    2.post请求
      朝服务端提交数据
    """
    
    ## 前端标签分类有几种
    # 块级元素
    独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
    可以直接控制宽度、高度以及盒子模型的相关css属性
    在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
    在不设置高度的情况下,块级元素的高度是它本身内容的高度
    div, h1~h6, ol, ul, li, hr, menu, dl, dt, dd, table, p, form
    
    # 内联元素
    和其他内联元素从左到右在一行显示
    不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
    内联元素的宽高是由本身内容的大小决定(文字、图片等)
    内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
    span, a, b, i, strong, em, s, strike, del, br, u, textarea, input, select, label, img, sub, sup, big, samll
    
    # 按语义划分:
    Headings: h1, h2, h3, h4, h5, h6
    Paragraphs: p
    Tables: table, thead, tbody, tr, th, td
    Text Formatting: em, strong, sub, del, ins, small
    Lists: ul, li, ol, dl, dt, dd
    Forms and Input: form, input, select, textarea
    HTML5: header, footer, article, section
    Others: div, span, a, img, <!---->
    
  • 相关阅读:
    SQL 查询中 not in的改进,--not exists
    REST接口--转摘
    C#中@的用法总结(转)
    有感于哈工大matlab被限制使用
    Oracle CURRVAL应用限制
    oracle to_char()函数--数字型到字符型
    如何提交代码到git仓库
    cannot find module 'xxx' 解决办法
    DOM-基本概念及使用
    AJAX-同源策略 跨域访问
  • 原文地址:https://www.cnblogs.com/chenwenyin/p/12869892.html
Copyright © 2020-2023  润新知