目录
CSS
表单标签补充说明
1.用于获取用户数据的标签至少应该含有name属性，用户输入的数据会被保存到标签的value属性中
2.如果不需要用户填写数据，只需要选择，那么我们需要自己填写value
3.针对input标签理论上应该配一个label标签绑定，但是也可以不写
4.标签的属性如果和属性值相等，那么可以简写
5.针对选择类型的标签可以提前设置默认选项
6.下拉框与文件上传可以复选
区分标签
1.class属性：分门别类，主要用于批量查找
2.id属性：精确查找，主要用于点对点
注释语法
/*注释内容*/
引入css的多种方式
1.head内style标签内部编写
2.head内link标签引入
3.标签内部通过style属性直接编写
css选择器
1.标签选择器
2.类选择器
3.id选择器
4.通用选择器
css组合选择器
1.后代选择器（标签名 空格 标签名）
2.儿子选择器（标签名>标签名）
3.毗邻选择器（标签名+标签名）
4.弟弟选择器（标签名~标签名）
分组与嵌套：多个选择器合并查找
属性选择器
1.属性名查找
2.按照属性名等于属性值
伪类选择器
a：hover
input:focus
伪元素选择器
p:first-letter{}
p:before{}
p:after{}
选择器优先级
1.选择器相同，就近原则
2.选择器不同，内联样式>id选择器>类选择器>标签选择器
字体样式
font-size
font-weight
color
text-align：center
text-decoration:none；a标签取消下划线
text-indent:24px 首行缩进
背景属性
width
height
background
边框
border
border-radius：50% 圆
盒子模型
content（内容）
padding（内边距、内填充）
border（边框）
margin（外边距）
浮动
float:left/right
塌陷修复：
.clearfix:after{
content: '';
display: block;
clear:both;
}
溢出
overflow：hidden;
定位
标签在默认情况下无法通过定位参数来移动
1.static静态（标签默认的状态 无法定位移动）
2.relative相对定位（基于标签原来的位置）
3.absolute绝对定位（基于某个定位过的父标签做定位）
4.fixed固定定位（基于浏览器窗口固定不动）
JS
全称JavaScript但是与java一毛钱关系都没有，之所以这么叫是为了蹭java的热度
注释语法
//单行注释
/*多行注释*/
引入js的多种方式
1.head内script标签内编写
2.head内script标签src属性引入外部js资源
3.body内最底部通过script标签src属性引入外部js资源（最常用）
结束符号：分号
变量与常量
js中声明变量需要使用关键字var或者let
基本数据类型
查看数据类型方式typeof
1.数值（Number）
包括整型、浮点型、NaN（不是一个数字）
字符串类型（string）
单引号、双引号、模板字符串
字符串推荐使用加号
字符串常用方法：
.length 返回长度
console.log(c.length)
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
布尔类型（Boolean）
小写：true、false
null与undefined
null表示值为空（曾经拥有过）undefined表示没有定义
对象（object）
javascript中所有事物都是对象：字符串、数值、数组、函数...此外还允许自定义对象
运算符
算术运算符：+ - * / % ++（自增1） --（自减1）
比较运算符：！=（值不等 弱） ==（值相等弱） ===（值相等 强） !==（值不等 强）
逻辑运算符: &&(与) ||（或） ！（非）
流程控制
1.单if分支
if (条件){
条件成立执行的代码
}
2.if...else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if...else if...else分支
if（条件）{
条件1成立执行的代码
}else if（条件2）{
条件1不成立条件2成立执行的代码
}else{
条件1和2都不成立执行的代码
}
switch（条件）{
case 条件1：
条件1成立执行的代码
break；如果没有break会基于某个case一直执行下去
case 条件2：
条件2成立执行的代码
break
case 条件3：
条件3成立执行的代码
break
default：
条件都不满足执行的状态
}
for 循环
for（起始条件;循环条件;条件处理）{
循环体代码
}
while 循环
while（循环条件）{
循环体代码
}
三元运算： 条件？值1：值2
函数
function 函数名（形参）{
//函数注释
函数体代码
return 返回值
}
局部变量：在函数内部声明变量（使用var）是局部变量，只能在函数内部访问它，函数运行完毕，局部变量会被删除。
全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：从被声明开始，局部变量在函数运行以后被删除，全局变量在页面关闭后被删除。
作用域：首先在函数内部找变量，找不到则到外层函数查找，逐步找到最外层
Date对象的方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
JSON对象
json字符串转换成对象（序列化）
JSON.parse
对象转换成JSON字符串（反序列化）
JSON.stringify
js之BOM/DOM
BOM:指浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”
alert（）警告框
confirm（）确认框
prompt（）提示框
计时器
seTimeout（函数,3000）//3000毫秒之后执行函数
clearTimeout(变量名) //取消任务
setInterval（函数名，3000）//每隔3000毫秒执行一次
clearInterval(变量名) //取消任务
DOM：指文档对象模型，通过它可以访问HTML文档的所有元素
查找标签
document.getElementById('d1')
document.getElementByClassName('c1')
document.getElementsByTagName('span')
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
事件：可以简单的理解为通过js代码给html标签绑定一些自定义的功能
常见事件：
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
事件函数中的this关键字：指代就是当前被操作的标签对象本身
onload方法
xxx.onload 等待xxx加载完毕之后在执行后面的代码
jQuery类库
write less，do more
1.加载速度快2.选择器更多更好用3.一行代码走天下4.支持ajax请求（重点）5.兼容多浏览器
基本选择器：id选择器、类选择器、标签选择器
组合选择器
层级选择器
属性选择器
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
表单筛选器
筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
操作标签
jQuery事件
js绑定事件 标签对象.on事件名=function(){}
jQuery事件绑定
方式1：jQuery对象.事件名（function（）{}）
方式2：jQuery对象.on（'事件名称',function（）{}）
clone属性 clone（true）默认不克隆事件 加true就可以
事件相关补充
1.取消后续事件：事件函数的最后return false即可
2.阻止事件冒泡：事件函数的最后renturn false
3.等待页面加载完毕在执行代码
4.事件委托：主要针对动态创建的标签也可以使用绑定的事件
Bootstrap页面框架
别人已经提前写好一大堆css和js，我们只要引入之后按照人家规定好的操作方式即可使用所有的样式和功能
文件结构：bootstrap.css、bootstrap.js ps：js部分需要依赖于jQuery
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class="row" class="col-md-8" 一份均分12份
屏幕参数：col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移：col-md-offset-3
表格样式：<table class="table table-hover table-striped">
表单标签：class = "form-control"
按钮组：class = "btn btn-primary btn-block"
图标：https://fontawesome.com.cn/
导航条：class="navbar navbar-inverse"
wsgiref模块
内置模块：很多web框架底层使用的模块
功能1：封装了socket代码 功能2：处理了请求数据
1.固定代码启动服务端
2.查看处理之后的request大字典
3.根据不同的网址后缀返回不同的内容
动态网页：页面数据来源于后端
静态网页：页面数据直接写死
jinja2模块：需要通过文件的字典内容在网页上修改需要使用到jinja2
python主流web框架
django：大而全，自身带的功能组件非常多，类似于航空母舰
flask：小而精，自身自带的功能组件非常少，几乎都要依赖第三方模块
tornado：异步非阻塞
django版本：
1.x：同步
2.x：同步
3.x 支持异步
4.x：支持异步
运行django注意事项：
1.项目中所有的文件目录名不要出现中文
2.计算机名称尽量不要出现中文
3.一个pycharm尽量就是一个完整的项目
4.不同版本的python解释器与不同版本的django可能会出现小问题
django 基本使用
1.下载 pip3 install django==版本号
2.验证 cmd命令行输入：django-admin
3.创建django项目：django-admin startproject 项目名
4.启动django项目：python manage.py runserver
5.pycharm创建django项目，注意templates可能会报错
settings.py:'DIRS'：[os.path.join(BASE_DIR,'templates')]
django类似于一所大学，app类似于大学里面的各个学院
命令行创建应用：python manage.py starapp 应用名
ps：创建的app一定要在settings.py里面注册
urls.py 路由层
views.py 视图层
models.py 模型层
templates 模板层
HttpResponse 返回字符串类型的数据
render 返回html页面并且支持传值
redirect 重定向
静态文件路径
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'),]
action 控制数据提交的地址（三种编写方式）
1.action="" 数据默认提交给当前页面所在的地址
2.action="https://www.baidu.com" 完整地址
3.action="/index/"
method 控制数据提交的方法
默认是get，可以改成post等
get：朝服务端索要数据，可以携带一些额外的要求 URL?xx=yy,有限制2kb
post：朝服务端提交数据，携带数据方式：请求体
request表单
request.POST 获取post请求体里面携带的数据
request.POST.get() 获取列表最后一个数据值
request.POST.getlist（）获取整个列表数据
request.GET 获取网址问号后面携带的数据
request.GET.get() 获取列表最后一个数据值
request.GET.getlist() 获取整个列表数据
pycharm连接数据库
初次连接数据库，需要下载对应的驱动
django连接数据库
1.修改配置文件
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'day51',
'HOST':'127.0.0.1',
'PORT':3306,
'USER':'root',
'PASSWORD':'Abcd1234',
'CHARSET':'utf8',
}
}
2.django2.x以上要安装mysqlclient
ORM:对象关系映射
类 表
对象 一条条数据
对象点名字 数据获取字段对应的值
数据库迁移命令：
python manage.py makemigrations #将操作记录到小本上
python manage.py migrate
ORM基本语句
增查改删
models.类名.objects.create()
models.类名.objects.filter()
models.类名.object.update()
models.类名.objects.delete()