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">«</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">»</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">©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 </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 </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 </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 </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 </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, <!---->