HTML
1、一套规则，浏览器认识的规则。
2、开发者：
学习HTML规则
开发后台程序：
-写Html文件（充当模板作用） ******
- 数据库获取数据，然后替换到html文件的指定位置（web框架）
3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
4、编写html文件
- doctype 对应关系
- html标签，标签内部可以写属性
- 注释 <!-- 注释内容 -->
5、标签分类
- 自闭合标签 例如 <meta charset="UTF-8">
- 主动闭合标签 <title> 导航</title>
<!DOCTYPE html> #标准统一的规范
<html lang="en"> #代表一个整体
<head> #头部
<meta charset="UTF-8">
<title>Titile</title>
</head>
<body> #身体
<a href="http://www.baidu.com">百度</a>
</body>
</html>
head里常用的标签：
1、刷新和跳转
<meta http-equiv="Refresh" Content="30"> 30秒刷新一次
<meta http-equiv="Refresh" Content="5;Url=http:www.baidu.com"> 跳转（很少用）
2、关键词
<meta name="keywords" content="星际2，专访，小色">
3、新版本兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7">
4、编码
<meta charset="UTF-8">
5、标题
<title>aaaa</title>
6、<link />
<link rel="shortcut icon" href="image/favicon.ico">设置标题图标
7、<style /> 在页面中写样式
8、<script >
body里的标签
1、各种符号
表示空格
>表示大于号
<表示小于号
网页中各种符号，请搜索一下网址
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2、p 和 br标签
p 表示段落，段落和段落之间有间距 （属于块儿级标签）
br 表示换行
3、标题 h 标签 ****（所有的标签分为块儿级标签和行内标签）
<h1>SunWenBo</h1> 属于块儿级标签（加大加粗）
<span> SunWenBo</span> 属于行内标签，就是一个白板，自身什么特性都不带
<div>1</div> 属于块儿级标签,也是白板
4、标签与标签之间是可以具有嵌套关系的
标签存在的意义，定位操作比较简单，css操作和js操作比较简单
5、<form action="http://www.baidu.com" methed='get/post'> #表示表单
<input type="text">
<input type="password">
<input type="button">
<form/>
GET方式提交会把表单内容添加到URL上
post方式提交不会添加
6、input系列
input type='text' -name属性
input type='password' -name属性
input type='submit' -value = '提交' 提交按钮
input type='button' -value = '登陆' 按钮
input type='radio' -单选框 value,name属性（name相同则互斥）checked="checked"默认被选中
input type='checkbox' -多选框 value,name属性（批量获取数据）checked="checked"默认被选中
<input type='file' name="fname"/> 上传文件依赖form表单大的属性
<form enctype="multipart/form-data"> 必须加上这个属性，才会把文件一点一点的发送给服务器
input type='reset' -重置
7、<textarea name="meno">中间放默认值<textarea/> -多行文本 ，name属性
8、下拉菜单
<select name="city" size="10" multiple="multiple"> -multiple="multiple"可以多选
<option value='1'>北京<option/>
<option value='2' selected="selected">上海<option/> -默认被选中
<option value='3'>上海<option/>
<select/>
9、a标签
作用：1、做跳转
<a href="http://www.baidu.com" target="_blank">百度<a/> 标签 target="_blank" 表示在新的窗口打开
2、锚
href="#某个标签的ID" 标签ID不允许重复
例子：
<a href="#i1">第一章<a/>
<a href="#i2">第二章<a/>
<a href="#i3">第三章<a/>
<a href="#i4">第四章<a/>
<div id="i1" style="height:600px">第一章内容</div>
<div id="i2" style="height:600px">第二章内容</div>
<div id="i3" style="height:600px">第三章内容</div>
<div id="i4" style="height:600px">第四章内容</div>
10、img 图片标签
<img src="1.jpg" style="height:200px;200px" alt="美女"> -alt="美女" 表示没有图片的时候显示美女
title="大美女" 鼠标放在图片上的时候显示
11、列表
<ul>
<li>asdas</li>
<li>fasdfa</li>
<li>asdas</li>
</ul>
<ol>
<li>asdas</li>
<li>fasdfa</li>
<li>asdas</li>
</ol>
<dl>
<dt>ttt</dt>
<dd>ddd</dd>
<dd>ddd</dd>
<dt>ttt</dt>
<dd>ddd</dd>
<dd>ddd</dd>
</dl>
12、表格
table
thead
tr
th
tbody
tr
td
colspan = '' 行合并单元格
rowspan = '' 列合并单元格
13、普通标签
用于点击文字，使得关联的标签获取光标
<lable for="username">用户名：</lable>
<input id="username" type="text" name="user" />
14、方框，字符串显示在左上角线中间
<fieldset>
<legend>登陆</legend>
</fieldset>
15、分割线
<hr/>
css
在标签上设置style属性：
background-color:#2459a2;
height:48px
编写css样式：
1、标签的style属性。
2、写在head里边，style标签中写样式。
1、#id{height:48px} #表示找id的样式
2、.c1{background-color:#2459a2;} body里用class='c1'调用，可以重复调用
3、标签选择器：
div {background-color:#2459a2;} 表示把body里所有div标签都设置成此样式
4、- 层级选择器（空格）
.c1 .c2 div{
}
5、-组合选择器（逗号）
#c1,.c2,div{
}
6、-属性选择器
对选择到的标签通过属性再进行一次筛选
.c1[name='alex']{background-color:#2459a2;}
7、ps
优先级，标签上style优先，编写的顺序
8、创建css样式文件
在html文件中的head标签中写
<link rel="stylesheet" href="文件名.css"/> 这样就引入了css样式的文件
3、注释
/* ..... */
4、边框
-宽度 样式 颜色（border:4px dotted red）
- border-left
- border-right
- border-top
例子：<div style="border:4px solid red"></div>
5、样式属性
height 高度
wigth 宽度，像素，百分比
text-align:center 水平方向剧中
line-height:48px 垂直方向根据标签高度居中
color 字体颜色
font-size 字体大小
font-weigth 字体加粗
6、float
让标签飘起来，块儿级标签也能堆叠
<div style="float:left;"></div>
在最后加上：
<div style="clear:both;"></div>
7、display
可以实现块儿级标签和内联标签的相互转换
<div style="display:inline;">asdf</div> 块儿级标签转内联标签
<span style="display:block;">asdf</span> 内联标签转块级标签
********************************
* 行内标签无法设置宽度和高度 *
* 块儿级标签可以设置宽度和高度 *
********************************
display:inline-block
具有inline属性的，默认自己有多少占多少
具有block属性的，可以设置高度宽度了
display:none -让标签消失
8、padding marin(0,auto)
边距，
内边距 marin————》位置发生变化
外边距 padding————》自身发生变化
9、边距
margin: 0px auto
0px:表示距离上下的距离为0
auto：表示距离左右的边距自动
1、回顾：自适应 和 改变大小容易变形
左右滚动条的出现
宽度，百分比
在页面的最外层：设置像素的宽度 =》 最外层设置绝对宽度
自适应:media
3、默认img标签，有一个1px的边框
img{
boder:0;
}
CSS补充：
1、position:
fiexd => 固定在页面的某个位置
relative + absolute
例子：
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>
opacity:0.5 :设置透明度
z-index:层级的顺序谁大谁在上边
2、overflow:hidden,auto
例如设置图片是如果超出界限，设置hidden会隐藏多余部分，设置auto会出现滚动条
3、鼠标移动到标签上，颜色发生变化，这个css属性才生效
例子：
.pg-header .menu:hover{
background-color:block;
}
4、背景图片
background-img:url("image/4.gif"); 默认，div大的话，图片重复放
background-repeat:no-repeat; 不重复堆叠
background-repeat:repeat-x; div模块儿内x轴重复
background-repeat:repeat-y; div模块儿内y轴重复
background-position-x:10px - 将背景图片x轴移动多少
background-position-y:10px - 将背景图片y轴移动多少
background-position：10px 10px；x轴 y轴 同上
javaScript
是一门独立的语言，浏览器具有js解释器
一般存在于html中
在header中写javascrip代码
<script type="text/javascript">
</script>
如果想在别的文件里引用另一个文件的javascript ,如下
<script src=“commons.js”></script>
为了不影响页面的使用效果，一般让JavaScript放在body标签内部的最下面
注释
单行注释： //
多行注释： /* */
变量：
name = 'alex' #全局变量
var name = 'alex' #局部变量
定义函数
function func(){
var name = "alex"
}
基本数据类型：
数字
字符串
列表
字典
布尔
条件语句
定时器：setInterval("要执行什么"，时间（ms）)
function func(){
//根据id获取指定标签的内容，定于局部变量接受
var tag = document.getElementById('id')
//获取标签内部的内容
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
1、数字
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
常量
Math.E
常量e，自然对数的底数。
Math.LN10
10的自然对数。
Math.LN2
2的自然对数。
Math.LOG10E
以10为底的e的对数。
Math.LOG2E
以2为底的e的对数。
Math.PI
常量figs/U03C0.gif。
Math.SQRT1_2
2的平方根除以1。
Math.SQRT2
2的平方根。
静态函数
Math.abs( )
计算绝对值。
Math.acos( )
计算反余弦值。
Math.asin( )
计算反正弦值。
Math.atan( )
计算反正切值。
Math.atan2( )
计算从X轴到一个点的角度。
Math.ceil( )
对一个数上舍入。
Math.cos( )
计算余弦值。
Math.exp( )
计算e的指数。
Math.floor( )
对一个数下舍人。
Math.log( )
计算自然对数。
Math.max( )
返回两个数中较大的一个。
Math.min( )
返回两个数中较小的一个。
Math.pow( )
计算xy。
Math.random( )
计算一个随机数。
Math.round( )
舍入为最接近的整数。
Math.sin( )
计算正弦值。
Math.sqrt( )
计算平方根。
Math.tan( )
计算正切值。
Math
2、字符串（String）
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
3、布尔类型（Boolean）
布尔类型仅包含真假，与Python不同的是其首字母小写。
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
4、数组
JavaScript中的数组类似于Python中的列表
常见功能：
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
十六章
1、序列化
json.stringfy(li) 将对象转换成字符串
json.parse(str) 将字符串转换成对象类型
2、转义
客户端（cookie） =》服务器端
将数据经过转义后，保存在cookie
decodeURL() URL中未转义的字符
decodeURLComponent() URL组件中的未转义的字符
encodeURL() URL中的转义的字符
encodeURLComponent() URL组件中的字符
escape() 对字符串转义
unescape() 给转义字符串解码
URLErro 由URL的编码和解吗方法抛出
3、eval
JavaScript中的eval是python中的eval和exec的合集，既可以编译代码也可以获取返回值。
python
val = eval(表达式) 执行表达式，返回结果
exec(执行代码) 没有返回值
JavaScript:
eval 是python中的eval和exec的合集，既可以编译代码也可以获取返回值。
4、时间
Date需要有一个对象，Date是一个类
例：var d = new Date()
d.get....表示获取（冒号表示获取多种值）
d.set....表示设置
5、作用域
1、在javascrpt中变量是以函数作为作用域
2、函数的作用域在函数未被调用之前，已经创建
3、函数的作用域存在作用域链，并且也是在被调用之前，已经创建
xo = "alex"
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
var xo = 'tom';
return inner;
}
var ret = func();
ret()
4、javascript函数内局部变量提前声明
function func(){
console.log(xxoo)
} ### 程序会直接报错
function func(){
console.log(xxoo)
var xxoo = "alex"
} ### 程序会输出 ubdefined
原因：在解释的过程中，解释器会找到函数内部的所有局部变量，执行 var xxoo;
分析顺序 首先，形式参数。然后，局部变量。其次是函数内部的函数声明表达式
6、javaScript语法
for循环
1)
for(var item in [11,22,33]){
console.log(item)
}
2)
var arra = [11,22,33,44]
for (var i = 0;i<arra.lenght;i = i + 1){
break; #跳出整个循环
continue; #终止本次循环
}
while(条件){
}
条件语句
if(条件){
}else if(){
}
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
7、JavaScript函数
function func（arg）{
return arg + 1
}
var result = func(1)
console.log(result);
JavaScript中函数又很多种，在进行定义和分类之后，大致有三种
第一种、普通函数
function func(){}
第二种、匿名函数
setInterval(function(){
console.log(123);
},5000)
第三种、自执行函数（创建函数，并且自动执行）
(function(arg){
console.log(123);
})(在此传参数)
8、JavaScript面向对象
function foo() {
var xo = 'alex'
}
foo()
function foo(){
this.name = 'alex'
}
var obj = new foo();
obj.name
a. this代表当前对象（python self）
b. 创建对象时，new 函数()
function FOO(n){
this.name = 'n'
}
FOO.prototype = {
'sayName' : function(){
console.log(this.name)
}
}
obj = new FOO('we')
obj.sayName()
DOM 文档对象模型（把整个html当卓一个大的对象，每一个标签也认为是一个对象）
1、查找
直接查找
var obj = document.getElementById('i1') 获取标签
操作标签
obj.innerText 获取当前标签的文本，会把其中的标签过滤掉，仅文本
obj.innerHTML 获取当前标签内的所有内容
value
对 input系列奏效,获取文本内容
var obj = document.getElementById('i1')
obj.value
在 select 标签获取选中的value值（selectedindex）类似索引
textarea value获取当前标签中的值
DOM实现搜索框实例知识点：
onfocus="fun()" 光标移动到当前(当标签获取焦点的时候，会自动执行函数)
onblur="fun()" 光标移走(当标签失去焦点的时候，会自动执行函数)
class 对样式进行操作
对整体类进行操作
className
classList
classList.add
classList.remove
对style属性进行操作
var obj = document.getElementById('i1')
obj.style
obj.style.color = 'red'
2、属性操作
obj.setAttribute('xxxxx','alex')
obj.removeAttribute('value')
obj.Attribute #获取所有的属性
3、创建标签并添加到HTML中
1）、字符串的形式创建
var tag = "<a><input type="text"/></a>"
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
注意：insertAdjacentHTML第一个参数只能是"beforeBegin"、"afterBegin"、"beforeEnd"、"afterEnd"
2）、对象的形式创建
var tag = document.createElement('input');
tag.setAttribute('type','text');
tag.style.fontSize = '16px';
tag.style.color = 'red';
var p = document.createElement('p');
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
4、提交表单
任何标签都可以提交表单
document.getElementById('f1').submit()
5、其它操作
console.log() 控制台输出框
alert() 弹出框
confirm 确认框
例子: var v = confirm("确定是否删除？") #v获取返回值，True或False
//URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清楚多次定时器
setTimeout 单次定时器
clearTimeout 清楚单次定时器
6、事件操作
onmouseover 鼠标移动到当前位置
onmouseout 鼠标离开
绑定事件由两种方式
1、直接标签绑定
<div onclick='func(this)'> </div>
2、先找到dom对象，然后再进行绑定
document.getElementById('xx').onclick = function(){
this.style.background-color = 'red'
}
3、利用addEventListener()可以绑定多个事件
obj.addEventListener() 通过了三个参数,第一个参数是事件，第二个是函数
第三个参数分为true和false,true捕捉，false表示冒泡
obj.addEventListener('click',function(){console.log('aaa')},false);
obj.addEventListener('click',function(){console.log('bbb')},false);
JQuery
http://css.cuishifeng.cn/
类库
一、查找元素
二、操作元素
1、jquery的引入
<script src="/static/jquery-1.12.4.js"></script>
2、jquery方法的调用
<script>
jQuery.xxoo
$.xxoo
</script>
3、选择器
1、根据ID查找
$("#i1")
$("#i1")[0] 和 document.getElementById('i1') 一样
d = document.getElementById('i1')
$(d) 将DOM对象转换成jquery对象
2、class查找
<div class='c1'></div>
$('.c1')
3、按照标签查找
$('a') 表示找到所有的a标签
4、实例
全选、反选、取消
-选择器
- $('#tb:checkbox').prop('checkbox',true); prop不传第二个值，表示获取值，传值表示设置值
- JQuery方法内置循环：$('#tb:checkbox').xxxxx
$('#tb:checkbox').each(function(k){
//k表示当前索引
//this 表示当前DOM对象，当前循环的元素
})
- 三元运算
var v = 条件 ？ 真值 : 假值
标题显示和隐藏（jQuery支持链式编程）
$('#i1').addClass('hide') 给标签添加类样式
$('#i1').removeClass('hide') 给标签删除类样式
$('#i1').hasClass('hide') 查看标签的是否有hide样式
$('#i1').toggleClass('hide') 标签内如果有hide样式就去掉，如果没有就加上
$(this).next() 表示获取当前标签的下一个标签
$(this).prev() 表示获取当前标签的上一个标签
$(this).prevAll() 表示获取当前标签的上所有标签
$(this).parent() 表示获取当前标签的父标签
$(this).parents() 用于筛选祖先元素的表达式(例：$("span").parents("p") #找到每个span的所有是p元素的祖先元素。)
$(this).parentsUntil([expr|element][,filter]) 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$(this).chidren() 表示获取当前标签的所有的孩子标签
$(this).siblings() 表示获取当前标签除自己之外的所有兄弟标签
$(this).parent().siblings().find('.content')
找到当前标签的父标签，再找到父标签的兄弟标签，再找到有content样式的标签
文本操作：
$(this).text() #不加参数表示获取文本内容
$(this).text('aaa') #加参数表示赋值，如果包含html不解析
$(this).html() #不加参数表示获取标签
$(this).html('<a>www.baidu.com</a>') #加参数表示设置标签
$(this).val() #不加参数表示获取值
$(this).val('21111') #加参数表示设置值
属性操作：
# 专门用于做自定义属性
$('#i1').attr('type') 表示获取标签这个属性对应的值是多少
$('#i1').attr('type','text') 表示给这个标签的这个属性设置值
$('#i1').removeAttr('type') 表示把某个属性删除掉
# 专门用于对checkbox,radio进行操作
$('#i1').prop('checked') 获取值
$('#i1').prop('checked',true) 选中
$('#i1').prop('checked',false) 取消