前端总结
HTML
<!doctype> #规定文档类型
<!-- 注释 -->
转义字符以&；包裹 #在&；中间单词简写，详情查看8-1
<head> 头标签
<body> 体标签
<html> 根标签，全局的属性写在这里 ，标签种类等详情查看8-3
<div> 用来搭建页面结构的标签
width: 200px # 标签的宽
height: 200px # 标签的高
border-radius: 50%; #边框圆角设置
background-color: blue; #标签的底色设置
border: 1px solid black; # broder边框，1px就是1像素，solid就是实线，black就是定义边框的颜色
color: hotpink; #字体颜色
font-size: 30px; # 字体大小
transition: 1s 1s all linear; # 就是动画效果过渡效果,1s 1s过渡效果展开的时间和延迟时间,延迟时间一般不会写，用户体验度不好,动画属性默认all,渡曲线linear（线性）
.box:hover{} # hover给鼠标添加悬停效果
cursor:pointer; # 鼠标样式
list-style: none; # 清除列表样式
text-decoration: none; # 清除字体下划线
margin: 0; # 清除盒模型的margin属性
padding: 0; # 清除盒模型的padding属性
margin-top: 100px; # 设置外边距顶部
margin-left: 100px; # 设置外边距左边
border: 1px solid black; # 设置边框区间，solid就是边框样式实线和虚线，
margin: 100px 0 0 200px; # margin四个参数上下左右，用来设置整个标签在页面的什么位置
padding: 10px 20px 30px 40px; # pading四个参数上下左右，用来设置padding区域在色块区域的位置
float: left; # 设置浮动布局，左浮动
margin-right: auto; #设置外边距右边的属性为自动
calc(-155px - 157px) # clac函数是在html页面中做计算的，括号中一定要用空格分开
background-position-y:-48px; # 用来定位图像，这句是定位y轴
position: relative; # 就是相对定位
position: absolute; # 绝对定位
z-index: 66; # 定位布局中，可以用这个设定显示的层级，以数字的大小来获取显示优先级
position: fixed; # 固定定位，就是窗口上下拖动，这个窗口不会被拖动，一般网页的悬浮广告原理
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
css
选择器：head标签的后面写一个style，在style标签下，将需要控制的标签的类名或者id名写在这个标签下，后的{}就是作用域，作用域内写的参数就是样式块，这样一个组合可以达到控制html的样式，这就是选择器
css样式引入的方式
行间式：直接将css的样式写在标签的style属性中
内联式：在head标签下写style标签，在style标签内写样式块
外联式：在html文件内写好选择器和样式块，通过link标签导入
PS：<link rel="stylesheet" href="./css/index.css">
普通选择器
1、标签选择器 | 语法：div{}
2、通配选择器 | 语法： *{}
3、class选择器(类选择器) | 语法： .class{]
4、id选择器 | 语法： #box
5、！import选择器 | 语法： div{">!important;}
PS：这个语法比较特殊，在语句的值和结束符中间写
优先级！import > 行间式 > id > class> 标签 > 通配
高级选择器
群组选择器
div,p,h1{ } # 同时选中div标签下的几个类名的标签做控制
后代选择器（使用率最高），有两种写法 空格 和 >
空格写法 .sup .sub{}
PS：.sup可以为.sub的父亲，也可以为父辈
>号写法
.sup > .sub{}
PS：.sup只能为.sub的父亲
兄弟选择器，有两种写法 ~ 和 +
~ 写法 .div1 ~ .div2{}
PS：.div2在.div1下的兄弟，.div1是修饰词，.div1与.div2之间可以有其他兄弟，可以直接定位到其他兄弟
+写法 .div1 + .div2{}
PS:.div2在.div1下的兄弟，.div1是修饰词，.div1与.div2之间不可以有其他兄弟，可以直接定位到其他兄弟
交叉选择器
h2.hd{}
PS：是h2标签且有一个class名为hd
多类名选择器
.h.h61{}
PS：有一个标签有多个类名
伪类选择器的语法： 选择器类型：语法（数字） #详情见8-8
class-name:nth-child(number){}
PS：伪类选择器是从页面结构开始查找，number代表结构层，填写数字即可
伪类选择器优先级：高于标签低于id等于class
盒模型
盒模型解析：盒模型就是标签，标签显示存在四个部分
1、最外面是margin ：位置区间（外边距），就是控制在页面的位置
2、然后是border ：边框区间
3、然后是padding ：留白区间（内边距，就是内容和border之间留白）
4、然后是宽 X 高（content） ：内容区间
PS：每一个区间不会重叠，都有自己独立的区域
字体操作
text-align: center; # 改变文本的水平居中方式
line-height: 100px; # 行高
font-weight: 900; # 字重:字越粗越重，越细越轻，范围100~900的整数
font-size: 30px; # 字体大小
font-family: SimSun-ExtB,Shruti; # 字族 = 字体，可以写备用字体，就是字体后面以逗号分隔，再写一个字体，备用字体一般选用系统默认字体
font: 900 30px/100px "SimSun-ExtB","Shruti" # 以上所有功能的简写方式，整体写法：font: 字重 字体大小/行高 字族
精灵图操作
background-image: url("img/bg.png"); # 加载背景图片
background-repeat: no repeat; # 处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺
background-size: 100px 200px; # 背景尺寸(这个不常用)，会缩放背景图
background-position: 10px 20px; # 背景定位，往右移10（x轴左右偏移）、往下移20（y轴上下偏移）（-10、20往左移10，往下移20）
background: url("img/bg.png") red no-repeat 10px 20px; # 以上所有功能的简写方法:这叫整体赋值
清浮动
这个就是清浮动的写法，用父类伪类来写，子浮动,父级开启清浮动,父级的兄弟显示区域正常
.sup:after{content: "";display: block;clear: both;}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
javaScript
什么是javaScript
HTML用来做页面的架构，CSS用来做页面样式的布局
javaScript就是用来完成页面用户交互的，JS写的就是叫脚本
js就是弱语言类型，不同类型的时候可以相互转换
js写在script标签内，script标签可以出现在html的任意位置
script标签一般书写在body标签的最底部，但写在body标签和html标签之间，会被解析在body的最底部，所有代码书写在该位置也是合理的
PS：html的解析是由上而下的，所以脚本的执行也是根据html标签的顺序执行的
常用语句
alert('弹出警告') # alert 会在网页的上部弹出一个窗口
<script src="js的引入.js"> # js需要通过script标签从外部引入脚本
var 变量名 = 变量值； # var是定义变量的关键词
var m = new Number(100) # new是创建新的对象的关键词
print # 这个功能就是通过浏览器调用打印机打印页面
console.log （xxx） # 在终端打印
// # 这个是js的注释
! # 是取反的意思
isNaN # 检查是不是NaN
var n=10; # 定义一个数字类型的变量
var s = 'str' ; # 定义一个字符串类型的变量
var b = true; # 定义一个布尔值类型的变量
console.log(m,typeof (m)) #在终端查看值的类型，查看类型m时候可以不加括号
var x = Number('123'); # 值类型的转换,这里是将字符串123转换成数字123
var s = '字符串'; # 定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号
var abc; # 定义一个未定义类型
== # 这个是用来判断值是否相等，这个是做值比较
=== # 判断本质上是否相等，就是做值与类型比较
var num = 666 + ''; # 数字转换成字符串
var res1 = '10' + 5; # js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接
var res2 = '10' - 5; # 这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法
var res = '888' - 0; #字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了
var ress = +'888'; #字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串
isNaN（结果） # 判断转换的结果是否是非数字类型
res = parseInt('3.1.4abc'); # 将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值
res = parseFloat('3.1.4abc'); # 将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值
var arr = [1,2,5,3,4]; # 定义数组，js中数组就是列表
console.log(arr[2]); # 数组的查询 => 索引即可
delete arr[4]; # 数组的索引删除
delete arr[arr.length - 1]; # 删除数组中最后一个,arr.length - 1就是最后一个，以此类推-2就就是删除最后第二个
arr[4] = 100; # 修改数组中索引的值
arr.unshift(123); # 在数组的头位置增加值
arr.shift(); # 删除数组头位置的值
arr.push(888); # 在数组的尾部增加一个值
arr.pop(); # 将数组的尾部的值删除
arr.splice(1,1,999); # splice可以完成除了查的所有功能，包含插入。spilce（从什么索引开始，操作多少位，操作成什么(这个可以用逗号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）
newarr = arr.splice(1,2); # slice 切片操作,切片之后数组内的值就没有了，被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中
var str =arr.join('-'); # 将数组中的值以指定的符号拼接成字符串
narr = str.split('-'); # 字符串对应有一个逆运算,将字符串以指定的符号拆分成数组，拆分后数组内的值是以字符串形式存在，可以通过索引修改类型
narr[2] = narr[2] - 0; # 索引数组内指定位置的值改变类型
var dic = {name:'liuxx',age:'100'}; # js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用
console.log(dic.name); # 查找字典中指定的值，对象的调用就是对象加.来调用
console.log(dic['age']); # 查找字典中指定的值，对象中对象中所有的key都是字符串形式，和42的指令是一样的效果，知识写法不同
dic.sex = 'male'; # 字典的增加
dic.age = 99; # 修改字典内的指定key的值
delete dic.age; # 字典内的值删除
函数的定义 function fn1() {console.log('我是函数fn1');}
fn1(); # js中函数的调用方法
var fn2 = function () {console.log('我是函数fn2');}; # 定义函数的另一种方式
匿名函数的定义 （匿名函数只能在定义阶段被调用一次）（第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理(function () {console.log('我是匿名函数')})();
onmouseout \ onmouseover # 添加鼠标悬浮事件out是离开，over是悬浮（就是鼠标悬停）
s的基本数据类型（值类型、引用类型、特殊类型）
值类型：
1、number：数字类型 # js里面没有整型和浮点型，负数小数的区别，只有一个类型就是数字类型
2、string：字符串类型
3：boolean ： 布尔类型
4、underfined ： 未定义类型
--------------------------------------------------------------------------------------------------------------------------------------------------------
